CSS3动画——五个圆球的动画及音乐播放器和Loading图标

最新推荐文章于 2024-06-12 10:15:41 发布

十里桃花131

最新推荐文章于 2024-06-12 10:15:41 发布

阅读量1.8k

点赞数

文章标签： CSS3动画 DIV+CSS Position

本文链接：https://blog.csdn.net/qq_39875553/article/details/77370633

版权

这篇博客主要展示了如何使用CSS3创建动画效果，包括五个圆球的平移动画，以及网易云音乐波纹效果的实现，同时还涵盖了自定义Loading图标的制作。通过关键帧动画`@keyframes`，调整元素的transform属性，实现了各种动态视觉效果。

摘要由CSDN通过智能技术生成

<!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 {