鼠标经过图片有闪光的JS特效

最新推荐文章于 2021-12-24 18:50:06 发布
最新推荐文章于 2021-12-24 18:50:06 发布
阅读量338 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3821/article/details/82651573
版权

 

鼠标经过图片有闪光的JS特效

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="pho.css">
</head>
<body>
<p class="overimg">
    <a><img src="2014_02_15_01.jpg"></a>
    <i class="light"></i>
</p>
</body>
</html>

 CSS

.overimg{
    position: relative;
    display: block;
        /* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
    cursor:pointer;
    position: absolute;
    left: -180px;
    top: 0;
    width: 180px;
    height: 90px;
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
}
.overimg:hover .light{
    left:180px;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}

 

iteye_3821
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript鼠标滑过动画效果
u012071199的博客
09-23 777
*{margin:0;padding:0;} #box{width:200px;height:300px; background: #f00; position: relative;left:-200px;top:0;cursor:pointer;} #box input{ position: absolute;width:30px; cursor:pointer;outline:none;h
js图片闪烁效果
热门推荐
hwq1987的专栏
04-11 1万+
<br /><HTML><br /><HEAD><br /><TITLE>Blink image</TITLE><br /></HEAD><br /><BODY ONLOAD="soccerOnload()" topmargin="0"><br /><DIV ID="soccer" STYLE="position:absolute; left:150; top:0"><br /><a href="http://图片的链接.com" target="_blank"><br /><IMG SRC="要显示的图片
JS鼠标经过图片文字变化特效.zip
07-04
JS鼠标经过图片文字变化特效
js 特效 html 特效 鼠标经过文字变色
08-25
js 特效 html 特效 鼠标经过文字变色 js 特效 html 特效 鼠标经过文字变色
JavaScript鼠标经过图片晃动效果
Mark的专栏
01-16 980
<!--.shakeimage{position:relative}--><!--var rector=3var stopit=0var a=1function init(which){stopit=0shake=whichshake.style.left=0shake.style.top=0}function rattl
js鼠标特效
ailo555的专栏
09-20 1527
1、效果，如图： 源码： &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt;     &lt;title&gt;star&lt;/title&gt;     &lt;script type="text/javascript&q
jquery鼠标经过闪光出现标题特效
08-26
本文将详细讲解如何使用jQuery实现一种独特的鼠标经过时标题闪光出现的特效，这种特效常用于图片列表或图文列表，可以使得内容展示更加生动有趣。 首先，我们来看这个特效的基本原理。当鼠标移动到某个元素上时，...
jquery鼠标滑过闪光滑出标题特效代码
03-20
标题中的“jquery鼠标滑过闪光滑出标题特效代码”指的是使用jQuery库实现的一种交互效果，当用户将鼠标指针滑过某个元素时，该元素会以平滑的动画方式显示或隐藏标题。这种效果通常用于增强用户体验，使网站或应用...
jquery鼠标滑过闪光滑出标题.zip
07-04
在“jquery鼠标滑过闪光滑出标题”这个项目中，我们看到的是一个基于jQuery实现的图片相册特效。下面将详细阐述这个特效背后涉及的jQuery知识点和技术。 首先，这个特效的核心在于利用jQuery的事件处理机制。当用户...
js+css3文字闪光滑过动画特效特效代码
03-20
在本文中，我们将深入探讨如何使用JavaScript（js）和CSS3来实现一款创新的文字闪光滑过动画特效，这种特效常用于模拟iPhone触屏滑动解锁的高光动态效果。通过结合这两种强大的技术，我们可以创建出引人注目的交互式...
CSS实现的一闪而过的图片闪光效果
09-25
种当鼠标悬停时光泽一闪而过。十分的简单，但非常的漂亮。在重新设计网站版面时，我很想在我的logo上使用这种效果。
经典收藏，JS设置图片发光效果
08-07
经典收藏，JS设置图片发光效果，非常经典的图片发光效果，找了好久才找到的，特来些分享下，
canvas闪光特效.rar
10-12
在网页设计中，Canvas元素是HTML5引入的一个强大的特性，它允许...如果你想要进一步了解或实现这种特效，可以逐一打开这些文件，查看源代码并尝试运行，结合JavaScript和Canvas的知识点，逐步理解和复现这个闪光特效。
原生js判断鼠标移入方向，图片特效
weixin_43139949的博客
11-30 449
原生js判断鼠标移入方向，图片特效先来个最终效果需求，判断出鼠标从元素的哪个方向移入 搞vue搞uniapp搞得脑子都发木了，有些时候呢一些原生的，底层的东西都要忘脖子后去了，今天呢就来个原生js的小demo。 先来个最终效果 需求，判断出鼠标从元素的哪个方向移入 在判断这个移入方向之前呢，我们要搞清楚一些事情，请看下图 ...
不错的CSS3图文列表 还有鼠标悬停图片抖动
weixin_30753873的博客
07-08 204
一个看上去挺不去的CSS3图文列表，是在新浪微博模板商店网页里整理的，每个图片框都带有阴影效果，整齐排列在一起，看上去很美观，很专业。在鼠标悬停放在图片上的时候，图片会抖动几下，然后静止了，这个效果是基于CSS3实现的，很不错的图片列表效果，希望对你的CSS布局设计有帮助。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...
如何为图片添加闪烁效果
三禾木
05-07 2883
private void setFlickerAnimation(ImageView iv_chat_head) { final Animation animation = new AlphaAnimation(1, 0); animation.setDuration(500); //设置动画所用的时间 animation.setIn
JS实现的图片特效（Lightbox v2.0）
weixin_33701617的博客
04-17 79
如何使用: 步骤 1 - 安装 Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header. &lt;script type="text/javascript" src="js/prototype.js"&gt;&lt;/script&gt; &lt;s...
Three.js/Shader墙体流光特效
漫漫漫漫的博客
12-24 5654
Three.js墙体流光效果 基于ShaderMaterial，通过两张贴图实现流动效果，配置不同的贴图可以有不同效果 生成方法 /** * 创建流体墙体材质 * option => * params bgUrl flowUrl * **/ const createFlowWallMat = ({ bgUrl, flowUrl }) => { // 顶点着色器 const vertex
鼠标经过图片变亮离开变暗的js特效代码
07-14 1760
鼠标经过图片变亮离开变暗的js特效代码，分别可css实现和jquery实现，兼容FF（鼠标特效代码,js图片变亮，js图片变暗,js特效代码） 更多的网页特效登录ab蓝学网下载 [注意]如转载,请注明本文链接：http://www.ablanxue.com/prone_995_1.html 在线预览 下载地址
CSS鼠标经过文字渐变闪光
最新发布
06-07
要实现鼠标经过文字渐变闪光的效果，可以使用 CSS 的伪元素和动画。下面是一个例子： HTML 代码： ```html <a href="#">Hello World</a> ``` CSS 代码： ```css a { position: relative; display: inline-block; color: #000; } a::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #f00, #00f); background-clip: text; -webkit-background-clip: text; /* Safari 和 Chrome */ color: transparent; z-index: -1; animation: flash 1s ease-in-out; } @keyframes flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } ``` 解释一下这个代码： 1. 首先，我们将超链接设置为 `display: inline-block;`，这样才能让伪元素覆盖在文字上。 2. 然后，我们使用伪元素 `::before`，并设置其 `position` 为 `absolute`，并将 `z-index` 设为 `-1`，这样就可以将渐变效果覆盖在文字下方了。 3. 接着，我们设置伪元素的背景渐变和背景裁剪属性，让渐变应用到文字上。 4. 由于文字的颜色默认是不透明的，所以我们将文字颜色设置为透明。 5. 然后，我们使用动画 `flash`，让伪元素的透明度在 1 秒内从 0 到 1 再到 0，这样就可以产生闪光效果了。 注意，这个效果在一些浏览器上可能不支持，如 IE。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值