<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>CSS3 實現燈光照射顯示文字動畫</title><meta name="keywords" content=" CSS3 實現燈光照射顯示文字動畫" /><meta name="description" content=" CSS3 實現燈光照射顯示文字動畫" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <div> <div> <p>5iweb.com.cn</p> </div> <div class="noor one"></div> <div class="noor two"></div></div> </body></html>Css部分：body {background: #000;} .content {position: relative;width: 750px;margin: 0 auto;} p {margin: 0;padding: 0;font-size: 90px; } .klam { position: absolute; top: 40px; left: 100px; color: #000; z-index: 1; animation: shadow 5.0s ease-in-out infinite;} .noor { position: absolute; top: 30px; left: 50px; width: 140px; height: 140px; opacity: 0.8; border-radius: 100px; z-index: 0; background: -webkit-radial-gradient(center, ellipse cover, #fff 0%, rgba(255, 255, 255, 0.2) 100%); box-shadow: 0px 0px 50px #fff; animation: noor 5.0s ease-in-out infinite;} .two {z-index: 2;opacity: 0.8;} @-webkit-keyframes noor { 0% {left: 45px;} 50% {left: 335px;} 75%{left:500px;} 100% {left: 45px;}} @-webkit-keyframes shadow { 0% {text-shadow: -9px 1px 4px #000;} 50% {text-shadow: 9px 1px 4px #000; } 100% {text-shadow: -9px 1px 4px #000;} }
燈光照射顯示文字動畫的源碼就是這些了，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS3自適應全屏焦點圖切換的特效怎麼做
CSS3常用的幾種選取器
CSS3有哪些新增的背景屬性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
