网站首页 > 技术教程 正文
话不多说，直接上源码！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Apple手机开机动画</title>
<style>
body {
background: #111 url("http://www.clipartbest.com/cliparts/Rcd/g5d/Rcdg5dXXi.png");
background-size: 25vmin;
background-repeat: no-repeat;
background-position: center 40%;
height: 100vh;
margin: 0;
}
.progress {
width: 400px;
max-width: 85vw;
height: 4px;
position: absolute;
bottom: 20vh;
left: 50%;
border-radius: 4px;
background: rgba(255,255,255,0.5);
transform: translate(-50%, -50%);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 4px;
background: #fff;
animation: load 15s linear;
}
@-moz-keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
@-webkit-keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
@-o-keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
@keyframes load {
0% {
width: 0;
}
10% {
width: 5%;
}
20% {
width: 15%;
}
30% {
width: 25%;
}
40% {
width: 30%;
}
50% {
width: 44%;
}
60% {
width: 50%;
}
70% {
width: 72%;
}
80% {
width: 84%;
}
90% {
width: 92%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
猜你喜欢
- 2024-09-27 OPPO Watch X理想汽车定制手表发布:专属表带/表盘/开关机动画
- 2024-09-27 开机不耽误你送惊喜 乐视电视的开机视频DIY功能来了!
- 2024-09-27 一加6T迈凯伦定制版壁纸、开机动画、铃声分享
- 2024-09-27 新装的台式机新装WIN7系统启动时卡在开机动画如何解决?
- 2024-09-27 Win7开机动画下载:星球大战 windows星球大战
- 2024-09-27 经典系统启动开机动画系列Live Photo一键免费下载!
- 2024-09-27 Win7系统电脑开机动画消失的恢复方法
- 2024-09-27 Win7开机动画下载:火焰马奔跑 win7开机动画修改工具
- 2024-09-27 XSX|S将替换更短的开机动画，开机时间缩短5秒
- 2024-09-27 Microsoft office开机动画求助 office2019启动界面
欢迎 你 发表评论:
- 05-1613步震撼淘宝大促闪光裂纹破墙立体字PS制作教程
- 05-16AI教程 | 绘制扁平的萌萌哒图标
- 05-160基础学平面设计所需了解的基础常识汇总
- 05-16自学平面设计需要多长时间?十六年职业设计总监告诉你
- 05-16平面设计都要学习哪些内容?
- 05-16李涛PS教程 高手之路PS教程 合成教程 —制作一个小星球
- 05-16Illustrator实例教程:制作炫酷的漩涡效果
- 05-16Illustrator实例教程:利用混合工具制作一朵炫酷的花
- 最近发表
- 标签列表
-
- sd分区 (65)
- raid5数据恢复 (81)
- 地址转换 (73)
- 手机存储卡根目录 (55)
- tcp端口 (74)
- project server (59)
- 双击ctrl (55)
- 鼠标 单击变双击 (67)
- debugview (59)
- 字符动画 (65)
- flushdns (57)
- ps复制快捷键 (57)
- 清除系统垃圾代码 (58)
- web服务器的架设 (67)
- 16进制转换 (69)
- xclient (55)
- ps源文件 (67)
- filezilla server (59)
- 句柄无效 (56)
- word页眉页脚设置 (59)
- ansys实例 (56)
- 6 1 3固件 (59)
- sqlserver2000挂起 (59)
- vm虚拟主机 (55)
- config (61)
本文暂时没有评论，来添加一个吧(●'◡'●)