css实现白光划过效果

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

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的时候，会有一个光影返回去的效果。）

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

css实现白光划过效果相关推荐

纯css实现图片自动闪光划过效果
纯css实现图片自动闪光划过效果 <!DOCTYPE html> <html> <head> <meta name="viewport" ...
使用css实现瀑布流的效果
使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式. 注意要设置列数图片的宽度要一致,否则图片显示会有问题 <!DOCTYPE html> <html la ...
css有些效果不显示,css导入成功但没有效果怎么办
css导入成功但没有效果的解决办法:1.打开网页调试工具,根据显示错误进行修改:2.查看link标签的"rel="stylesheet""是否有错,并修改即可. ...
CSS如何实现内凹角效果 By 大漠
记得@Lea Verou的<CSS Secrets>一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果.我也尝试着借助Vue的能力,把这种效果构建成一个 ...
html 下拉列表美化,JS+CSS实现美化的下拉列表框效果
本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下 ...
仅使用HTML和CSS实现的标签云效果
标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用.通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小. 来源于TagCrowd.com 我们 ...
[css] 使用css实现对话气泡的效果
[css] 使用css实现对话气泡的效果方法:使用圆角矩形作为对话的主体框,左侧或右侧增加附加三角形,三角形使用border样式设置来实现,相对定位和绝对定位结合使三角形附于圆角矩形左侧或右侧: h ...
[css] 使用css实现一个loading的效果
[css] 使用css实现一个loading的效果 <div class="donut"></div> @Keyframes donut-spin {0% ...
[css] 使用css实现气泡框的效果
[css] 使用css实现气泡框的效果 <!DOCTYPE html> <html lang="en"><head> <meta char ...
html中文字描边效果代码,css如何设置文字描边效果？
想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性. 方法1:使用text-shadow属性 text-shadow属性用于向文本添加字体边框 ...

css实现白光划过效果

css实现白光划过效果相关推荐

最新文章

热门文章