7. css动画-页面特效

2019-09-27 本文已影响0人瑟闻风倾

7.1 2D、3D转换效果(transform属性)

说明：通过CSS3转换，可以对元素进行移动、转动、缩放、拉长或拉伸。转换是一种使元素改变形状、尺寸和位置的一种效果。可以使用2D、3D来转换元素。
(1) 2D转换方法

translate(x，y)：x，y坐标方向的移动
rotate(deg)：旋转
scale(1,2)：宽和高的缩放倍数
skew(deg,deg)：x，y轴的倾斜角度
matrix()：矩阵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画-2D、3D转换</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #FF8C00;
            margin-left: 100px;
        }
        #div1{
            transform: translate(100px,10px);/*x,y坐标轴的移动*/
            -webkit-transform: translate(100px,10px);/*支持Safari和Chrome浏览器*/
            -ms-transform:  translate(100px,10px);/*支持IE浏览器(360使用的是IE的内核，所以也支持360浏览器)*/
            -o-transform: translate(100px,10px);/*支持Opera浏览器*/
            -moz-transform: translate(100px,10px);/*支持Firefox浏览器*/
        }
        #div2{
            transform: rotate(200deg);
            -webkit-transform: rotate(200deg);
            -ms-transform:  rotate(180deg);/*可以设置不同浏览器的不同效果*/
            -o-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
        }
        #div3{
            margin-top: 50px;
            transform: scale(1,2);
            -webkit-transform: scale(1,2);
            -ms-transform: scale(1,2);
            -o-transform: scale(1,2);
            -moz-transform: scale(1,2);
        }
        #div4{
            margin-top: 50px;
            transform: skew(20deg,15deg);
            -webkit-transform: skew(20deg,15deg);
            -ms-transform: skew(20deg,15deg);
            -o-transform: skew(20deg,15deg);
            -moz-transform: skew(20deg,15deg);
        }
        #div5{
            margin-top: 50px;
            transform: matrix(1,2,1,1,2,3);
            -webkit-transform: matrix(1,2,1,1,2,3);
            -ms-transform: matrix(1,2,1,1,2,3);
            -o-transform: matrix(1,2,1,1,2,3);
            -moz-transform: matrix(1,2,1,1,2,3);
        }
    </style>
</head>
<body>
    <div>初始效果</div>
    <br/>
    <div id="div1">2D-translate</div>
    <br/>
    <div id="div2">2D-rotate</div>
    <br/>
    <div id="div3">2D-scale</div>
    <br/>
    <div id="div4"> 2D-skew</div>
    <br/>
    <div id="div5">2D-matrix</div>
</body>
</html>

2D效果.png

(2) 3D转换方法

rotateX()：
rotateY()：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画-2D、3D转换</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #FF8C00;
            margin-left: 100px;
        }
        #div6{
            transform: rotateX(120deg);
            -webkit-transform: rotateX(120deg);
            -ms-transform: rotateX(120deg);
            -o-transform: rotateX(120deg);
            -moz-transform: rotateX(120deg);
        }
        #div7{
            transform: rotateY(120deg);
            -webkit-transform: rotateY(120deg);
            -ms-transform: rotateY(120deg);
            -o-transform: rotateY(120deg);
            -moz-transform: rotateY(120deg);
        }
    </style>
</head>
<body>
    <div>初始效果</div>
    <br/>
    <div id="div6">3D-rotateX</div>
    <br/>
    <div id="div7">3D-rotateY</div>
</body>
</html>

3D效果.png

7.2 过渡效果(transition属性)

说明：使用CSS3可以给元素添加一些效果。CSS3过渡是元素从一个样式转换成另一种样式：动画效果的CSS + 动画执行的时间。

