美文网首页
CSS3动画

CSS3动画

作者: 562843cce5ff | 来源:发表于2019-05-03 00:30 被阅读0次

CSS3动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            border-radius: 50%;
            background-color: red;
            position: relative;
            left: 0;
            top: 0;
            animation-name: zql;
            /*规定动画的名称*/
            animation-duration: 10s;
            /*规定动画在多久内做完*/
            animation-timing-function: ease;
            /*规定动画运行样式*/
            animation-delay: 1s;
            /*规定动画延迟时间*/
            animation-iteration-count: infinite;
            /*规定动画循环次数*/
            animation-direction: normal;
            /*规定动画是否逆向播放*/
            animation-fill-mode: none;
            /*规定动画执行完之后的位置*/
            animation-fill-mode: none;
            /*规定动画等待和执行完毕时的样式*/
            /*四个值
            1:none;默认为none,不改变
            2:forwards让动画在执行完毕后停留在动画最后一帧
            3:backwards,让动画在等待时显示动画的第一帧;
            4:both forwards和backwards的结合
            */
        }

        div {
            animation: zql 10s ease 1s infinite normal none;
        }

        div:hover {
            animation-play-state: paused;
            /*规定是否暂停动画*/
        }
        div>span{
            display: block;
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: gold;
        }

        @keyframes zql {
            form {
                left: 0;
                top: 0;
                background-color: red;
            }
            /*从这里开始*/
            to {
                left: 100px;
                top: 100px;
                background-color: yellow;
            }
            /*到这里结束*/
        }

        @keyframes zql {
            0% {
                width: 100px;
                height: 100px;
                left: 0;
                top: 0;
                background-color: red;
                transform: rotate(0deg);
            }
            25% {
                width: 200px;
                height: 200px;
                left: 400px;
                top: 0;
                background-color: yellow;
                transform: rotate(90deg);
            }
            50% {
                width: 100px;
                height: 100px;
                left: 400px;
                top: 400px;
                background-color: pink;
                transform: rotate(180deg);
            }
            75% {
                width: 200px;
                height: 200px;
                left: 0;
                top: 400px;
                background-color: #000000;
                transform: rotate(270deg);
            }
            100% {
                width: 100px;
                height: 100px;
                left: 0;
                top: 0;
                background-color: red;
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div>
    <span></span>
</div>
</body>
</html>

相关文章

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • CSS3 动画

    CSS3 动画CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 ...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

  • css3动画

    css3动画 CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

  • 纯CSS3绘制的逼真,呆萌,超酷的CSS3动画

    纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人...

  • 关于js动画和css3动画的差异性你了解吗?请简单谈一下

    css3动画:css3之后添加了transform动画计算函数,所以实现动画更为简单方便,并且transform矩...

  • 过度动画

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

  • 动画知识点

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

网友评论

      本文标题:CSS3动画

      本文链接:https://www.haomeiwen.com/subject/eroonqtx.html