css实现白光划过效果

最新推荐文章于 2024-08-30 05:12:30 发布

ming_situ

最新推荐文章于 2024-08-30 05:12:30 发布

阅读量2k

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/ming_situ/article/details/124081381

版权

本文介绍了如何利用HTML和CSS创建一个光影效果，并通过过度和动画实现交互变化。通过设置元素的大小、位置、渐变背景以及转换属性，创建了一个从左上角移动到右下角的光影。当鼠标悬停在box上时，应用动画效果；移开鼠标，光影返回原位。此教程适合前端开发者学习和实践。

摘要由CSDN通过智能技术生成

该效果可以通过“过度”，“动画”实现。本文会介绍这两种不同的实现方式

html部分

		<div class="box">
			<div class="light">
				
			</div>
		</div>

创建一个box,包裹一个light

css部分

			*{
				padding: 0;
				margin: 0;
			}
			html{
				display: flex;
				justify-content: center;
			}
			.box{
				position: relative;
				margin-top: 30px;
				width: 300px;
				height: 200px;
				background-color: green;
				overflow: hidden;
			}
			.light{
				content: '';
				display: block;
				position: absolute;
				top: -20%;
				left: -100%;
				width: 350px;
				height: 100px;
				transform: rotate(-45deg);
				background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
				/* 过度实现部分 */
				/* transition: 0.8s; */
			}
			.box:hover .light{
				/* 过度实现部分 */
				/* transform: translate(200%,200%) rotate(-45deg); */
				animation: cross 0.5s;
			}
			@keyframes cross{
				from{

				}
				to{
					
					top: 80%;
					left: 100%;
					transform: rotate(-45deg);v
				}
			}

想要通过过度效果实现的同学，将动画效果注释掉，释放过度部分的注释就可以了。

实现原理

将ligth盒子设置为宽350px,高100px的长方形，通过添加渐变实现光影效果，再将其逆时针旋转45度定位于box盒子的左上方，然后通过“动画”或者“过度”效果使其向右下方移动。（动画效果在鼠标离开box的时候，会有一个光影返回去的效果。）

纯属分享个人学习经验，如果有更好的实现方法或者代码有错误的地方，欢迎各位大佬指正。