快捷搜索:  汽车  科技

苹果怎么修改手机开机动画(超简单制作iPhone开机动画)

苹果怎么修改手机开机动画(超简单制作iPhone开机动画)<meta name="Description" content=""> <meta name="Keywords" content=""> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="">

话不多说,直接上源码!

苹果怎么修改手机开机动画(超简单制作iPhone开机动画)(1)

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

猜您喜欢: