(转)纯css实现图片自动闪光划过效果

最新推荐文章于 2023-04-15 22:15:48 发布
最新推荐文章于 2023-04-15 22:15:48 发布
阅读量541 收藏
点赞数
分类专栏： 前端技术 文章标签： css3 html5

纯css实现图片自动闪光划过效果

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
.logo_flash{ position: relative; margin: 0 auto; transition-duration: .5s; }
.logo_flash{ width: 255px; overflow: hidden; }
.logo_flash:before{
content:"";
position: absolute;
left: -665px;
top: -460px;
width: 200px;
height: 15px;
background-color: rgba(255,255,255,.5);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 1s ease-in 1s infinite;
-o-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
</style>
<body>

<div class="logo_flash">
  <a href="https://www.jinshare.cn/"><img src="https://www.jinshare.cn/wp-content/uploads/2016/03/logo.png" width="255" height="75" alt=""></a>
</div>
</body>
</html>
小威加油
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现的一闪而过的图片闪光效果
01-19
只需要两个HTML元素和一个CSS变换，我就能创造出我自己的闪光效果。让我们来实现它！ 呈现光泽图片 下面就是这张Addy在他博客上使用的图片： 比我需要的要大一些，但你可以把它裁剪一些。 注意：左边的那张是纯白色的，所以看不到，两张图在CSS代码中都要用到。 HTML代码 制作这种闪光效果，需要有两个元素：一个外框架，另一个内部元素用来呈现光泽。我这里使用了A标签和SPAN标签： 复制代码代码如下:<a><span></span></a> HTML代码总是最简单的。 CSS代码 A元素的样式很简单，溢出的部分要隐藏，保证光泽的正常显示
css3光束_css3实现图片划过一束光闪过效果
weixin_39960793的博客
12-30 960
.img {display:block;position:relative;width:800px;height:450px;margin:0auto;}.img:before {content:"";position:absolute;width:200px;height:100%;top:0;left:-150px;overflow:hidden;background: -moz-linear...
黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)
weixin_33744854的博客
11-14 964
CSS代码 .guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .guangshu:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px;...
css3 实现图片闪过一道光效果 亲测可用
朝花夕拾的博客
05-20 2213
html部分： <div class="icon_div"> <img style="display: block; height: 180px; width: 100%;" src="../../images/wydk/sfrz_bg.png"> <img style="display: block;height: 27px;width: 199px;p...
CSS3鼠标经过图片变亮动画效果
wangxinwang996的博客
04-15 708
CSS3鼠标经过图片变亮动画效果
CSS - 文字高光滑动效果（左侧到右侧亮光）
王佳斌
05-08 3395
效果图 如下图所示，可自己修改文字颜色及滑动效果的颜色。 实现代码 <b class="q-loading-2-inner">自定义文字颜色及高光颜色</b> .q-loading-2-inner { font-weight: bold; /* 这里可以随意加样式 */ background: #fff linear-gradient( -135deg, transparent 25%,
纯CSS实现方格图片鼠标划过放大效果下载
11-24
纯CSS实现方格图片鼠标划过放大效果下载
利用纯css实现图片翻转的效果
09-24
给大家分享的是利用纯css实现图片翻转效果，对大家的学习使用CSS具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴。
纯CSS实现图片前后翻页效果
01-23
纯CSS实现图片前后翻页效果
css特效 一道闪光在图片上划过代码
09-25
当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的，下面是具体的实现代码，感兴趣的朋友可以参考下
css实现动态渐变闪烁功能
我的博客
09-04 517
1、页面展示（uni-app项目） <view class="red-dot" style="width:24rpx; height:24rpx;border-radius:12rpx;background:#DB1F1F;"> </view> 2、css样式 .red-dot{ animation:fade 1500ms infinite; -webkit-animation:fade 1500ms infinite; } @keyframes fade {
【跟着项目学CSS】第一期-闪动LOGO
GUIDM的博客
06-28 876
通过项目来学习css （3）设置div盒子 （5）设置字体 因为要闪动所以要创建动画 （7）设置第二个span元素
使用CSS3线性渐变实现图片闪光划过效果
wing 的专栏
03-22 1743
这个 CSS3 的效果怎么实现呢？ HTML 设计成这样： 1 p class="overimg"> 2     a>imgsrc="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg">a> 3
纯CSS发光动效-CSS制作logo发光效果
m0_60965117的博客
11-22 669
纯CSS发光动效-CSS制作logo发光效果
闪光css,CSS实现的一闪而过的图片闪光效果
weixin_42458937的博客
08-04 718
只需要两个html元素和一个css变换，我就能创造出我自己的闪光效果。让我们来实现它！呈现光泽图片下面就是这张addy在他博客上使用的图片：比我需要的要大一些，但你可以把它裁剪一些。注意：左边的那张是纯白色的，所以看不到，两张图在css代码中都要用到。html代码制作这种闪光效果，需要有两个元素：一个外框架，另一个内部元素用来呈现光泽。我这里使用了a标签和span标签：复制代码代码如下:html代...
css渐变实现图片闪光
sam80000的博客
11-27 411
第一种： 运用知识： transition 过渡 构建思路： 1.构建一个图片和一个盒子，盒子设置好背景颜色渐变。 将他放置在图片的左侧，通过移动盒子，配合过度，实现 照片闪光 第二种： 运用知识：animation 动画 构建思路： 1.构建一个图片和一个盒子，盒子设置好背景颜色渐变。 2.将盒子放置在图片的左侧，设置背景图位置的变化， 配合动画效果实现照片闪光 <!DOCTYPE html> <html> <head> <meta charset="utf
闪光css,css实现图片闪光效果
weixin_42356378的博客
08-04 3255
1.这个效果是看到京东商城上的一个下效果，原本的思路是用js控制一个图片在某张需要闪光的图片上重复出现，但是网上找了一些资料，竟然是用css写的，真是太帅了！！！2.原理：在需要闪光的图片前添加before属性；内容为空；宽为200px,高为100%，left：-150px,overflow:hiddden;background属性设置为渐变；颜色看自己需要；transform-skewX(-2...
css3实现图片划过一束光闪过效果
小丫007的博客
08-30 8278
.img { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .img:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden; b
CSS3------ 按钮闪光划过效果
最新发布
08-27
你可以使用CSS3来实现按钮闪光划过效果。下面是一个简单的例子： HTML代码： ``` <button class="glow-button">按钮</button> ``` CSS代码： ```css .glow-button { position: relative; display: inline-block; padding: 10px 20px; font-size: 16px; border: none; background-color: #333; color: #fff; overflow: hidden; } .glow-button::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-color: rgba(255, 255, 255, 0.1); opacity: 0; transform-origin: center center; transform: scale(0); transition: transform 0.3s, opacity 0.3s; } .glow-button:hover::before { opacity: 1; transform: scale(1); } ``` 在这个例子中，我们使用了`::before`伪元素来创建一个覆盖整个按钮的方块。通过将`opacity`设置为0和`transform`设置为`scale(0)`，我们将其隐藏起来。当鼠标悬停在按钮上时，通过将`opacity`设置为1和`transform`设置为`scale(1)`，我们使方块逐渐显示出来，并放大至和按钮一样大小。 你可以根据需要修改按钮的样式和闪光划过效果的细节。希望对你有帮助！如果你还有其他问题，请随时向我提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值