javascript - 这个描边动画效果是怎么实现的呢？
问题描述
鼠标悬停在上面就会出现这个类似描边效果，纯css可以实现吗？想实现一样的效果具体怎么弄呢？
问题解答
回答1：开始我想尝试用伪类来实现，但z-index好像没办法处理，所以就这样模拟了。demo
<style type='text/css'>.btn{ position: relative; height: 45px; width: 200px; background: #fff; color: #6cf; text-align: center; line-height: 45px; -webkit-box-sizing:border-box; box-sizing:border-box; margin: 0 auto; border: 1px solid #ccc;}.b-l{ position: absolute; content: ''; display: block; width: 0px; height: 1px; left: -1px; top: -2px; background: #6cf; z-index: -1; -webkit-transition:width 1s linear 2s,height 0.5s linear 1.5s; transition:width 1s linear 2s,height 0.5s linear 1.5s;}.b-r{ position: absolute; content: ''; display: block; width: 0px; height: 1px; right: -1px; bottom: -2px; background: #6cf; z-index: -1; -webkit-transition:width 1s linear 0.5s,height 0.5s linear; transition:width 1s linear 0.5s,height 0.5s linear;}.btn:hover .b-l{ -webkit-transition:width 1s linear,height 0.5s linear 1s; transition:width 1s linear,height 0.5s linear 1s; width: 201px; height: 46px;}.btn:hover .b-r{ -webkit-transition:width 1s linear 1.5s,height 0.5s linear 2.5s; transition:width 1s linear 1.5s,height 0.5s linear 2.5s; width: 201px; height: 46px;}</style><body><p class='btn'> <p class='b-l'></p> <p class='b-r'></p> btn</p></body>回答2：
可以实现 主要依靠animation-delay属性，可以自行搜索下
回答3：是SVG吧。
相关文章：
1. 怎样用python给mp3添加封面？2. linux - 【已解决】fabric部署的Python项目Apache启动之后提示403Forbidden该如何解决？3. 上传多图时，最后一张图为缩略图，想设置第一张图为缩略图怎么解决？4. python - 如何获取rabbitmq连接的celery的个数5. js怎样实现在类似qq的联系人分组中进行搜索后，又可恢复原分组的界面？6. python 中文乱码问题7. 数据库 - Mysql的存储过程真的是个坑！求助下面的存储过程哪里错啦，实在是找不到哪里的问题了。8. javascript - 百度地图一开始设置了中心点，怎么通过按钮在调转到对应的中心点？？？？9. mysql优化 - mysql 一张表如果不能确保字段列长度一致，是不是就不需要用到char。10. python - 如何将文本文件的CR换行符换成LF换行符？
网公网安备