使用 css 的 keyframe 實現 loading 動畫
阿新 • • 發佈：2018-03-26
實現 eas light AC reload info col title direct
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation</title>
<style>
body {
background-color: gray;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.preloader {
animation-name: spin;
animation-duration: .5s;
animation-timing-function: linear;
-webkit-animation-delay: 0s;
animation-animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
border: 2px solid transparent;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-radius: 50px;
opacity: 1;
width: 32px;
height: 32px;
cursor: wait;
display: block;
transition: all 400ms ease !important;
-webkit-animation: spin .6s linear infinite;
-o-animation: spin .6s linear infinite;
animation: spin .6s linear infinite;
}
#animation {
}
</style>
</head>
<body>
<div id="animation" class="preloader"></div>
</body>
</html>
使用 css 的 keyframe 實現 loading 動畫