自己编写的纯CSS3的动画代码

CSS动画案例解析
本文介绍了一个使用CSS实现的动画案例,详细展示了不同元素如何通过关键帧动画实现动态位置变化效果。文章通过三个不同ID的元素演示了动画的不同方向和路径,并且介绍了:hover状态下的动画暂停效果。
<div class="dh" id="kf"></div>
<div class="dh" id="kf1"></div>
<div class="dh" id="kf2"></div>
@keyframes change{
	0%   {left:0px; top:0px;}
    25%  {left:200px; top:300px;}
    50%  {left:400px; top:680px;}
    75%  {left:600px; top:300px;}
    100% {left:800px; top:0px;}
}
@-webkit-keyframes change{
	0%   {left:0px; top:0px;}
    25%  {left:200px; top:300px;}
    50%  {left:400px; top:680px;}
    75%  {left:600px; top:300px;}
    100% {left:800px; top:0px;}
}
@keyframes change1{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:300px;}
    50%  {left:-400px; top:680px;}
    75%  {left:-600px; top:300px;}
    100% {left:-800px; top:0px;}
}
@-webkit-keyframes change1{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:300px;}
    50%  {left:-400px; top:680px;}
    75%  {left:-600px; top:300px;}
    100% {left:-800px; top:0px;}
}
@keyframes change2{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:680px;}
    50%  {left:-400px; top:0px;}
    75%  {left:-100px; top:680px;}
    100% {left:100px; top:0px;}
}
@-webkit-keyframes change2{
	0%   {left:0px; top:0px;}
    25%  {left:-200px; top:300px;}
    50%  {left:-400px; top:680px;}
    75%  {left:-600px; top:300px;}
    100% {left:-800px; top:0px;}
}
.dh{
width:100px;
height:100px;
border-radius:50px;
animation:change 10s;
position:relative;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
.dh:hover{
	animation-play-state: paused
}
#kf{
animation-name:change;
float:left;
background:linear-gradient(to top right, red,white,blue);
}
#kf1{
	float:right;
	background:linear-gradient(to top right, #FC0 , white , #FF0);
	animation-name:change1;
}
#kf2{
	float:left;
	margin-left:500px;
	background:linear-gradient(to top right, red , white , #FF0);
	animation-name:change2;
}

欢迎指教
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值