常德网站建设案例展示,网站推广采用的方法,干净的下载网站,网络科技有限公司英文这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的#xff0c;每一个加载动画都构思新颖#xff0c;效果非常的酷。安装可以通过bower来按钮这个loading动画特效#xff1a;b…这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的每一个加载动画都构思新颖效果非常的酷。安装可以通过bower来按钮这个loading动画特效bower install loaders.css使用方法使用这个loading加载动画特效的时候建议将效果中所需要的HTML元素包裹在一个容器中并将包裹容器的显示设置为display:flex下面以“吃豆子”加载动画为例外围div.loader是包裹元素它的显示要设置为display:flex。CSS动画5个空的div中第一个使用div:first-of-type选择器来选择并将其制作为吃豆人(pacman)余下的4个div分别使用nth-child选择器来选择并制作为“豆子”。最后使用CSS3 keyframes动画将“豆子”运动起来-webkit-keyframes pacman-balls {75% {opacity: 0.7; }100% {-webkit-transform: translate(-100px, -6.25px);transform: translate(-100px, -6.25px); } }keyframes pacman-balls {75% {opacity: 0.7; }100% {-webkit-transform: translate(-100px, -6.25px);transform: translate(-100px, -6.25px); } }.pacman {position: relative; }.pacman div:nth-child(2) {-webkit-animation: pacman-balls 1s 0s infinite linear;animation: pacman-balls 1s 0s infinite linear; }.pacman div:nth-child(3) {-webkit-animation: pacman-balls 1s 0.25s infinite linear;animation: pacman-balls 1s 0.25s infinite linear; }.pacman div:nth-child(4) {-webkit-animation: pacman-balls 1s 0.5s infinite linear;animation: pacman-balls 1s 0.5s infinite linear; }.pacman div:nth-child(5) {-webkit-animation: pacman-balls 1s 0.75s infinite linear;animation: pacman-balls 1s 0.75s infinite linear; }.pacman div:first-of-type {width: 0px;height: 0px;border-right: 25px solid transparent;border-top: 25px solid #fff;border-left: 25px solid #fff;border-bottom: 25px solid #fff;border-radius: 25px;}.pacman div:nth-child(2), .pacman div:nth-child(3), .pacman div:nth-child(4), .pacman div:nth-child(5) {background-color: #fff;width: 15px;height: 15px;border-radius: 100%;margin: 2px;width: 10px;height: 10px;position: absolute;-webkit-transform: translate(0, -6.25px);-ms-transform: translate(0, -6.25px);transform: translate(0, -6.25px);top: 25px;left: 100px;}