属性	描述
transition	设置4个过渡属性
transition-property	过渡的名称
transition-duration	过渡效果花费的时间
transition-timing-function	过渡效果的时间曲线
transition-delay	过渡效果延时的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画-过渡效果</title>
    <style>
        div{
            background-color: yellow;
            width: 100px;
            height: 100px;
            
            -webkit-transition: background-color 2s linear,width 2s linear,height 2s linear,transform 2s linear;
            -moz-transition: background-color 2s linear,width 2s linear,height 2s linear,transform 2s linear;
            -ms-transition: background-color 2s linear,width 2s linear,height 2s linear,transform 2s linear;
            -o-transition: background-color 2s linear,width 2s linear,height 2s linear,transform 2s linear;
            transition: background-color 2s linear,width 2s linear,height 2s linear,transform 2s linear;
 
            -webkit-transition-delay: 1s;
            -moz-transition-delay: 1s;
            -ms-transition-delay: 1s;
            -o-transition-delay: 1s;
            transition-delay: 1s;
        }
        /*鼠标滑过事件*/
        div:hover{
            background-color: #FF8C00;
            width: 200px;
            height: 200px;
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>简单动画示例</div>
</body>
</html>

transition实现简单动画.gif

7.3 自定义动画效果(animations属性)

说明：使用CSS3可以创建动画。CSS3动画需遵循@webkit-frames规则：规定动画的名称+规定动画的时长。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animations-自定义动画</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            /*animation: myAnimations 5s;*/
            animation: myAnimations 5s infinite alternate;/*循环动画*/
        }
        /*自定义动画*/
        @keyframes myAnimations {
            0%{
                left: 0px;
                top: 0px;
                background-color: red;
            }
            25%{
                left: 0px;
                top: 200px;
                background-color: #FF8C00;
            }
            50%{
                left: 200px;
                top: 200px;
                background-color: aqua;
            }
            75%{
                left: 200px;
                top: 0px;
                background-color: yellow;
            }
            100%{
                left: 0px;
                top: 0px;
                background-color: red;
            }
        }
        /*浏览器适配*/
        @-webkit-keyframes myAnimations {
            0%{
                left: 0px;
                top: 0px;
                background-color: red;
            }
            25%{
                left: 0px;
                top: 200px;
                background-color: #FF8C00;
            }
            50%{
                left: 200px;
                top: 200px;
                background-color: aqua;
            }
            75%{
                left: 200px;
                top: 0px;
                background-color: yellow;
            }
            100%{
                left: 0px;
                top: 0px;
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <div>效果展示</div>
</body>
</html>

animation实现自定义复杂动画.gif

7.3 多列的效果

说明：在CSS3中，可以创建多列来对文本或者区域进行布局。

属性	描述
column-count	分列的数量
column-gap	每列的间隔距离
column-rule	每列间隔的线及线的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画-多列</title>
    <style>
        .div1{
            column-count: 4;
            -webkit-column-count: 4;
            column-gap: 50px;
            -webkit-column-gap: 50px;
            column-rule: 5px outset #FF8C00;
            -webkit-column-rule: 5px outset #FF8C00;
        }
    </style>
</head>
<body>
    <div class="div1">
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
        如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
    </div>
</body>
</html>

多列效果.png

7.4 使用多列实现瀑布流效果

瀑布流效果：宽度相同，高度不同的多个图片排布方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用多列实现瀑布流效果</title>
    <style>
        .container{
            column-width: 250px;
            column-gap: 5px;
        }
        .container div{
            width: 250px;
            margin: 5px 0;
        }
        img{
            width: 250px;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div><img src="../img/1.jpg"><p>标签1</p></div>
        <div><img src="../img/2.PNG"><p>标签2</p></div>
        <div><img src="../img/3.png"><p>标签3</p></div>
        <div><img src="../img/4.png"><p>标签4</p></div>
        <div><img src="../img/5.png"><p>标签5</p></div>
        <div><img src="../img/6.png"><p>标签6</p></div>
        <div><img src="../img/7.png"><p>标签7</p></div>
        <div><img src="../img/8.png"><p>标签8</p></div>
        <div><img src="../img/9.png"><p>标签9</p></div>
        <div><img src="../img/10.PNG"><p>标签10</p></div>
        <div><img src="../img/11.png"><p>标签11</p></div>
        <div><img src="../img/12.png"><p>标签12</p></div>
        <div><img src="../img/13.PNG"><p>标签13</p></div>
        <div><img src="../img/bl.PNG"><p>标签14</p></div>
        <div><img src="../img/cat.png"><p>标签15</p></div>
        <div><img src="../img/crab.png"><p>标签16</p></div>
        <div><img src="../img/iqiyi.png"><p>标签17</p></div>
        <div><img src="../img/sls.jpg"><p>标签18</p></div>
        <div><img src="../img/vr.png"><p>标签19</p></div>
        <div><img src="../img/wx.PNG"><p>标签20</p></div>
        <div><img src="../img/1.jpg"><p>标签21</p></div>
        <div><img src="../img/2.PNG"><p>标签22</p></div>
        <div><img src="../img/3.png"><p>标签23</p></div>
        <div><img src="../img/4.png"><p>标签24</p></div>
        <div><img src="../img/5.png"><p>标签25</p></div>
        <div><img src="../img/6.png"><p>标签26</p></div>
        <div><img src="../img/7.png"><p>标签27</p></div>
        <div><img src="../img/8.png"><p>标签28</p></div>
        <div><img src="../img/9.png"><p>标签29</p></div>
        <div><img src="../img/10.PNG"><p>标签30</p></div>
        <div><img src="../img/11.png"><p>标签31</p></div>
        <div><img src="../img/12.png"><p>标签32</p></div>
        <div><img src="../img/13.PNG"><p>标签33</p></div>
        <div><img src="../img/bl.PNG"><p>标签34</p></div>
        <div><img src="../img/cat.png"><p>标签35</p></div>
        <div><img src="../img/crab.png"><p>标签36</p></div>
        <div><img src="../img/iqiyi.png"><p>标签37</p></div>
        <div><img src="../img/sls.jpg"><p>标签38</p></div>
        <div><img src="../img/vr.png"><p>标签39</p></div>
        <div><img src="../img/wx.PNG"><p>标签40</p></div>
    </div>
</body>
</html>

使用多列实现瀑布流效果.gif