您的位置：首页 > Web前端 > CSS

CSS之【动画模块】

2017-03-18 13:03 176 查看

我们单刀直入讲步骤：

第一步：告诉系统要执行哪一个动画：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>

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

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

每天进步一点点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 前端心得属性基础

相关文章推荐

新的分享

章节导航