热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

前端的鼠标滑过图片闪光CSS3效果怎么做?

两三年前鸡哥还是个学生的时候做了本站的前端页面,其实现在这个站有很多前身,有机会发个帖子给大家看看鸡哥以前的年少无知不懂事的杀马特作品好了,今天聊聊怎么做鼠标滑过图片的时候有反光闪光的效果,这个

两三年前鸡哥还是个学生的时候做了本站的前端页面,其实现在这个站有很多前身,有机会发个帖子给大家看看鸡哥以前的年少无知不懂事的杀马特作品...
好了,今天聊聊怎么做鼠标滑过图片的时候有反光闪光的效果,这个效果还是在逛京东的时候无意间发现的,大家看看下边的成品演示:不然说了半天还不知道要做啥效果可尴尬了,哦对了,这种情况叫做什么?  “尬聊”

>a>div>

上边这是html里边的代码,没多少,还是比较简单的 ,重点是后边的css代码 要仔细看和分析 参了很多css3的知识点

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before
{transition: all 0.5s;left:850px;} /css3过度样式 before离左边850像素
div a:before
{content: "";
position
: absolute;
width
: 50px;
height
: 600px;
top
: 0;
left
: -130px;
background
: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
background
: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
background
: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
background
: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
-webkit-transform
: skewX(-25deg);
-moz-transform
: skewX(-25deg);} /这里是给反光加样式的css3代码,就不一一解释了

上边就是css样式代码,鸡哥只是简单的写了个demo给大家演示一下,其实后边的反光样式代码也是鸡哥复制的,好久没写了忘完了,只能复制了,大家哪里不明白可以百度,把不明白的代码百度一下就明白了。

具体的思想理论就是给a标签上方加了一个透明层,通过定位压在a标签上,这个透明层就是上边代码中的before,当然也可以是其他随便一个标签,每个人习惯不一样,然后通过css3的鼠标经过过度样式让这个透明层从做向右滑动就实现了这种反光的效果。

好了具体方法已经给大家分享出来了,如果要用到自己的项目中还要有点html+css的基础的,不然寸步难行。

下边我把刚刚写的demo打包了一下,如果不太明白的小伙伴可以下载来仔细研究。

原文链接:前端的鼠标滑过图片闪光CSS3效果怎么做?


推荐阅读
  • 【前端开发系列】—— CSS3属性选择器总结
    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记。 ... [详细]
  • CSS3中如何使用background-size定义背景图片大小
    CSS3中如何使用background-size定义背景图片大小?针对这个问题,今天小编总结这篇有关background-size属性的文章,可供感兴趣的小伙伴们参考借鉴 ... [详细]
  • 一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • background:-webkit-gradient(linear,10%10%,100%100%, ... [详细]
  • 前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 本文介绍如何使用Python进行文本处理,包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图,展示文本数据的可视化分析方法。 ... [详细]
  • css3中rem 与px算法
    看CCS文件的时候发现引入了一个新大小单位:rem,CSS文件里有介绍,看半天拿着手机计算了几下愣是没搞明白,怕是新东西搜出来的都是英文看着累就没找google,而是百度了一下,百度 ... [详细]
  • Isthereanywaytostylethislistusingpurecsssoallelementsabovemycursorwillbehighlight ... [详细]
  • 一款清新的jQuery日历插件带日期的Tooltip提示543人浏览发表回复这是一款非常简单清新的jQuery日历插件,它并没有特别的日期或者时间选择功能,仅仅是展示一个简单的日历控件。这款jQu ... [详细]
  • 这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ... [详细]
  • CSS:body{font-size:62.5%;}为什么???在网页设计中我们经常看见body{font-size:62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与p ... [详细]
  • 怎么使用css3画三角形
    小编给大家分享一下怎么使用css3画三角形,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!首先看一下css3画三角形的原理我们先来看 ... [详细]
author-avatar
严重孤独症患者_855
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有