鼠标悬浮 边框动态出来特效

最新推荐文章于 2023-04-09 22:40:45 发布
最新推荐文章于 2023-04-09 22:40:45 发布
阅读量129 收藏
点赞数
原文链接：https://my.oschina.net/smzdqiang/blog/724746
版权 
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery响应式线条滑出列表特效 - 非凡图库</title>
<script src="js/jquery.min.js"></script>
</head>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
.box { width: 1190px; margin: 0 auto; padding-top: 50px; height: 300px; }
.border_animation { border: 1px solid #eee; width: 220px; height: 260px; float: left; margin-right: 10px; position: relative; }
.border_animation .border_top { position: absolute; height: 1px; width: 0; font-size: 0; background: #666666; top: 0; left: 0; transition: all 0.5s ease-out; }
.border_animation .border_right { position: absolute; height: 0px; width: 1px; font-size: 0; background: #666666; bottom: 0; right: 0; transition: all 0.5s ease-out; }
.border_animation .border_bottom { position: absolute; height: 1px; width: 0px; font-size: 0; background: #666666; right: 0; bottom: 0; transition: all 0.5s ease-out; }
.border_animation .border_left { position: absolute; height: 0px; width: 1px; font-size: 0; background: #666666; left: 0; top: 0; transition: all 0.5s ease-out; }
.eva-switchable-panels img { display: block; }
.box .hover .border_top,.box .hover .border_bottom { width: 220px}
.box .hover .border_left,.box .hover .border_right { height: 260px}
</style>
<body>
<div class="box">
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
</div>
<script>
    $(function(){
        $(".border_animation").mouseenter(function(){
            $(this).addClass("hover");
        });
        $(".border_animation").mouseleave(function(){
            $(this).removeClass("hover");
        });
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.ffpic.com/" target="_blank">非凡图库</a></p>
</div>
<div style="display:none"><script src="http://s24.cnzz.com/stat.php?id=4273731&web_id=4273731" language="JavaScript"></script><script src="http://s20.cnzz.com/stat.php?id=5240441&web_id=5240441" language="JavaScript"></script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faca36f9d36d03a04d61c93f28c896386' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
</body>
</html>

 

转载于:https://my.oschina.net/smzdqiang/blog/724746

chichaojing6253
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现鼠标悬停文字动态显示下划线的效果，移出下划线消失
weixin_44828699的博客
03-23 3007
css 样式 悬停展示动态下划线
HTML用hover页面动画效果,一个简单hover动画效果_html/css_WEB-ITnose
weixin_39883208的博客
06-03 893
HTML:demo1demo2CSS:.demo { width: 100px; height: 100px; text-align: center; line-height: 100px; border: 10px solid #ccc; border-radius: 60px; font-size: 20px; -webkit-backface-...
css3鼠标悬停图片边框线条动画特效
蹦极的考拉
08-15 326
css3鼠标经过内容区时，边框线条特效效果制作。 html: <div class="strength grWidth hidden"> <div class="homeTitle"> <h2>为什么选择优胜空间？</h2> </div> <ul class="strengthMain"...
css3鼠标悬停动画线条边框特效
Mini_小仙女的博客
12-06 1198
鼠标滑过边框动画效果，使用css3结合jquery。 先上效果图： 代码如下： // html <div class="hotflagson"> <img src="images/14477454559904.png" alt="Swarovski施华洛世奇"> <div class="hotmiddle"> <a href="#"&...
js实现鼠标悬浮给图片加边框的方法
10-24
主要介绍了js实现鼠标悬浮给图片加边框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery鼠标经过边框抖动变形动画特效
06-10
基于HTML5 canvas来制作，可以在鼠标移入和移出HTML元素时，为其边框制作波浪状的抖动效果的jQuery鼠标经过边框抖动变形动画特效。
CSS3鼠标悬停边框爱心点赞特效
07-14
CSS3鼠标悬停边框爱心点赞特效是一款适合博客文章列表和设计类图文网站列表特效。
jQuery的鼠标悬停图片边框动画特效.zip
07-11
js代码 [removed] $(function(){ // 边框效果--移入 function biankuang(){ ... $('.biankuang_1').stop(true).... jQuery鼠标悬停图片边框动画特效是一款鼠标移动商品图片的时候动画显示红色边框的动画代码。
CSS特效（四）：按钮Hover边框动画特效
qwerty053的博客
10-05 2397
今天做出的动画效果如下： 这个效果的做法其实很简单，只需要对stroke-dasharray和stroke-dashoffset加以灵活应用，就可以做出来啦~ 首先准备一个超大的div盒子，使其高度和宽度都为视图高度和视图宽度，然后在其中放入一个div盒子作为最终按钮形成边框的盒子，在其中放入svg和div，分别用来绘制边框和写入文字，记得在svg中放入rect绘制一个矩形。 框架建好后，就为其设置CSS样式： 首先设置矩形的fill属性为transparent，选择一个喜欢的颜色当作stroke边框颜色
使用CSS实现鼠标悬浮标题出现动态下划线
Xc_Wl的博客
04-09 2099
文字背景填充满了，无法跟动态图一样那么细。别急，css里还有有个background-size属性，设置一下就可以了。然后把100%改成0 再给div添加：hover鼠标滑过长度成100%，加个过渡动画。到这里发现为什么跟第一张效果图不一样啊，不应该是进去从上面出来然后再下面消失吗。要实现这种效果只需要使用到background这个属性了。这时候就需要再：hover属性里面加入。然后在设置background属性。这时候页面就会出现这样子。今天来实现下面图片的效果。就跟效果图一模一样了。
CSS之实现按钮hover时边框动态效果
shandamengcheng的博客
11-10 2519
在看书时，突然想到怎样来实现这样的一个效果，记得以前看过一篇文章说用四个div标签在按钮的四周就可以实现。于是自己动手做了一下。 实现也很简单，主要就是用一个包含元素包含四个div和一个button元素，包含元素和button元素相同的宽高，另外四个div进行绝对定位。 <div id="buttonTry"> <div id="left"></d...
鼠标悬停在li标签上时显示一个弹框_HTML标签——列表标签
weixin_39710295的博客
12-11 1358
列表使用场景：内容相关、结构相似、样式相近的内容，根据内容的不同分为：无序列表、有序列表、定义列表无序列表：两个标签<ul>和<li>，是嵌套关系，快捷键ul>liul：unordered list，表示定义一个无序列表的大结构li：list item，列表项，定义的是无序列表内的某一项2.有序列表：<ol>和<li>，是嵌套关系，快捷键ol&...
基于Java的消息中间件java操作demo.zip
05-08
消息中间件java操作demo 提供activeMq的 java实现，和两种模式：点对点、发布和订阅 直接clone下来，导入maven项目启动test包下的 Client.java
基于 Python 的波士顿房价数据集
05-08
波士顿房价数据集 波士顿房价数据集 目的：通过分析十三个房屋特征与房价的关系，同时建立模型进行房价预测 波士顿房价指标与房价的关系 CRIM：城镇人均犯罪率——负相关占比 ZN：住宅用地所占比例——无单个特征 INDUS：城镇中非住宅用地所占比例——负相关 CHAS：虚拟变量，用于回归分析——无单个特征 NOX：环保指数——无单个特征 RM：每栋住宅的房间数——正相关 AGE：1940年以前建成的自住单位的比例——无单个特征 DIS：距离5个波士顿的就业中心的加权距离——无单个特征 RAD：距离高速公路的便利指数——无单个特征 TAX：每一万美元的不动产税率——无单个特征 PTRATIO：城镇中教师学生比例——无单个特征 B：城镇中黑人的比例——无单个特征 LSTAT：地区中多少房东属于低收入人群——负相关 MEDV：自主房屋房价中位数（标签数据）——房价中位数
优秀毕业设计 基于STM32单片机的家庭智能安全系统源码+详细文档+全部数据资料.zip
05-08
【资源说明】 优秀毕业设计 基于STM32单片机的家庭智能安全系统源码+详细文档+全部数据资料.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
基于python U2Net 深度学习的证件照生成.zip
05-08
基于python U2Net 深度学习的证件照生成.zip
python爬虫教程系列、从0到1学习python爬虫，包括浏览器抓包，手机APP抓包
最新发布
05-08
python爬虫教程系列、从0到1学习python爬虫，包括浏览器抓包，手机APP抓包，如 fiddler、mitmproxy，各种爬虫涉及的模块的使用，如：requests、beautifulSoup、selenium、appium、scrapy等，以及IP代理，验证码识别，Mysql，MongoDB数据库的python使用，多线程多进程爬虫的使用，css 爬虫加密逆向破解，JS爬虫逆向，分布式爬虫，爬虫项目实战实例等
el-time-picker鼠标悬浮设置边框颜色
03-01
关于鼠标悬浮设置边框颜色的问题，你可以通过以下步骤来实现： 1. 首先，在 el-time-picker 组件上添加一个自定义的 class 名称，例如 "custom-time-picker"。 2. 在你的 CSS 文件中，使用该 class 名称来定义鼠标...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值