前端案例:170行css制作Apple手机开机动画
2018-02-02 21:33
991 查看
本期Apple手机开机动画是用纯css代码制作,代码量170行,下面我们一起来看下本期的效果源码。
文章分享之前小编推荐一下我的前端学习群:575308719,里面都是学习前端的,如果你想制作酷炫的网页,想学习前端知识,小编欢迎你的加入。小编会在群中不定期分享干货源码,包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。
<!doctype html>
<html lang="en">
<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 class="progress"></div>
</body>
</html>
相关文章推荐
- web前端小案例-css制作电脑平板手机变幻小动画
- web前端案例-css制作花束小动画
- 玩转手机高级篇——最详细的安卓手机开机动画制作教程
- web前端案例-纯css代码制作吃豆豆加载效果
- web前端小案例-纯css制作水滴效果
- web前端小案例-超级css制作七彩圆环旋转幻影
- Android手机开机动画制作
- web前端小案例-纯css制作微笑小表情
- 制作Android手机开机动画的详细过程
- 前端基础小案例:纯css制作旋转披萨
- web前端案例-老司机用css带你制作直升机飞行
- 安卓手机开机动画bootanimation.zip文件制作以及注意事项
- 安卓手机开机动画制作修改教程
- 安卓手机开机动画制作原理教程
- 前端案例--纯css动画transform视距3D旋转
- 前端案例分享(一):CSS+JS实现流星雨动画
- 前端制作动画的几种方式(css3,js)
- 简单制作Android开机动画
- web前端小案例-纯css书架装载机
- 《Xcode基本用法》手机App图标与开机动画图片的设置