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

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

呆呆 2020-6-30 0 1467

  呆呆给大家带来一个款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 | 来源:百度网盘
已经过安全软件检测无毒,请您放心下载。

#仿站建站#

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
赞赏作者
打赏作者 微信打赏
作者: 呆呆 本文最后编辑于2020-6-30 11:28:54
呆呆

作者的微博

发表评论