一个有趣的鼠标移上去的动画-整理

屏幕录制gif的软件不好用,就用三张截图说明动画效果吧:

我比较喜欢的是他那个边框描边的动画,于是做了整理,提取关键代码如下

结构

 1     <ul class="animate">
 2         <li>
 3             <a href="javascript:;">鼠标移上来试试</a>
 4         </li>
 5         <li>
 6             <a href="javascript:;">鼠标移上来试试</a>
 7         </li>
 8         <li>
 9             <a href="javascript:;">鼠标移上来试试</a>
10         </li>
11     </ul>

 样式

 1 .animate li{
 2     margin-right: 10px;
 3     display: inline-block;
 4 }
 5 .animate li a{
 6     position: relative;
 7     color: #9f00ff;
 8     text-decoration: none;
 9     display: block;
10     padding: 10px 20px;
11     border: 1px solid #dedede;
12     -webkit-transition: all 0.6s ease-in;
13   -moz-transition: all 0.6s ease-in;
14   -ms-transition: all 0.6s ease-in;
15   -o-transition: all 0.6s ease-in;
16   transition: all 0.6s ease-in;
17 }
18 .animate li a:hover{
19     color: #0012ff;
20     border: 1px solid #4488ff;
21 }
22 .animate li a:before,.animate li a:after{
23     content: '';
24   display: block;
25   position: absolute;
26     box-sizing: border-box;
27   border: 1px solid transparent;
28   width: 0;
29   height: 0;
30 }
31 .animate li a:before {
32   bottom: 0;
33   right: 0;
34   -webkit-transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
35   transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
36 }
37 .animate li a:after{
38   top: 0;
39   left: 0;
40   -webkit-transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
41   transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
42 }
43 .animate li a:hover:after,.animate li a:hover:before {
44   width: 100%;
45   height: 100%;
46 }
47 .animate li a:hover:before {
48   border-bottom-color: #367dff;
49   border-left-color: #367dff;
50   -webkit-transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
51   transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
52 }
53 .animate li a:hover:after {
54   border-top-color: #367dff;
55   border-right-color: #367dff;
56   -webkit-transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
57   transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
58 }

从css中看,除了普通的动画以外,本效果利用动画的延迟属性,让after和befor的宽高边框颜色依次按序开始执行,就有了我们看到的动画

并且,after和before的起始位置不同,after在左上角,before在右下角

after先变化,宽度在0.2s内无延迟的从0-100%,0.2s过后,after的高度开始变化,同样在0.2s以后变化完毕,至此,after的整个已经覆盖完边框了,

只不过after:hover时候,只有border-top和border-right的color被设置了,所以效果上看上去只有从上边框到右边框的描边效果。

after运动完毕,before开始按照同样的套路先变宽后变高,只不过before的起始位置在右下角,且border的颜色只有bottom和left的,所以他的变化在视觉上看上去就是从有向左描边下边框,再从下到上描边左边框。

至于border-color 0s ease-out 0.4s这段,是在after的宽高刚好变完后,before的border瞬间变成彩色,然后同时起步的是宽度也开始变化。。。剩下的套路都是上一句的了

于是就看到before的border变了色,也就是边框的右边快速变成了蓝色。

鼠标移除后的套路就是这个顺序再反过来回去,也就是延迟反过来,按照退出的顺序,一个比一个长点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

裁图、抠图、换背景,PPT也可以

今天跟大家聊一聊PPT的基本图片处理功能! ▽ 每次做PPT的时候 总想弄几个感觉还不错的图片 插入PPT里来装装bigger 可是能找到的图片 不是背景不搭 ...

38810
来自专栏IMWeb前端团队

移动端web开发入门笔记

移动端web开发基本上分为三种: 移动端网页开发 传统的页面开发,可以参考手机腾讯网。 移动端web app开发 简单来说就是在开发中使用一些浏览器私有的方法...

2449
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

1.4K9
来自专栏企鹅号快讯

Web前端,认识css,css规格,伪类和伪元素的用法,代码详解!

认识 CSS — Cascading Style Sheets CSS的世界是神奇的。随着浏览器WEB标准的日趋统一,CSS在WEB世界中的扮演的角色也越来越重...

2026
来自专栏互联网杂技

试试这4个CSS动画解决方案和资源

随着移动设备的大量使用和CSS3兼容性在浏览器中的普及,越来越多的程序猿开始设计和使用基于CSS3的动画效果解决方案,但是自己编写基于CSS3的动画效果也是一件...

3345
来自专栏前端知识分享

第124天:移动web端-Bootstrap轮播图插件使用

> 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

3204
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9685
来自专栏Material Design组件

Human Interface Guidelines —— 工具栏(Toolbars)

38610
来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

1998
来自专栏前端笔记

【CSS3 理论知识】表格边框(table-border)你知多少???

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己...

3156

扫码关注云+社区

领取腾讯云代金券