实现loading、360、网易云播放的css动画
来源:互联网 发布:吴昕的淘宝店叫什么 编辑:程序博客网 时间:2024/05/24 02:19
<div class="load">
<div class="loading">
</div>
<p>loading</p>
</div>
loading css样式
* {
padding: 0;
margin: 0;
}
.loading {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #34F634;
border-right-color: #262525;
border-top-color: #262525;
animation: ha 3s linear infinite;
}
.load p {
margin-top: -128px;
margin-left: 62px;
font-size: 28px;
}
@keyframes ha {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
======网易云=====
<!-- 网易云 html-->
<div class="wangyi">
<div class="wangyi_1"></div>
<div class="wangyi_2"></div>
<div class="wangyi_3"></div>
<div class="wangyi_4"></div>
<div class="wangyi_5"></div>
</div>
======网易云 css 样式=====
/* 网易云 */
.wangyi div {
width: 10px;
height: 50px;
background-color: #1B1B1B;
display: inline-block;
margin-top: 180px;
}
.wangyi_1 {
animation: wangyi 1s linear 0.2s infinite;
}
.wangyi_2 {
animation: wangyi 1s linear 0.4s infinite;
}
.wangyi_3 {
animation: wangyi 1s linear 0.6s infinite;
}
.wangyi_4 {
animation: wangyi 1s linear 0.8s infinite;
}
.wangyi_5 {
animation: wangyi 1s linear 1s infinite;
}
@keyframes wangyi {
0% {
transform: scale(0.2);
}
100% {
transform: scale(0.9);
}
}
=====360 html====
<!-- 360 -->
<div class="icon">
<ul>
<li class="icon1"></li>
<li class="icon2"></li>
<li class="icon3"></li>
<li class="icon4"></li>
<li class="icon5"></li>
</ul>
</div>
=====360 css 样式====
/* 360 */
.icon {
position: relative;
}
.icon li {
width: 175px;
height: 175px;
display: inline-block;
list-style: none;
position: absolute;
left: 20px;
}
.icon1 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: 2px;
animation: icon1 2s linear infinite;
}
.icon2 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -173px;
animation: icon2 2s linear infinite;
}
.icon3 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -347px;
animation: icon3 2s linear infinite;
}
.icon4 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -521px;
animation: icon4 2s linear infinite;
}
.icon5 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -695px;
animation: icon5 2s linear infinite;
}
@keyframes icon1 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(200px);
}
}
@keyframes icon2 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(400px);
}
}
@keyframes icon3 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(600px);
}
}
@keyframes icon4 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(800px);
}
}
@keyframes icon5 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
- 实现loading、360、网易云播放的css动画
- 仿网易云播放界面圆盘动画的实现
- 帧动画播放 实现loading
- CSS实现Loading加载动画
- css实现loading动画效果
- 用CSS实现LOADING省略号动画
- CSS实现loading小动画(附源码)
- 纯 CSS 方式实现 CSS 动画的暂停与播放
- CSS:一个简单的loading动画
- 用js+css实现帧动画播放的功能
- 网易新闻loading图显示是什么动画
- CSS3 实现 Loading 动画
- css3实现loading动画
- css3动画实现loading
- CSS loading动画插件收集
- CSS实现的loading页面等待效果
- 纯CSS实现的Loading效果
- CSS实现的loading页面等待效果
- 支付宝支付和微信支付异步回调一直调用
- maven、*pom详解
- myeclipse或eclipse删除项目时,无法删除解决方法java platform se binary
- apache日志文件详解和实用分析命令
- 阿里巴巴不断增加其云数据中心覆盖率
- 实现loading、360、网易云播放的css动画
- linux下使用阿里云OSS
- 设计模式系列之「装饰模式」
- HTML5小结
- LocalBroadCast与BroadCast
- How to revert the code/files that have been merged to the remote Repo
- 继承(单继承、多继承、菱形继承、虚继承)
- JS检测移动端横竖屏
- Android studio中添加系统jar包提高优先级