前端脱坑日记之加载特效制作1
Posted zlsh-web
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端脱坑日记之加载特效制作1相关的知识,希望对你有一定的参考价值。
相信大家在生活中已经对加载界面已经非常熟悉,一个优美的加载界面绝对让你好感度大增,不说废话了让我们来看看代码吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap-grid.css"> <link rel="stylesheet" href="css/bootstrap-reboot.css"> <link rel="stylesheet" href="css/bootstrap.css"> <style type="text/css"> /* 圆圈加载*/ #circle { background-color: rgba(0, 0, 0, 0); border: 5px solid rgba(247, 14, 42, 1); opacity: .9; /*设置透明度*/ border-right: 5px solid rgba(0, 0, 0, 0); border-left: 5px solid rgba(0, 0, 0, 0); border-radius: 50px; box-shadow: 0 0 35px #808080; width: 80px; height: 80px; margin: 0 auto; position: fixed; /*让div固定在某一位置*/ right: 103px; bottom: 100px; -moz-animation: spinPulse 56s infinite linear;/*-moz代表火狐内核识别码*/ -webkit-animation: spinPulse 56s infinite linear;/*-webkit代表谷歌内核识别码*/ -o-animation: spinPulse 56s infinite linear;/*-o代表欧朋【opera】内核识别码*/ -ms-animation: spinPulse 56s infinite linear;/*-ms代表ie内核识别码*/ } #circle1 { background-color: rgba(0, 0, 0, 0); border: 6px solid rgba(31, 62, 230, 0.9); opacity: .9; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); border-radius: 50px; box-shadow: 0 0 15px #202020; width: 60px; height: 60px; margin: 0 auto; position: fixed; right: 111px; bottom: 109px; -moz-animation: spinoffPulse 166s infinite linear;/*infinite无限次数*/ -webkit-animation: spinoffPulse 166s infinite linear; -o-animation: spinoffPulse 166s infinite linear; -ms-animation: spinoffPulse 166s infinite linear; } #circletext { width: 66px; height: 30px; line-height: 15px; margin: 0 auto; position: fixed; right: 105px; bottom: 124px; } @-moz-keyframes spinPulse { 0% { -moz-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #505050; }/*百分比是时间,160deg是旋转的角度位置*/ 50% { -moz-transform: rotate(145deg); opacity: 1; } 100% { -moz-transform: rotate(-320deg); opacity: 0; } } @-moz-keyframes spinoffPulse { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spinPulse { 0% { -webkit-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #505050; } 50% { -webkit-transform: rotate(145deg); opacity: 1; } 100% { -webkit-transform: rotate(-320deg); opacity: 0; } } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-o-keyframes spinPulse { 0% { -o-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #505050; } 50% { -o-transform: rotate(145deg); opacity: 1; } 100% { -o-transform: rotate(-320deg); opacity: 0; } } @-o-keyframes spinoffPulse { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); } } @-ms-keyframes spinPulse { 0% { -ms-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #505050; } 50% { -ms-transform: rotate(145deg); opacity: 1; } 100% { -ms-transform: rotate(-320deg); opacity: 0; } } @-ms-keyframes spinoffPulse { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); } } </style> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.bundle.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div id="circle"></div> <div id="circletext"> <strong style="color: blue"><a href="#"></a></strong> </div> <a href="#"> <div id="circle1"></div> </a> </body> </html>
以上是关于前端脱坑日记之加载特效制作1的主要内容,如果未能解决你的问题,请参考以下文章