纯CSS动画打造~会动的小球

最新推荐文章于 2021-08-03 20:28:10 发布

weixin_33998125

最新推荐文章于 2021-08-03 20:28:10 发布

阅读量289

点赞数

原文链接：http://blog.51cto.com/13687572/2104795

版权

会动的小球，设计html,css知识点，另外动画是完全用css做的，很简单便捷哦~这只是一个小小的案例，以后为大家提供更多的案例！！纯CSS动画打造~会动的小球
会动的小球
<!DOCTYPE html>


**<html>

<head>
<meta charset="UTF-8">
<title>CSS3 loading图标</title>
<link rel="stylesheet" href="css/loading.css" />
</head>
<body>
<div id="loading-3">
<span class="item item-1"></span>
<span class="item item-2"></span>
</div>
</body>

</html>
```**``
css部分：
div#loading-3{
position: relative;
width: 160px;
height: 80px;
margin: 100px auto;
}
div#loading-3 span.item{
display: block;
position: absolute;
top: 25px;
width: 30px;
height: 30px;
border-radius: 50%;
animation-duration: 1.2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div#loading-3 span.item.item-1{
left: 25px;
background-color: #2ecc71;
animation-name: loading_green;
}
div#loading-3 span.item.item-2{
right: 25px;
background-color: #e74c3c;
animation-name: loading_red;
}
@keyframes loading_green{
0%{
left: 25px;
width: 30px;
height: 30px;
background-color: #2ecc71;
}
50%{
left: 100px;
width: 40px;
height: 40px;
background-color: #9b59b6;
}
100%{
left: 25px;
width: 30px;
height: 30px;
background-color: #e74c3c;
}
}
@keyframes loading_red{
0%{
right: 25px;
width: 30px;
height: 30px;
background-color: #e74c3c;
}
50%{
right: 100px;
width: 40px;
height: 40px;
background-color: #9b59b6;
}
100%{
right: 25px;
width: 30px;
height: 30px;
background-color: #2ecc71;
}
}

转载于:https://blog.51cto.com/13687572/2104795

weixin_33998125

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS动画打造~会动的小球

会动的小球，设计html,css知识点，另外动画是完全用css做的，很简单便捷哦~这只是一个小小的案例，以后为大家提供更多的案例！！会动的小球<!DOCTYPE html>**<html><head><meta charset="UTF-8"><title>CSS3 loading图标</title><l...
复制链接

扫一扫