HTML/CSS/动画
这周学了下CSS3的动画，做了一个摆动的动画 代码如下：
<head>
<title></title>
<style type="text/css">
ul
{
margin-top: 100px;
margin-left: 300px;
}
li
{
float: left;
border: 1px solid transparent;
height: 600px;
width:80px;
list-style: none;
}
.c1
{
width: 5px;
height: 300px;
border: 1px solid;
margin: 300px auto;
background-color: saddlebrown;
}
.c2
{
width: 80px;
height: 80px;
border-radius: 100%;
border: 1px solid;
margin: -300px auto;
background: black;
}
@keyframes left
{
0%
{
transform:rotate(80deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(0deg);
}
}
#left
{
animation-name:left;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-in;
}
@keyframes left1
{
0%
{
transform:rotate(40deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(0deg);
}
}
#left1
{
animation-name:left1;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-in;
}
@keyframes left2
{
0%
{
transform:rotate(20deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(0deg);
}
}
#left2
{
animation-name:left2;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-in;
}
@keyframes right
{
0%
{
transform:rotate(0deg);
}
50%
{
transform:rotate(-0deg);
}
100%
{
transform:rotate(-80deg);
}
}
#right
{
animation-name:right;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
@keyframes right1
{
0%
{
transform:rotate(0deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(-40deg);
}
}
#right1
{
animation-name:right1;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
@keyframes right2
{
0%
{
transform:rotate(0deg);
}
50%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(-20deg);
}
}
#right2
{
animation-name:right2;
animation-duration:1s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
</style>
</head>
<body>
<ul>
<li id="left">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="left1">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="left2">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li >
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="right2">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="right1">
<div class="c1"></div>
<div class="c2"></div>
</li>
<li id="right">
<div class="c1"></div>
<div class="c2"></div>
</li>
</ul>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
