一个简单的CSS加载动画

来源：互联网发布：无间道3解读知乎编辑：程序博客网时间：2024/05/16 07:39

最新学习css，之前看过诺基亚手机的一个加载动画，所以想做一个类似的动画，动画效果如下：(csdn文章无法嵌入css效果，动画效果在这里)

源码：

html:

<!DOCTYPE html><html><head><title>animate</title></head><body><div class="animate-continer back"><div class="animate"><div></div><div></div><div></div><div></div></div></div><style type="text/css"></style></body></html>

CSS:

.animate-continer {background: rgb(50, 50, 50);opacity: 0.4;overflow: hidden;}.animate {position: relative;}.animate>div:first-of-type,.animate>div:nth-child(2),.animate>div:nth-child(3),.animate>div:last-of-type {position: absolute;width: 5px;height: 5px;border-radius: 100%;top:100px;margin: 2px;}.animate>div:first-of-type {left:-15px;background: rgb(255, 255, 255);animation: loader 3s  200ms infinite;    -webkit-animation: loader 3s  200ms infinite; /* Safari 与 Chrome */}.animate>div:nth-child(2) {left:-30px;background: rgb(255, 255, 255);animation: loader 3s  400ms infinite;    -webkit-animation: loader 3s  400ms infinite; /* Safari 与 Chrome */}.animate>div:nth-child(3) {left:-45px;background: rgb(255, 255, 255);animation: loader 3s  600ms infinite;    -webkit-animation: loader 3s  600ms infinite; /* Safari 与 Chrome */}.animate>div:last-of-type {left:-60px;background: rgb(255, 255, 255);animation: loader 3s  800ms infinite;    -webkit-animation: loader 3s  800ms infinite; /* Safari 与 Chrome */}.back {margin:auto;width: 300px;height: 200px;border-radius: 10px;}@keyframes loader {0% { width:5px; height:5px; transform: translate(0, 0);}45% { width:10px; height:10px; transform: translate(187px, 0); }55% { width:10px; height:10px; transform: translate(187px, 0); }100% { width:5px; height:5px; transform: translate(375px, 0); }}@-webkit-keyframes loader{    0% { width:5px; height:5px; transform: translate(0, 0);}45% { width:10px; height:10px; transform: translate(187px, 0); }55% { width:10px; height:10px; transform: translate(187px, 0); }100% { width:5px; height:5px; transform: translate(375px, 0); }}

将css部分的代码放入到html中的<style>标签中就可以实现该效果。

0 0