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