CSS3: 动画循环执行(带延迟)的实现

最新推荐文章于 2023-04-12 15:37:56 发布

iteye_5904

最新推荐文章于 2023-04-12 15:37:56 发布

阅读量7.9k

点赞数 3

分类专栏： Div / Css / XML / HTML5 文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/iteye_5904/article/details/82671585

版权

本文详细介绍了如何使用CSS3实现一个每隔2秒执行一次，每次动画时长为1秒的效果。通过调整动画关键帧的百分比，使得动画在视觉上形成延迟2秒启动的效果，从而达到需求。文章提供了完整的代码示例，并链接到相关CSS3动画参数的参考资料。

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

出处：http://www.cnblogs.com/starof/p/5443445.html

一、最终效果

需求：gift图片的小动画每隔2s执行一次。

需求就一句话，我们看一下实现过程。

二、实现过程

1、网页结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
        display: inline-block;
        background-color: #cc2222;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        padding: 10px 12px;
        width: 100px;
        position: relative;
    }
    
    .ico {
        position: absolute;
        width: 14px;
        height: 16px;
        background: url(images/ico.png) no-repeat center;
        background-size: 100%;
        position: absolute;
        top: 4px;
        right: 27px;
    }
    </style>
</head>

<body>
    <nav>
        <a href="javascript:;" class="box">
                            一元夺宝 
                            <div class="ico"></div>
                        </a>
    </nav>
</body>

</html>

2、原始动画

原始动画效果为：鼠标hover上去出现动画。

动画样式如下：

/*动画*/
    .ico:hover{
    -webkit-animation: Tada 1s both

最低0.47元/天解锁文章

iteye_5904

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS3: 动画循环执行(带延迟)的实现

出处：http://www.cnblogs.com/starof/p/5443445.html 一、最终效果需求：gift图片的小动画每隔2s执行一次。需求就一句话，我们看一下实现过程。二、实现过程1、网页结构&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &l...
复制链接

扫一扫

专栏目录