CSS3用transition实现边框动画效果

来源：互联网发布：网络直播学校编辑：程序博客网时间：2024/05/17 04:34

CSS3用transition实现边框动画效果.animate{transition: all 0.5s ease-in-out;}.m{width: 200px;height: 50px;text-align: center;font-size: 20px;line-height: 50px;font-family: Microsoft Yahei; color: gray;border:2px solid #dfdfdf;cursor: pointer;}.b{position: relative;}.b span{display: inline-block;position: absolute;content: none;border: 0;width: 0;height: 0;}.b:hover{color: #faad11;}.b span.top{right:-2px;top:0;border-top:2px solid #faad11;margin-top:-2px;}.b span.right{right:0;bottom:0;border-right:2px solid #faad11;margin-right:-2px;}.b span.bottom{left:-2px;bottom:0;border-bottom:2px solid #faad11;margin-bottom:-2px;}.b span.left{left:0;top:0;border-left:2px solid #faad11;margin-left:-2px;}.b:hover span.top{width:204px;}.b:hover span.right{height:50px;}.b:hover span.bottom{width:204px;}.b:hover span.left{height:50px;}按钮

参考资料 http://www.guojiawei.com/arc/58f87976f4bfab0a07801632

阅读全文

0 0