CSS3动画——五个圆球的动画及音乐播放器和Loading图标
2017-08-18 15:32
387 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.boxMove ul {
width: 800px;
margin: 0 auto;
}
.boxMove ul li {
/*浮动*/
float:left;
position:absolute;
list-style: none;
}
ul li b {
width: 173px;
height: 173px;
background: url(../images/iconlist_1.png);
display: block;
}
ul li#icon_2 {
margin-left: 150px;
}
ul li#icon_2 b {
background-position: -175px 0;
}
ul li#icon_3 {
margin-left:300px;
}
ul li#icon_3 b {
background-position:-347px 0px;
}
ul li#icon_4 {
margin-left:450px;
}
ul li#icon_4 b {
background-position:-525px 0px;
}
ul li#icon_5 {
margin-left:600px;
}
ul li#icon_5 b {
background-position:-696px 0px;
}
@keyframes move01 {
from {
transform: translateX(-350px);
}
to {
transform:translateX(0);
}
}
#icon_1 {animation: move01 3s linear;
}
@keyframes move02 {
from {
transform: translateX(-500px);
}
to {
transform: translateX(0);
}
}
#icon_2 {
animation: move02 3.9s linear;
}
@keyframes move03 {
from {
transform: translateX(-650px);
}
to {
transform: translateX(0);
}
}
#icon_3 {
animation: move03 4.8s linear;
}
@keyframes move04 {
from {
transform: translateX(-800px);
}
to {
transform: translateX(0);
}
}
#icon_4 {
animation: move03 5.7s linear;
}
@keyframes move05 {
from {
transform: translateX(-950px);
}
to {
transform: translateX(0);
}
}
#icon_5 {
animation: move03 6.6s linear;
}
/*网易云音乐图标样式*/
@keyframes waveMusic {
from {
transform: scaleY(0.4);
}
to {
transform: scaleY(1);
}
}
.wave-wrapper {
width: 150px;
height: 30px;
margin:50px auto;
font-size: 16px;
text-align: center;
}
.wave-wrapper .w-rect {
background-color: #333;
height: 100%;
width:6px;
display:inline-block;
animation: waveMusic 1.2s infinite ease-in-out;
}
.wave-wrapper .rect1 {
animation-delay: -1.2s;
}
.wave-wrapper .rect2 {
animation-delay: -1.1s;
}
.wave-wrapper .rect3 {
animation-delay: -1.0s;
}
.wave-wrapper .rect4{
animation-delay: -.9s;
}
.wave-wrapper .rect5 {
animation-delay: -.8s;
}
/*loading图标的实现*/
.circle {
height: 200px;
width:200px;
border-radius: 50%;
position: relative;
margin:0 auto;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.circle .loading {
width:160px;
height:160px;
border-radius: 100%;
border-right:10px solid #F0E8E8;
border-bottom:10px solid #F0E8E8;
border-left:10px solid green;
border-top:10px solid green;
animation: loading 3s infinite linear;
}
.circle .font-loading {
text-align: center;
position: absolute;
top: 23%;
left: 27%;
color: green;
font-size: 23px;
}
</style>
</head>
<body>
<!-- start360卫士球 -->
<div class="boxMove">
<ul>
<li id="icon_1"><b></b></li>
<li id="icon_2"><b></b></li>
<li id="icon_3"><b></b></li>
<li id="icon_4"><b></b></li>
<li id="icon_5"><b></b></li>
</ul>
</div>
<!-- end360卫士球 -->
<!-- start网易云音乐图标 -->
<div class="wave-wrapper">
<div class="w-rect rect1"></div>
<div class="w-rect rect2"></div>
<div class="w-rect rect3"></div>
<div class="w-rect rect4"></div>
<div class="w-rect rect5"></div>
</div>
<!-- end网易云音乐图标 -->
<!--start loading 图标 -->
<div class="circle">
<div class="loading"></div>
<p class="font-loading">loading</p>
</div>
<!--end loading 图标 -->
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.boxMove ul {
width: 800px;
margin: 0 auto;
}
.boxMove ul li {
/*浮动*/
float:left;
position:absolute;
list-style: none;
}
ul li b {
width: 173px;
height: 173px;
background: url(../images/iconlist_1.png);
display: block;
}
ul li#icon_2 {
margin-left: 150px;
}
ul li#icon_2 b {
background-position: -175px 0;
}
ul li#icon_3 {
margin-left:300px;
}
ul li#icon_3 b {
background-position:-347px 0px;
}
ul li#icon_4 {
margin-left:450px;
}
ul li#icon_4 b {
background-position:-525px 0px;
}
ul li#icon_5 {
margin-left:600px;
}
ul li#icon_5 b {
background-position:-696px 0px;
}
@keyframes move01 {
from {
transform: translateX(-350px);
}
to {
transform:translateX(0);
}
}
#icon_1 {animation: move01 3s linear;
}
@keyframes move02 {
from {
transform: translateX(-500px);
}
to {
transform: translateX(0);
}
}
#icon_2 {
animation: move02 3.9s linear;
}
@keyframes move03 {
from {
transform: translateX(-650px);
}
to {
transform: translateX(0);
}
}
#icon_3 {
animation: move03 4.8s linear;
}
@keyframes move04 {
from {
transform: translateX(-800px);
}
to {
transform: translateX(0);
}
}
#icon_4 {
animation: move03 5.7s linear;
}
@keyframes move05 {
from {
transform: translateX(-950px);
}
to {
transform: translateX(0);
}
}
#icon_5 {
animation: move03 6.6s linear;
}
/*网易云音乐图标样式*/
@keyframes waveMusic {
from {
transform: scaleY(0.4);
}
to {
transform: scaleY(1);
}
}
.wave-wrapper {
width: 150px;
height: 30px;
margin:50px auto;
font-size: 16px;
text-align: center;
}
.wave-wrapper .w-rect {
background-color: #333;
height: 100%;
width:6px;
display:inline-block;
animation: waveMusic 1.2s infinite ease-in-out;
}
.wave-wrapper .rect1 {
animation-delay: -1.2s;
}
.wave-wrapper .rect2 {
animation-delay: -1.1s;
}
.wave-wrapper .rect3 {
animation-delay: -1.0s;
}
.wave-wrapper .rect4{
animation-delay: -.9s;
}
.wave-wrapper .rect5 {
animation-delay: -.8s;
}
/*loading图标的实现*/
.circle {
height: 200px;
width:200px;
border-radius: 50%;
position: relative;
margin:0 auto;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.circle .loading {
width:160px;
height:160px;
border-radius: 100%;
border-right:10px solid #F0E8E8;
border-bottom:10px solid #F0E8E8;
border-left:10px solid green;
border-top:10px solid green;
animation: loading 3s infinite linear;
}
.circle .font-loading {
text-align: center;
position: absolute;
top: 23%;
left: 27%;
color: green;
font-size: 23px;
}
</style>
</head>
<body>
<!-- start360卫士球 -->
<div class="boxMove">
<ul>
<li id="icon_1"><b></b></li>
<li id="icon_2"><b></b></li>
<li id="icon_3"><b></b></li>
<li id="icon_4"><b></b></li>
<li id="icon_5"><b></b></li>
</ul>
</div>
<!-- end360卫士球 -->
<!-- start网易云音乐图标 -->
<div class="wave-wrapper">
<div class="w-rect rect1"></div>
<div class="w-rect rect2"></div>
<div class="w-rect rect3"></div>
<div class="w-rect rect4"></div>
<div class="w-rect rect5"></div>
</div>
<!-- end网易云音乐图标 -->
<!--start loading 图标 -->
<div class="circle">
<div class="loading"></div>
<p class="font-loading">loading</p>
</div>
<!--end loading 图标 -->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 酷炫的css3图标loading动画效果代码
- css3动画实现 loading图标 很实用
- CSS3动画实现loading加载图标
- 纯css3 加载loading动画特效
- css3实现loading动画效果
- CSS3实现loading（加载）动画效果
- css3实现loading动画
- CSS3 animation实现点点点loading动画
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- 动感的CSS3 Loading加载文字动画特效
- 纯css3 加载loading动画特效
- 纯CSS3实现的8种Loading动画效果
- Flex ：自定义Loading载入状态（含图标） 及解决Flex中GIF动画图片加载时显示动起来
- CSS3-loading动画（三）
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- CSS3-loading动画
- CSS3-loading动画（四）
- 使用CSS3实现超炫的Loading（加载）动画效果
- css3 - 图标元素动画效果1 - 只执行一次动画