纯CSS3实现发光动画按钮特效.rar_纯CSS3实现发光动画按钮特效资源-CSDN下载

共8个文件

js：2个

css：1个

html：1个

版权申诉

46 浏览量 2022-09-24 09:51:17 上传评论收藏 15KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

纯CSS3实现发光动画按钮特效.rar （8个子文件）

pure-css3-shine-button

css

classy_fabric.png 9KB

style.css 7KB

config.rb 752B

index.haml 32B

index.html 7KB

index.js 53B

prefixfree.min.js 6KB

scss

style.scss 1KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS3实现发光按钮特效DEMO演示</title> <style> body { background: #333333 url(css/classy_fabric.png); margin: 0; } #c { position: absolute; top: 50%; left: 50%; margin-left: -355px; } .s { position: relative; border-radius: 50%; background: #333333; float: left; margin-left: 20px; box-shadow: inset -1px 1px 4px 2px #444, inset 1px -1px 4px 2px #222; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; } .s:nth-child(n):hover { -webkit-animation: bs2 linear 1s 1s infinite, bs2-in 1s; -moz-animation: bs2 linear 1s 1s infinite, bs2-in 1s; animation: bs2 linear 1s 1s infinite, bs2-in 1s; } .s:nth-child(1) { width: 20px; height: 20px; margin-top: -10px; -webkit-animation: bs linear 2s 0.5s infinite; -moz-animation: bs linear 2s 0.5s infinite; animation: bs linear 2s 0.5s infinite; } .s:nth-child(2) { width: 30px; height: 30px; margin-top: -15px; -webkit-animation: bs linear 2s 0.7s infinite; -moz-animation: bs linear 2s 0.7s infinite; animation: bs linear 2s 0.7s infinite; } .s:nth-child(3) { width: 40px; height: 40px; margin-top: -20px; -webkit-animation: bs linear 2s 0.9s infinite; -moz-animation: bs linear 2s 0.9s infinite; animation: bs linear 2s 0.9s infinite; } .s:nth-child(4) { width: 50px; height: 50px; margin-top: -25px; -webkit-animation: bs linear 2s 1.1s infinite; -moz-animation: bs linear 2s 1.1s infinite; animation: bs linear 2s 1.1s infinite; } .s:nth-child(5) { width: 60px; height: 60px; margin-top: -30px; -webkit-animation: bs linear 2s 1.3s infinite; -moz-animation: bs linear 2s 1.3s infinite; animation: bs linear 2s 1.3s infinite; } .s:nth-child(6) { width: 70px; height: 70px; margin-top: -35px; -webkit-animation: bs linear 2s 1.5s infinite; -moz-animation: bs linear 2s 1.5s infinite; animation: bs linear 2s 1.5s infinite; } .s:nth-child(7) { width: 60px; height: 60px; margin-top: -30px; -webkit-animation: bs linear 2s 1.7s infinite; -moz-animation: bs linear 2s 1.7s infinite; animation: bs linear 2s 1.7s infinite; } .s:nth-child(8) { width: 50px; height: 50px; margin-top: -25px; -webkit-animation: bs linear 2s 1.9s infinite; -moz-animation: bs linear 2s 1.9s infinite; animation: bs linear 2s 1.9s infinite; } .s:nth-child(9) { width: 40px; height: 40px; margin-top: -20px; -webkit-animation: bs linear 2s 2.1s infinite; -moz-animation: bs linear 2s 2.1s infinite; animation: bs linear 2s 2.1s infinite; } .s:nth-child(10) { width: 30px; height: 30px; margin-top: -15px; -webkit-animation: bs linear 2s 2.3s infinite; -moz-animation: bs linear 2s 2.3s infinite; animation: bs linear 2s 2.3s infinite; } .s:nth-child(11) { width: 20px; height: 20px; margin-top: -10px; -webkit-animation: bs linear 2s 2.5s infinite; -moz-animation: bs linear 2s 2.5s infinite; animation: bs linear 2s 2.5s infinite; } @-webkit-keyframes bs { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } 50% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #1affff; } 100% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } } @-moz-keyframes bs { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } 50% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #1affff; } 100% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } } @-o-keyframes bs { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } 50% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #1affff; } 100% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } } @keyframes bs { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } 50% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 20px 0 #1affff; } 100% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 0px 0 #b2ff1a; } } @-webkit-keyframes bs2-in { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } @-moz-keyframes bs2-in { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } @-o-keyframes bs2-in { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } @keyframes bs2-in { 0% { box-shadow: inset -1px 1px 3px 2px #444444, inset 1px -1px 3px 2px #222222, 0 0 10px 0 #bbff33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } @-webkit-keyframes bs2 { 0% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } 50% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } @-moz-keyframes bs2 { 0% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } 50% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } @-o-keyframes bs2 { 0% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } 50% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } @keyframes bs2 { 0% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } 50% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 10px 0 #ffbb33; } 100% { box-shadow: inset -1px 1px 5px 2px #444444, inset 1px -1px 5px 2px #222222, 0 0 0px 0 #ff3333; } } </style> <script src="js/prefixfree.min.js"></script> </head> <body> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <div id='c'> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> <div class='s'></div> </div> <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script> <script src="js/index.js"></script> </body> </html>