div+css实现漏斗翻转loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现漏斗翻转loading加载动画效果代码
代码标签: div css 漏斗 翻转 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
body{
margin: 100px;
}
.hourglassBackground {
position: relative;
background-color: rgb(71, 60, 60);
height: 130px;
width: 130px;
border-radius: 50%;
margin: 30px auto;
}
.hourglassContainer {
position: absolute;
top: 30px;
left: 40px;
width: 50px;
height: 70px;
-webkit-animation: hourglassRotate 2s ease-in 0s infinite;
animation: hourglassRotate 2s ease-in 0s infinite;
transform-style: preserve-3d;
perspective: 1000px;
}
.hourglassContainer div,
.hourglassContainer div:before,
.hourglassContainer div:after {
transform-style: preserve-3d;
}
@-webkit-keyframes hourglassRotate {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(180deg);
}
}
@keyframes hourglassRotate {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(180deg);
}
}
.hourglassCapTop {
top: 0;
}
.hourglassCapTop:before {
top: -25px;
}
.hourglassCapTop:after {
top: -20px;
}
.hourglassCapBottom {
bottom: 0;
}
.hourglassCapBottom:before {
bottom: -25px;
}
.hourglassCapBottom:after {
bottom: -20px;
}
.hourglassGlassTop {
transform: rotateX(90deg);
position: absolute;
top: -16px;
left: 3px;
border-radius: 50%;
width: 44px;
height: 44px;
background-color: #999999;
}
.hourglassGlass {
perspective: 100px;
position: absolute;
top: 32px;
left: 20px;
width: 10px;
height: 6px;
background-color: #999999;
opacity: 0.5;
}
.hourglassGlass:before,
.hourglassGlass:after {
content: '';
display: block;
position: absolute;
background-color: #999999;
left: -17px;
width: 44px;
height: 28px;
}
.hourglassGlass:before {
top: -27px;
border-radius: 0 0 25px 25px;
}
.hourglassGlass:after {
bottom: -27px;
border-radius: 25px 25px 0 0;
}
.hourglassCurves:before,
.hourglassCurves:after {
content: '';
display: block;
position: absolute;
top: 32px;
width: 6px;
height: 6px;
border-radius: 50%;
backg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0