前端css3 加载loading 动画效果
摘要：flex前端开发环境搭建 如何建立前端开发的环境 android开发前端开发环境搭建 代码片段 1 <!DOCTYPE html> <html lang=”en” id=”html”> <head> <meta charset=&……
flex前端开发环境搭建 如何建立前端开发的环境 android开发前端开发环境搭建
代码片段 1
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<title>懒人原生css3 加载loading 动画效果</title>
<style>
body {
width: 1400px;
height: 900px;
background-color: #000;
}
a {
display: block;
width: 70px;
height: 70px;
background-color: #007750;
position: fixed;
left: 50%;
top: 50%;
border-radius: 70px;
}
a .line1 {
width: 80px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin: -42px 0 0 -42px;
border: 2px solid #fff;
border-radius: 80px 80px 80px 80px;
border-right-color: transparent;
border-top-color: transparent;
}
@-webkit-keyframes line1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
50% {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
75% {
-webkit-transform: rotate(1300deg);
transform: rotate(1300deg);
}
100% {
-webkit-transform: rotate(2500deg);
transform: rotate(2500deg);
}
}
@keyframes line1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
50% {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
75% {
-webkit-transform: rotate(1300deg);
transform: rotate(1300deg);
}
100% {
-webkit-transform: rotate(2500deg);
transform: rotate(2500deg);
}
}
a .line1 {
-webkit-animation: line1 10s ease-in-out 1s infinite alternate;
animation: line1 10s ease-in-out 1s infinite alternate;
}
</style>
</head>
<body id=”body”>
<a href=”#”>
<div class=”line1″></div>
</a>
</body>
</html>
web前端集成开发环境 前端环境开发搭建 前端开发环境分析
» 本文来自：前端开发者 » 《前端css3 加载loading 动画效果》
» 本文链接地址：https://www.rokub.com/5960.html
» 您也可以订阅本站：https://www.rokub.com
近期评论