xiguayaaaaa
xiguayaaaaa
文章28
标签4
分类7
回到首页
文章归档
我的朋友
© 2022 xiguayaaaaa Powered by Hexo & Tangyuxian
所谓伊人，在水一方
本站总访问量 次
本站访客数人次
(九)动画

(九)动画

2022年07月08日 3.6k 字 大概 20 分钟

(九)动画

CSS动画是W3C于2009年发布3D变形动画（标准草案），在年底发布了2D变形动画

浏览器支持使用代码形成网页动画，并且有些浏览器在添加时为了更好的兼容性，需要添加浏览器引擎的私有属性

  1. 谷歌：-webkit-
  2. 火狐：-moz-
  3. IE9：-ms-
  4. 其它一些浏览器不需要添加这些私有属性

9.1 CSS 2D动画

  • 2D动画可以用于元素的旋转，缩放，位移等
  • 基本语法
transform:none|transform-function
none为默认值
transform-function：变形函数（变形函数可以是一个，也可以是多个函数列表） 函数是以()结尾

  • 常见的变形函数

    • translate():移动元素
    • scale():元素缩放，可以是任意尺寸发生变形
    • rotate():旋转元素，取一个度数值，度数的后缀为deg，当度数为正时为顺时针旋转，为负时为逆时针旋转
    • skew()：元素斜切，取度数值让元素发生形状变化

  • 旋转rotate()

    • 让元素逆时针或顺时针旋转
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        /*伪类样式：当鼠标悬停在元素上时触发里面的样式属性*/
        .box:hover{
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="box">1</div>
</body>
</html>
  • 位置移动translate(左值，上值)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
        }
        .two{
            transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div class="box">这是1</div>
    <div class="box two">这是2</div>
</body>
</html>
  • 放大缩小（scale(宽度放大倍数,高度放大倍数) 当放大时两个值大于1，如果值位于0,1之间时为缩小）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        .box:hover{
            transform: scale(0.5,2);
        }
    </style>
</head>
<body>
    <div class="box">这是1</div>

</body>
</html>
  • 斜切（skew(Y轴角度，X轴角度)），当度数为正值时从左边斜切，为负值时从右边斜切
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        .box:hover{
            transform: skew(45deg,10deg);
        }
    </style>
</head>
<body>
    <div class="box">这是1</div>

</body>
</html>

9.1.1 简易照片墙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
        }
        .PBox{
            width: 100%;
            height: 400px;
            background-color: #efefef;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
        }
        .PBox dl{
            width: 10%;
            height: 70%;
            background-color: white;
            /*为了让照片看起来有那么点感觉，这里添加一个阴影*/
            box-shadow: 0px 10px 30px #8c8c8c;
            padding: 10px 20px;
            margin-top: 40px;
        }
        .PBox dt{
            width: 100%;
            height: 80%;
        }
        .PBox dt img{
            width: 100%;
            height: 100%;
        }
        .PBox dd{
            width: 100%;
            text-align: center;
            /*因为标签有一些默认的属性值，它在标签执行时就自动加载了，
            我们可以通过来提升自定义属性优先级来覆盖它*/
            margin: 8px 0px!important;
        }
        /*定义动画样式，让照片墙看起来不要那么规整*/
        .trans1{
            transform: skew(5deg,2deg);
        }
        .trans2{
            transform: scale(0.9,0.8);
        }
        .trans3{
            transform: rotate(25deg);
        }
        .trans4{
            transform: rotate(20deg) scale(1.1,1.1);
        }
        .trans5{
            transform: skew(5deg,2deg) scale(0.9,0.9);
        }
    </style>
</head>
<body>
    <!--网页版的照片墙，一共两行-->
    <div class="PBox">
        <!--单个照片-->
        <dl class="trans1">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans2">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans4">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans5">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans3">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl>
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
    </div>
    <div class="PBox">
        <!--单个照片-->
        <dl>
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans5">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans2">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans1">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans3">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans4">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
    </div>
</body>
</html>

9.2 过渡

  • 过渡是元素从一种样式逐渐改变成另一种样式
  • 语法

transition:过渡属性名称 [时间] [效果]

