CSS之【动画模块】

最新推荐文章于 2022-09-05 09:12:19 发布

叫我邱球球

最新推荐文章于 2022-09-05 09:12:19 发布

阅读量493

点赞数

分类专栏：有关CSS 文章标签： css 前端心得属性基础

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/62928067

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

我们单刀直入讲步骤：

第一步：告诉系统要执行哪一个动画：animation-name:pingyi（动画名称可以任意起一个);

第二步：告诉系统我们要创建一个名称叫做pingyi的动画

@keyframes pingyi{

from{

margin-left:0;

}

to{

margin-left:500px;

}

第三步：告诉系统动画持续的时长：

animation-duration:3s;

基础的东西大家去w3c看看就好了。我这里就不过多的叙述了。

-----------------------------------分割线----------------------------------

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
        ul{
            width: 1200px;
            height: 188px;
            /*border: 1px solid #000;*/
animation:move 10s linear;
            animation-iteration-count: infinite;
            position: absolute;
            animation-delay: 0s;
        }
        @keyframes move {
             from{margin-left: 0px;}
            to{margin-left: -600px;}
        }
        ul li{
            list-style: none;
            width: 300px;
            height: 188px;
            /*background-color: red;*/
            float: left;
            /*margin-left:0;*/

        }
        div{
            width: 600px;
            height: 188px;
            border: 1px solid #000;
            margin:100px auto;
            position: relative;
            overflow: hidden;
        }
        div:hover ul{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
<div><ul>
    <li><img src="images/wawa.JPG" alt="" width="300px" height="188px"></li>
    <li><img src="images/wawa.JPG" alt="" width="300px" height="188px"></li>
    <li><img src="images/wawa.JPG" alt="" width="300px" height="188px"></li>
    <li><img src="images/wawa.JPG" alt="" width="300px" height="188px"></li>
</ul></div>
</body>
</html>

上面的代码是制作一个无线轮播的图片。可以达到鼠标触碰到图片就会自动暂停的效果。

大家测试代码的时候需要把图片更换成你们自己的图片，就能看到效果了。

每天进步一点点。

叫我邱球球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之【动画模块】

我们单刀直入讲步骤：第一步：告诉系统要执行哪一个动画：animation-name:pingyi（动画名称可以任意起一个);第二步：告诉系统我们要创建一个名称叫做pingyi的动画@keyframes pingyi{from{margin-left:0;}to{margin-left:500px;}}第三步：告诉系统动画持续的时长：ani
复制链接

扫一扫