第7章 CSS3布局与动画

用户8928967

发布于 2021-08-20 17:03:31

3800

发布于 2021-08-20 17:03:31

文章被收录于专栏：用户8928967的专栏用户8928967的专栏

带着问题去看书学习啦~

HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版）「不推荐」，微信读书中找到的学习Web前端书籍，第7章开始啦，耶(＾－＾)V

习题

7-1 CSS3中 dispIay 属性的作用是什么？

用于控制布局。
每个标签都有一个默认的display值，与标签的类型有关。
默认值通常是 block 或 inline。
值为 block 的标签通常叫块状标签（比如<div>，<p>，<form>），值为inline的标签通常叫行内标签（比如 <span>，<a>）。

7-2 fIoat 属性的属性值有哪些？含义分别是什么？

left：表示标签向左浮动
right：表示标签向右浮动

7-3 写出为元素添加多个变形效果的代码（仅写出添加变形效果的关键代码）。

图片边移动边旋转：

img {padding: 30px;transition: 2s ease all;transform-origin: center; transform: translate(400px, 0) rotate(360deg);}

7-4 用于设置过渡效果的属性是什么，其属性值有哪些？

「transition-property：（指定参与过渡）」

语法格式：transition-property: all | none |[]

all：默认值，表示所有可以进行过渡的CSS属性。
none：表示不指定过渡的CSS属性。
：表示指定要进行过渡的CSS属性；可以同时指定多个属性值，以英文逗号“,”进行分隔。

「transition-duration（指定过渡持续时间）：」

语法格式：transition-duration:[ ,]

用于指定过渡持续的时间，默认值为0，如果存在多个属性值，以英文逗号“,”进行分隔。

「transition-delay（指定过渡延迟时间）：」

语法格式：transition-delay:[ ,]

用于指定延迟过渡的时间，默认值为0，如果存在多个属性值，以英文逗号“,”进行分隔。

「transition-timing-function（指定过渡动画类型）：」

transition-timing-function属性的属性值及含义

transition-timing-function属性的属性值及含义

7-5 应用transform属性的什么函数可以实现缩放效果？

「scale」

语法：

<style>  
  选择器  {
    transform：属性值；
  }
</style>

附 transform 属性的属性值及含义：

transform属性的属性值及含义

其他

实践开始啦，抄 Demo，然后自行修修改改一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo7</title>

    <style>
        p > img { width: 200px; float: right; margin: 0 0 1px 10px;}
        p {line-height: 30px;}

        .cont {width: 800px;height: 300px;;background: grey;}
        div > img {padding: 30px;transition: 2s ease all; /*设置所有属性参与过渡*/}
        .cont:hover img {transform-origin: center; /*设置图片旋转点在其中心处*/transform: translate(400px, 0) rotate(360deg); } /*设置图片向右平移400像素并且旋转360度*/
       
        .content{ margin: 20px auto; width: 1000px; height: 500px;background: rgb(212, 168, 114);}
        .content > ul{ width: 1000px;height: 50px; background: #777; color: #fff; }
        .content > ul > li{ width: 200px; height:50px;overflow: hidden;transition: 0.5s ease height;float: left;line-height: 50px; text-align: center; list-style: none; font-size: 20px; position: relative; }
        .content > ul > li:hover{ background: #fff;color: rgb(28,178,156); height:320px;}
        .content > ul > li:hover ul{display: block; }
        .content > ul > :first-child{ background: #eee; color: rgb(49, 94, 45)}
        .content > ul > :first-child:hover{ height: 50px;}
        .content > ul > :last-child:hover{ height: 300px;}
        .content > ul > li > ul{ display: none;list-style: none; color: #000; position: absolute; top: 50px; left: 0;font-size: 16px;}
        .content > ul > li > ul > li{ padding:0 20px; background: #fff; clear: both;color: #000; }
        .content > ul > li > ul > li:hover{ background: #a3c247; }
    </style>
</head>
<body>
    <p><img src="demo5.jpg" />明日学院，是吉林省明日科技有限公司倾力打造的在线实用技能学习平台。该平台于2016年正式上线，主要为学习者提供海量、优质的课程，课程结构严谨，用户可以根据自身的学习程度，自主安排学习进度。我们的宗旨是，为编程学习者提供一站式服务，培养学习者的编程思维。</p>

    <div class="cont"><img src="demo5.jpg"width="200"></div>

    <div class="content">
        <ul>
            <li>首页</li>
            <li>知识图谱
                <ul class="drop">
                    <li>IT高新技能</li>
                    <li>公务员考试</li>
                    <li>计算机二级</li>
                    <li>考研一站通</li>
                </ul>
            </li>
            <li>IT精英
                <ul class="drop">
                    <li>前端开发</li>
                    <li>Java开发</li>
                    <li>测试与维护</li>
                    <li>算法分析</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

运行效果：