css3边框加载 鼠标滑过，线能有一个闭合的过程
3 回答
MMMHUHU
TA贡献1834条经验 获得超8个赞
我想的应该是四个边用四个标签模拟一下。。然后每个边用css3处理做动画。
不知道有没有更好的办法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <style> .outer{position:relative;width:100px;height:100px;border:3px solid #ccc;} .outer i{} .outer:before, .outer:after{position:absolute;display:block;content:"";-webkit-transition:all 0.1s;}
.outer:before{top:-3px;left:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.3s;} .outer:after{bottom:-3px;right:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.1s;}
.outer i:before, .outer i:after{position:absolute;display:block;content:"";-webkit-transition:all 0.1s;}
.outer i:before{left:-3px;bottom:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0s;} .outer i:after{right:-3px;top:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0.2s;}
.outer:hover:after, .outer:hover:before{width:103px;} .outer:hover i:after, .outer:hover i:before{height:103px;} .outer:hover:before{-webkit-transition-delay: 0s;} .outer:hover:after{-webkit-transition-delay: 0.2s;} .outer:hover i:after{-webkit-transition-delay: 0.1s;} .outer:hover i:before{-webkit-transition-delay: 0.3s;} </style>
<div class="outer"> <i></i> </div> |
qq_遁去的一_1
TA贡献1725条经验 获得超7个赞
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标移入显示文本</title> <link href="my.css" rel="stylesheet" type="text/css"> <style> #body1{width:960px; height:auto; margin:20px auto 0px auto} #body1 ul{} #body1 li{float:left; width:239px; text-align:center; height:318px; position:relative} #body1 img{ position:absolute; top:0px; left:5px} #body1 span{display:block; position:absolute; background:#666; height:70px;bottom:0px; left:5px; width:220px;color:#fff; opacity:0.7} </style> <script src="jquery-1.3.2.min.js"></script> <script> $(function(){ $('#body1 li').find('span').hide(); //隐藏全部 $('#body1 li').hover(function(){ $(this).find('span').stop(true,true).slideDown(); },function(){ $(this).find('span').stop(true,true).slideUp(); }); }); </script> </head> <body> <div id="body1"> <ul> <li> <a href="#"> <img src="img/3.jpg" /> <span>说明内容说明内容说明内容说明内容</span> </a> </li> <li> <a href="#"> <img src="img/4.jpg" /> <span>说明2内容说明内容说明内容说明内容</span> </a> </li> <li> <a href="#"> <img src="img/5.jpg" /> <span>说明3内容说明内容说明内容说明内容</span> </a> </li> <li> <a href="#"> <img src="img/6.jpg" /> <span>说明4内容说明内容说明内容说明内容</span> </a> </li> </ul>
</div>
</body> </html> |
第二种：还有一种是用的css3实现的，
实现原理：刚开始框就存在了，只不过透明度为全透明，鼠标移入后透明度不透明就显示出来了，框稍微动画一些的话就用到css3的旋转之类的了。如下图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>css3练习</title> <link href="my-1.css" rel="stylesheet" type="text/css"> <style> #bt{width:100%; height:50px; font-size:20px; background:#06F; color:#fff; text-align:center; line-height:50px; margin-bottom:10px} figure{position:relative; width:33.33%; height:270px; float:left; overflow:hidden} figure img{width:100%; opacity:0.9;transition: all 0.35s;} figcaption{position:absolute; top:10px; left:10px; color:#fff; font-family:"微软雅黑"} @media screen and (max-width:600px){ figure{width:100%} } @media screen and (max-width:1000px) and (min-width:601px){ figure{width:50%} } @media screen and (min-width:1001px){ figure{width:33.33%} } .d2{background:#000} .d2 figcaption{width:100%; height:100%;} .d2 figcaption h2{margin-top:10%;margin-left:15%} .d2 figcaption p{margin-top:5%;margin-left:15% ;transform:translate(0px,50px); opacity:0} .d2 figcaption div{width:80%; height:60%; border:5px solid white; position:absolute; top:10%; left:10%; transform:translate(0px,-210px) rotate(0deg)} .d2:hover figcaption div{ transform:translate(0px,0px) rotate(180deg);} .d2:hover img{ opacity:0.7} .d2:hover figcaption p{margin-top:5%;margin-left:15%; font-size:17px; font-weight:bold; transform:translate(0px,0px);opacity:1} /*----------------------------end-------------------------------------------*/ </style> </head>
<body> <div id="bt">CSS3.0的样式练习</div>
<figure class="d2"> <img src="img/48.jpg"/> <figcaption> <h2>旋转动画</h2> <p>飞来飞去，飞来飞舞</p> <div></div> </figcaption> </figure> </body> </html> |
- 3 回答
- 0 关注
- 596 浏览
添加回答
举报
0/150
提交
取消