CSS3动画-跳动的心

最新推荐文章于 2024-08-14 22:24:56 发布

m0_59302338

最新推荐文章于 2024-08-14 22:24:56 发布

阅读量85

点赞数

分类专栏： CSS 文章标签： css3 css 动画 html

本文链接：https://blog.csdn.net/m0_59302338/article/details/129256324

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文章演示了如何使用CSS3的@keyframes规则创建动画，并详细解释了各个动画属性，如animation-duration、animation-timing-function等。示例代码展示了一个颜色变换和缩放的动画效果，适用于不同浏览器，包括Safari和Chrome。

摘要由CSDN通过智能技术生成

动画：

@keyframes规定动画

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

·规定动画时长

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

@keyframes属性：

animation-duration:动画完成一个周期花费的时长（s/ms）

animation-timing-function:速度曲线，默认ease

animation-delay:多久后播放（动画何时开始）

animation-iteration-count:播放次数

animation-direction:是否在下周期逆向播放

animation-play-state:是否正在播放

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

简写属性：

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width = device - width,initial - scale = 1,minimum - scale = 1,user - scalable  no" />
    <!-- 识别是手机端还是PC端 -->
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
        }
        
        #par {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            animation: mypound 2s infinite;
            -webkit-animation: mypound 2s infinite;
            transform: rotate(45deg);
        }
        
        #id1 { 
            background-color: red;
            border-radius: 100%;
            position: absolute;
            right: 50px;
        }
        
        #id2 {
            background-color: red;
            border-radius: 100%;
            position: absolute;
            top: -50px;
        }
        
        @keyframes mypound {
            0% {
                transform: rotate(45deg) scale(1);
            }
            25% {
                transform: rotate(45deg) scale(1.2);
            }
            50% {
                transform: rotate(45deg) scale(0.9);
            }
            75% {
                transform: rotate(45deg) scale(1.2);
            }
            100% {
                transform: rotate(45deg) scale(1);
            }
        }
        
        @-webkit-keyframes mypound{
            0% {
                transform: rotate(45deg) scale(1);
            }
            25% {
                transform: rotate(45deg) scale(1.2);
            }
            50% {
                transform: rotate(45deg) scale(1);
            }
            75% {
                transform: rotate(45deg) scale(1.5);
            }
            100% {
                transform: rotate(45deg) scale(1);
            }
        }

        div::before{
            width: 120px;
            height: 120px;
            background-color: red;
            border-radius: 50%;
            box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
        }
    </style>
</head>

<body>
    <div id="par">
        <div id="id1">
        </div>
        <div id="id2">
        </div>
        <div id="id3">
        </div>
    </div>
</body>

</html>

运行结果：

m0_59302338

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画-跳动的心

animation-duration:动画完成一个周期花费的时长（s/ms）animation-timing-function:速度曲线，默认ease。animation-iteration-count:播放次数。animation-direction:是否在下周期逆向播放。animation-delay:多久后播放（动画何时开始）animation-play-state:是否正在播放。
复制链接

扫一扫