css3（九）动画--页面特效

最新推荐文章于 2024-05-08 22:33:14 发布

不许偷苹果

最新推荐文章于 2024-05-08 22:33:14 发布

阅读量170

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_38904347/article/details/82285523

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS3的动画需要遵循@keyframes规则

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。（infinite：规定动画应该无限次播放。）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。（alternate：动画应该轮流反向播放。）
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。（paused：规定动画已暂停。）
animation-fill-mode	规定对象动画时间之外的状态。

animation-fill-mode
none：不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
动画练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #fff;
            border-radius: 50%;
            float: left;
            margin-left: 70px;
        }
        .a{
            background: linear-gradient(to top,red,green);
            position: relative;
            animation-name:aa;
            animation-duration:3s;  /*完成一个周期时间*/
            animation-timing-function: ease;    /*动画运动曲线*/
            animation-iteration-count: infinite; /*播放次数 无限次播放*/
            animation-play-state: running;      /*规定动画是否在运行*/
            animation-fill-mode: none;      /*规定动画时间之外的状态*/
            animation-direction: normal; /*规定下一个周期是否逆向播放*/
        }
        @keyframes aa{
            0%{
                left: 0px;
                top: 200px;
            }
            30%{
                left:200px;
                top: 1000px;
            }
            60%{
                left:900px;
                top: 0px;
            }
            100%{
                left: 1200px;
                top: 1200px;
            }
        }
        .b{
            background:blue;
            position: relative;
            animation:bb 3s ease infinite alternate;
        }
        @keyframes bb{
            from{top:300px;left:600px;}
            to{top: 300px;left: 600px;transform: scale(5,5) rotate(360deg);border-radius: 0px;background: linear-gradient(to top,white,orange);}
        }
        .c{
            background:black;
            position: relative;
            animation:cc 3s ease infinite alternate;
        }
        @keyframes cc{
            0%{
                left: 0px;
                top: 0px;
                background: linear-gradient(to top,white,orange);
            }
            50%{
                left:900px;
                top: 0px;
                transform: rotate(360deg);
                background: linear-gradient(to top,pink,plum);
            }
            100%{
                left: 1200px;
                top: 1200px;
                background: linear-gradient(to top,plum,salmon);
            }
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>
</html>

perspective3D摄像机
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
transform-style 属性
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
flat：子元素将不保留其 3D 位置。
preserve-3d：子元素将保留其 3D 位置。
练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>透视空间</title>
    <style type="text/css">
        .box{
            margin:200px auto;
            width:200px;
            height:200px;
            border:1px solid red;
            perspective: 500px;
        }
        .a{
            width:100%;
            height:100%;
            background:yellow;
            transition:all 3s linear;
            transform: translateZ(-200px);
        }
        .a:hover{
            transform: translateZ(200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a">鼠标移动</div>
    </div>
</body>
</html>

不许偷苹果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3（九）动画--页面特效

CSS3的动画需要遵循@keyframes规则属性描述 @keyframes 规定动画。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的...
复制链接

扫一扫