漂亮的单页CSS动态聚光灯特效安装使用教程

呆呆 2020-6-30 0 2089

呆呆给大家带来一个款CSS动态聚光灯特效单页源码！用途可以放开脑洞。好了不多说直接上源码!看不懂源码的也可用，直接下载使用就可以！

动态聚光灯

<html>
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>CSS动态聚光灯特效源码</title>
         	
        <style>
        	body {
			    background-color: #222;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    min-height: 100vh;
			}

			/*以下是CSS核心部分*/
			#tianmospotlight{
			    color: #333;
			    font-family: Helvetica;
			    margin: 0;
			    padding: 0;
			    font-size: 4rem;
			    letter-spacing: -0.3rem;
			    position: relative;
			}

			#tianmospotlight::after {
			    content: attr(tianmo-spotlight);
			    color: transparent;
			    position: absolute;
			    top: 0;
			    left: 0;
			    -webkit-clip-path: ellipse(100px 100px at 50% 50%);
			    clip-path: ellipse(100px 100px at 0% 50%);
			    animation: spotlight 3.5s infinite;
			    
			    /*这是灯光效果，你可以改一些更炫酷的图片做灯光*/
			    
			    background-image: url(https://ae01.alicdn.com/kf/Ua7845661624b4dfab9a6e4c16eb2960fx.jpg);
			    background-size: 150%;
			    background-position: center center;
			    -webkit-background-clip: text;
			    background-clip: text;
			}

			@keyframes spotlight {
			    0% {
			        -webkit-clip-path: ellipse(100px 100px at 50% 50%);
			        clip-path: ellipse(100px 100px at 0% 50%);
			    }

			    50% {
			        -webkit-clip-path: ellipse(100px 100px at 100% 50%);
			        clip-path: ellipse(100px 100px at 100% 50%);
			    }

			    100% {
			        -webkit-clip-path: ellipse(100px 100px at 50% 50%);
			        clip-path: ellipse(100px 100px at 0% 50%);
			    }
			}

    	</style>
		<script>
			//如果没有效果请将整个 script 代码放在页面底部
	    	window.onload=function(){
	    		var tianmospotlight = document.getElementById("tianmospotlight");
				var tianmospotlighttext = tianmospotlight.innerText;
				tianmospotlight.setAttribute("tianmo-spotlight", tianmospotlighttext);
	    	}
			
		</script>
    </head>
    <body>
    	<!-- 标签不重要，重要的是这个 ID 、  ID  、 ID -->
        <h1 id="tianmospotlight">呆呆帅不帅自定义文字</h1>
    </body>

好了这次文章就到这里了，有不懂可以留言哦！·呆呆blog-zaibk网络写本会及时回复的！~

提取码：dz5s大小：1.2kb | 来源：百度网盘

已经过安全软件检测无毒，请您放心下载。

#仿站建站#