猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

css3边框加载 鼠标滑过，线能有一个闭合的过程

css3边框加载 鼠标滑过，线能有一个闭合的过程


慕哥9229398
浏览 597回答 3
3回答

MMMHUHU

我想的应该是四个边用四个标签模拟一下。。然后每个边用css3处理做动画。不知道有没有更好的办法。12345678910111213141516171819202122232425262728<style>&nbsp;&nbsp;&nbsp;&nbsp;.outer{position:relative;width:100px;height:100px;border:3px&nbsp;solid&nbsp;#ccc;}&nbsp;&nbsp;&nbsp;&nbsp;.outer&nbsp;i{}&nbsp;&nbsp;&nbsp;&nbsp;.outer:before,&nbsp;&nbsp;&nbsp;&nbsp;.outer:after{position:absolute;display:block;content:"";-webkit-transition:all&nbsp;0.1s;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.outer:before{top:-3px;left:-3px;width:0;height:0;border-top:3px&nbsp;solid&nbsp;#F00;-webkit-transition-delay:&nbsp;0.3s;}&nbsp;&nbsp;&nbsp;&nbsp;.outer:after{bottom:-3px;right:-3px;width:0;height:0;border-top:3px&nbsp;solid&nbsp;#F00;-webkit-transition-delay:&nbsp;0.1s;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.outer&nbsp;i:before,&nbsp;&nbsp;&nbsp;&nbsp;.outer&nbsp;i:after{position:absolute;display:block;content:"";-webkit-transition:all&nbsp;0.1s;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.outer&nbsp;i:before{left:-3px;bottom:-3px;height:0;width:0;border-left:3px&nbsp;solid&nbsp;#F00;-webkit-transition-delay:&nbsp;0s;}&nbsp;&nbsp;&nbsp;&nbsp;.outer&nbsp;i:after{right:-3px;top:-3px;height:0;width:0;border-left:3px&nbsp;solid&nbsp;#F00;-webkit-transition-delay:&nbsp;0.2s;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover:after,&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover:before{width:103px;}&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover&nbsp;i:after,&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover&nbsp;i:before{height:103px;}&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover:before{-webkit-transition-delay:&nbsp;0s;}&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover:after{-webkit-transition-delay:&nbsp;0.2s;}&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover&nbsp;i:after{-webkit-transition-delay:&nbsp;0.1s;}&nbsp;&nbsp;&nbsp;&nbsp;.outer:hover&nbsp;i:before{-webkit-transition-delay:&nbsp;0.3s;}</style>&nbsp;<div&nbsp;class="outer">&nbsp;&nbsp;&nbsp;&nbsp;<i></i></div>
0

qq_遁去的一_1

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!doctype&nbsp;html><html><head><meta&nbsp;charset="utf-8"><title>鼠标移入显示文本</title><link&nbsp;href="my.css"&nbsp;rel="stylesheet"&nbsp;type="text/css"><style>#body1{width:960px;&nbsp;height:auto;&nbsp;margin:20px&nbsp;auto&nbsp;0px&nbsp;auto}#body1&nbsp;ul{}#body1&nbsp;li{float:left;&nbsp;width:239px;&nbsp;text-align:center;&nbsp;height:318px;&nbsp;position:relative}#body1&nbsp;img{&nbsp;position:absolute;&nbsp;top:0px;&nbsp;left:5px}#body1&nbsp;span{display:block;&nbsp;position:absolute;&nbsp;background:#666;&nbsp;height:70px;bottom:0px;&nbsp;left:5px;&nbsp;width:220px;color:#fff;&nbsp;opacity:0.7}</style><script&nbsp;src="jquery-1.3.2.min.js"></script><script>$(function(){&nbsp;&nbsp;&nbsp;&nbsp;$('#body1&nbsp;li').find('span').hide();&nbsp;//隐藏全部&nbsp;&nbsp;&nbsp;&nbsp;$('#body1&nbsp;li').hover(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find('span').stop(true,true).slideDown();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find('span').stop(true,true).slideUp();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;});</script></head><body>&nbsp;&nbsp;<div&nbsp;id="body1">&nbsp;&nbsp;&nbsp;&nbsp;<ul>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="img/3.jpg"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>说明内容说明内容说明内容说明内容</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="img/4.jpg"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>说明2内容说明内容说明内容说明内容</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="img/5.jpg"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>说明3内容说明内容说明内容说明内容</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="img/6.jpg"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>说明4内容说明内容说明内容说明内容</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>&nbsp;&nbsp;&nbsp;&nbsp;</ul>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;</body></html>第二种：还有一种是用的css3实现的，实现原理：刚开始框就存在了，只不过透明度为全透明，鼠标移入后透明度不透明就显示出来了，框稍微动画一些的话就用到css3的旋转之类的了。如下图123456789101112131415161718192021222324252627282930313233343536373839404142434445<!doctype&nbsp;html><html><head><meta&nbsp;charset="utf-8"><title>css3练习</title><link&nbsp;href="my-1.css"&nbsp;rel="stylesheet"&nbsp;type="text/css"><style>#bt{width:100%;&nbsp;height:50px;&nbsp;font-size:20px;&nbsp;background:#06F;&nbsp;color:#fff;&nbsp;text-align:center;&nbsp;line-height:50px;&nbsp;margin-bottom:10px}figure{position:relative;&nbsp;width:33.33%;&nbsp;height:270px;&nbsp;float:left;&nbsp;overflow:hidden}figure&nbsp;img{width:100%;&nbsp;opacity:0.9;transition:&nbsp;all&nbsp;0.35s;}figcaption{position:absolute;&nbsp;top:10px;&nbsp;left:10px;&nbsp;color:#fff;&nbsp;font-family:"微软雅黑"}@media&nbsp;screen&nbsp;and&nbsp;(max-width:600px){&nbsp;&nbsp;&nbsp;&nbsp;figure{width:100%}&nbsp;&nbsp;&nbsp;&nbsp;}@media&nbsp;screen&nbsp;and&nbsp;(max-width:1000px)&nbsp;and&nbsp;(min-width:601px){&nbsp;&nbsp;&nbsp;&nbsp;figure{width:50%}&nbsp;&nbsp;&nbsp;&nbsp;}@media&nbsp;screen&nbsp;and&nbsp;(min-width:1001px){&nbsp;&nbsp;&nbsp;&nbsp;figure{width:33.33%}&nbsp;&nbsp;&nbsp;&nbsp;}.d2{background:#000}.d2&nbsp;figcaption{width:100%;&nbsp;height:100%;}.d2&nbsp;figcaption&nbsp;h2{margin-top:10%;margin-left:15%}.d2&nbsp;figcaption&nbsp;p{margin-top:5%;margin-left:15%&nbsp;;transform:translate(0px,50px);&nbsp;opacity:0}.d2&nbsp;figcaption&nbsp;div{width:80%;&nbsp;height:60%;&nbsp;border:5px&nbsp;solid&nbsp;white;&nbsp;position:absolute;&nbsp;top:10%;&nbsp;left:10%;&nbsp;transform:translate(0px,-210px)&nbsp;rotate(0deg)}.d2:hover&nbsp;figcaption&nbsp;div{&nbsp;transform:translate(0px,0px)&nbsp;rotate(180deg);}.d2:hover&nbsp;img{&nbsp;opacity:0.7}.d2:hover&nbsp;figcaption&nbsp;p{margin-top:5%;margin-left:15%;&nbsp;font-size:17px;&nbsp;font-weight:bold;&nbsp;transform:translate(0px,0px);opacity:1}/*----------------------------end-------------------------------------------*/</style>&nbsp;</head>&nbsp;<body><div&nbsp;id="bt">CSS3.0的样式练习</div>&nbsp;<figure&nbsp;class="d2">&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="img/48.jpg"/>&nbsp;&nbsp;&nbsp;&nbsp;<figcaption>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h2>旋转动画</h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>飞来飞去，飞来飞舞</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div></div>&nbsp;&nbsp;&nbsp;&nbsp;</figcaption></figure></body></html>&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3