过渡属性 描述
transition 简写，该属性中包含了所有过渡属性
transition-property 规定应用过渡的CSS属性名称
transition-duration 过渡时间，默认为0
transition-delay 过渡从什么时候开始
……. …….. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        .box:hover{
            /*transform: skew(45deg,10deg);*/
            transform: scale(2,2);
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <div class="box">这是1</div>

</body>
</html>

9.2.1 通过过渡完善照片墙（当鼠标长按图片时，照片显示在网页的中间，并且照片角度回正，放大两倍） 长按（:active）

//长按案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        .box:active{
            /*transform: skew(45deg,10deg);*/
            transform: scale(2,2);
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <div class="box">这是1</div>

</body>
</html>

9.3 自定义动画

  • 使用Animation功能可以实现更加复杂的动画
属性 说明 初始值
animation 包含所有属性
animation-name 动画名称 none
animation-duration 动画时间 0
animation-timing-function 动画播放方式 ease
animation-iteration-count 动画播放的次数 1，infinite为重复播放

  • 制作动画需要以下两步

    • 第一步：需要在样式表中添加动画过程属性
@-webkit-keyframes name {
    /*动画开始时属性样式*/
    0%{
    /*样式属性：属性值*/
    }
    /*动画结束时属性样式*/
    100%{
    /*样式属性：属性值*/
    }
  }

  @keyframes name {
    /*动画开始时属性样式*/
    0%{
    /*样式属性：属性值*/
    }
    /*动画结束时属性样式*/
    100%{
    /*样式属性：属性值*/
    }
    }
    • 第二步：将制作好的动画通过animation引入给标签使用
//图片翻转
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 300px;
            background-image: url("img/IMG_E1640.JPG");
            background-size: 100%;
            /*引用动画*/
            animation:rotateImg 10s infinite;
        }

        /*制作动画执行过程*/
        @-webkit-keyframes rotateImg {
            0%{
                /*图片起始不动*/
                -webkit-transform: rotateY(0deg);
            }
            50%{
                -webkit-transform: rotateY(360deg);
            }
            100%{
                -webkit-transform: rotateY(720deg);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

光盘旋转效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            background-image: url("img/IMG_E1640.JPG");
            background-size: 100% 100%;
            border-radius: 50%;
            display: flex;
            /*引用大圆旋转动画*/
            animation: box 30s linear infinite;
        }
        .lb{
            width: 400px;
            height: 400px;
            background-image: url("img/IMG_1443.JPG");
            background-size: 100% 100%;
            border-radius: 50%;
            align-self: center;
            animation: lb 15s linear infinite;
        }
        /*制作动画：大圆要顺时针旋转，稍慢*/
        @-webkit-keyframes box {
            0%{
                -webkit-transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }
        }
        /*制作动画：小圆要逆时针旋转，稍快*/
        @-webkit-keyframes lb {
            0%{
                -webkit-transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(-360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="lb"></div>
    </div>
</body>
</html>

3D旋转相册

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
    background:#06081B;
    perspective:5000px;
}
.show {
    perspective:5000px;
    -webkit-transform:rotateX(-45deg);
    -moz-transform:rotateX(-45deg);
    transform:rotateX(-45deg);
    transform-style:preserve-3d;

}
.box {
    position:relative;
    width:150px;
    height:250px;

    margin:300px auto;
    transform-style:preserve-3d;
    -webkit-animation:rotate1 10s linear infinite;
    -moz-animation:rotate1 10s linear infinite;
    animation:rotate1 10s linear infinite;
    background-image: url("img/IMG_E1640.JPG");
    background-size: 100%;
}
.box img {
    width:150px;
    height:250px;
    border:1px solid #ccc;
    position:absolute;
    left:0;
    top:0;
    -webkit-box-reflect:below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));
}
.img1 {
    -webkit-transform:translateZ(300px);
    -moz-transform:translateZ(300px);
    transform:translateZ(300px);
}
.img2 {
    -webkit-transform:rotateY(36deg) translateZ(300px);
    -moz-transform:rotateY(36deg) translateZ(300px);
    transform:rotateY(36deg) translateZ(300px);
}
.img3 {
    -webkit-transform:rotateY(72deg) translateZ(300px);
    -moz-transform:rotateY(72deg) translateZ(300px);
}
.img4 {
    -webkit-transform:rotateY(108deg) translateZ(300px);
    -moz-transform:rotateY(108deg) translateZ(300px);
    transform:rotateY(108deg) translateZ(300px);
}
.img5 {
    -webkit-transform:rotateY(144deg) translateZ(300px);
    -moz-transform:rotateY(144deg) translateZ(300px);
    transform:rotateY(144deg) translateZ(300px);
}
.img6 {
    -webkit-transform:rotateY(180deg) translateZ(300px);
    -moz-transform:rotateY(180deg) translateZ(300px);
    transform:rotateY(180deg) translateZ(300px);
}
.img7 {
    -webkit-transform:rotateY(216deg) translateZ(300px);
    -moz-transform:rotateY(216deg) translateZ(300px);
    transform:rotateY(216deg) translateZ(300px);
}
.img8 {
    -webkit-transform:rotateY(252deg) translateZ(300px);
    -moz-transform:rotateY(252deg) translateZ(300px);
    transform:rotateY(252deg) translateZ(300px);
}
.img9 {
    -webkit-transform:rotateY(288deg) translateZ(300px);
    -moz-transform:rotateY(288deg) translateZ(300px);
    transform:rotateY(288deg) translateZ(300px);
}
.img10 {
    -webkit-transform:rotateY(324deg) translateZ(300px);
    -moz-transform:rotateY(324deg) translateZ(300px);
    transform:rotateY(324deg) translateZ(300px);
}
@-moz-keyframes rotate1 {
    0% {
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    transform:rotateY(0deg);
}
100% {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
}@-webkit-keyframes rotate1 {
    0% {
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    transform:rotateY(0deg);
}
100% {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
}</style>
</head>
<body>
<div class="show">
    <div class="box">
        <img src="img/IMG_E1642.JPG" class="img1">
        <img src="img/IMG_E1644.JPG" class="img2">
        <img src="img/IMG_E1640.JPG" class="img3">
        <img src="img/IMG_1444.JPG" class="img4">
        <img src="img/IMG_1440.JPG" class="img5">
        <img src="img/IMG_1439.JPG" class="img6">
        <img src="img/IMG_1430.JPG" class="img7">
        <img src="img/IMG_1427.JPG" class="img8">
        <img src="img/IMG_1429.JPG" class="img9">
        <img src="img/IMG_1443.JPG" class="img10">
    </div>
</div>


</body>
</html>

  • 定位(position)

    • 属性
      • absolute：绝对定位 会让元素脱离文档流，会参照第一个父元素进行定位
      • fiexd：规定位置，将元素固定在某个位置不动，不管网页怎么拖动，该元素始终不动
      • relative：相对定位，相对于正常位置进行定位
      • inherit：继承，规定添加了该属性的元素继承它父元素的定位属性
    • 注：添加了定位后，对于标签位置移动时不使用margin，而使用left,right,top,bottom
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            margin: 100px;
            position: relative;
        }
        .rows{
            width: 400px;
            height: 200px;
        }
        .cols{
            width: 50%;
            height: 100%;
            float: left;
        }
        .c1{
            background-color: #ee3fb3;
        }
        .c2{
            background-color: #50eecd;
        }
        .lb{
            width: 200px;
            height: 200px;
            background-color: #17ff0a;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="rows">
            <div class="cols c1"></div>
            <div class="cols c2"></div>
        </div>
        <div class="rows">
            <div class="cols c2"></div>
            <div class="cols c1"></div>
        </div>
        <div class="lb"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .b1{
            height: 1000px;
            background-color: #50eecd;
        }
        .b2{
            height: 1000px;
            background-color: #41ee4e;
        }
        .b3{
            height: 1000px;
            background-color: #edee4f;
        }
        .b4{
            height: 1000px;
            background-color: #ee3b13;
        }
        .b5{
            height: 1000px;
            background-color: #c25eee;
        }
        .fixedDemo{
            position: fixed;
            right: 0px;
            top: 30%;
            background-color: #17ff0a;
        }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b5"></div>
    <div class="fixedDemo">若干国粹</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .b1{
            height: 1000px;
            background-color: #50eecd;
        }
        .b2{
            height: 1000px;
            background-color: #41ee4e;
        }
        .b3{
            height: 1000px;
            background-color: #edee4f;
        }
        .b4{
            height: 1000px;
            background-color: #ee3b13;
        }
        .b5{
            height: 1000px;
            background-color: #c25eee;
        }
        .fixedDemo{
            position: fixed;
            right: 0px;
            top: 30%;
            background-color: #17ff0a;
        }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b5"></div>
    <div class="fixedDemo">若干国粹</div>
</body>
</html>
本文作者：xiguayaaaaa
本文链接：https://xiguayaaaaa.github.io/2022/07/08/%E5%89%8D%E7%AB%AF/%E4%B9%9D-%E5%8A%A8%E7%94%BB/
版权声明：本文采用 CC BY-NC-SA 3.0 CN 协议进行许可
前端组