HTML+CSS聚光灯效果动画

最新推荐文章于 2022-12-15 14:53:38 发布

YYQX爱跳舞

最新推荐文章于 2022-12-15 14:53:38 发布

阅读量432

点赞数

分类专栏：小demo 文章标签： css html

本文链接：https://blog.csdn.net/weixin_42551920/article/details/105232608

版权

小demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先上效果图：
在这里插入图片描述

HTML

<body>
	<h1>Hello,World!</h1>
</body>

CSS

1、首先让h1垂直居中满屏显示

*{
	margin: 0;
	padding: 0;
	font-size: 16px;
}
body{
	background-color: #222;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
}
h1{
	color: #333;
	margin: 0;
	padding: 0;
	font-size: 10rem;
	position: relative;
}

2、使用定位给h1添加一个遮罩，做出颜色（color一定要透明），将背景做出渐变灯光效果
background-img：添加自己想要的背景图片
background-clip: text;将背景按照文字轮廓填充；
clip-path: ellipse(100px 100px at 0% 50%);画一个直径为100排序的圆
使用@keyframes添加渐变动画，一个周期内从最左渐变到最右再渐变到最左

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

h1::after{
	content: 'Hello,World!';
	color: rgba(0,0,0,0);
	position: absolute;
	left: 0;
	right: 0;
	clip-path: ellipse(100px 100px at 0% 50%);
	animation: lightSpot 8s infinite;
	background-image: url(../img/light.jpg);
	background-size: 100%;
	background-position: center center;
	background-clip: text;
	-webkit-background-clip: text;
}

YYQX爱跳舞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS聚光灯效果动画

首先上效果图：HTML<body> <h1>Hello,World!</h1></body>CSS1、首先让h1垂直居中满屏显示*{ margin: 0; padding: 0; font-size: 16px;}body{ background-color: #222; display: flex; justify...
复制链接

扫一扫