【特效】hover效果之四线动画

效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3102.htm

html:

css:

.wrap{ width:200px; height:150px; border:1px solid red; margin:0 auto; position:relative;}

.wrap span{ position:absolute; background:green; transition:1s; opacity:0;}

.line_l{ width:1px; height:50px; left:50px; top:50px; margin-top:25px;}
.line_r{ width:1px; height:50px; left:150px; top:50px; margin-top:-25px;}
.line_t{ width:100px; height:1px; left:50px; top:50px; margin-left:-50px;}
.line_d{ width:100px; height:1px; left:50px; top:100px; margin-left:50px;}

.wrap:hover span{ opacity:1;}
.wrap:hover .line_l{ margin-top:0;}
.wrap:hover .line_r{ margin-top:0;}
.wrap:hover .line_t{ margin-left:0;}
.wrap:hover .line_d{ margin-left:0;}

源码下载：http://pan.baidu.com/s/1hsiczTM

转载于:https://www.cnblogs.com/xiaoxianweb/p/6343286.html

【特效】hover效果之四线动画相关推荐

css3新动_10款重量级CSS3的全新特效实现超酷前端动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
[前端css-3] 实现图片卷帘效果，以及动画
[前端css-3] 实现图片卷帘效果,以及动画 1.效果展示: 效果预览 2.知识点: 1.position(相对定位/绝对定位)2.伪类(:after/:before)3.animation(动画) ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
让hover效果平滑过渡回初始状态?
让hover效果平滑过渡回初始状态? 文章目录让hover效果平滑过渡回初始状态? 前言一.原因分析二.解决方案附整的活总结前言唉-朋友们好啊,我是大二计算机整活系学生. 刚才有个老师 ...
html鼠标元素效果,十五种css3鼠标hover效果
css3有哪些不错的hover效果 CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦效果一:360°旋转修改rotate(旋转度数) 01 * { 02 transit ...
搜索效果和搜索动画效果
搜索效果和搜索动画效果开发工具与关键技术:DW 搜索效果作者:周欢撰写时间:2019/2/20 在生活中我们不难发现,往往大的软件都会有便捷的获取方式.因为软件越大功能也会相对的多一些,功能的繁 ...
文字下划线效果（标题hover效果）
文字下划线效果(标题hover效果)  <div> <a href="javascript:void(0);" clas ...
Web前端——登录界面hover效果
登录界面hover效果 Demo1(来源:B站"艾恩小灰灰") 源代码: html+javascript: css: 效果图: Demo1(来源:B站"艾恩小灰灰&quo ...
JS实现css的hover效果，兼容移动端
Hi I'm Shendi JS实现css的hover效果,兼容移动端功能概述 CSS的hover即触碰时触发,在电脑端鼠标触碰,移动端手指触摸有的时候光靠css实现不了一些效果,例如元素触发ho ...

【特效】hover效果之四线动画

【特效】hover效果之四线动画相关推荐

最新文章

热门文章