div代码

<div class='div'>
hover
</div>

css代码

.div{
width:200px;
height:100px;
line-height: 100px;
text-align: center;
border-radius: 5px;
background-color: #FEC171;
transition: all 600ms ease;
position: relative;
}

.div:hover{
background-color: #fff;
border-radius: 0;
}
.div:hover:before,.div:hover:after{
width:100%;
transition: all 600ms ease;
background-color: #FEC171;
}
.div:before,.div:after{
position: absolute;
content:'';
top:0;
right:0;
height:2px;
width:0;
transition: all 400ms ease
}
.div:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}

思路

实现的是一个divhover上去改变背景色,但是显示很单调,而且没有动画的效果

然后这个代码是结合了伪类before跟after来实现before一条线,after一条线

before这条线从右边出来

after这条线从左边出来的这样一个有动画效果的感觉

实现的思路就是用transition的过渡来实现的,当然上面的代码没有做兼容

before跟after的那条线都可以给一个绝对定位然后看起来跟div的border一样的效果

before是用绝对定位在top:0,right:0那里,就是从right:0,width:0到width:100%的一个过渡的效果

after是用绝对定位在top:inherit,right:inherit,bottom:0,left:0那里就是从left:0,width:0到width:100%的一个过渡的效果

恩恩 欢迎补充的哦

transition结合:after,:before实现动画的更多相关文章

  1. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  2. Vue-router结合transition实现app前进后退动画切换效果

    一丶首先配置路由并且修改路由配置 路由配置就不讲了重点,给VueRoute添加一个goBack方法,用于记录路由的前进后退状态 this.isBack = true  VueRouter.protot ...

  3. 利用css transition属性实现一个带动画显隐的微信小程序部件

    我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...

  4. css3,transition,animation两种动画实现区别

    我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...

  5. safari渲染Transition动画不流畅问题

    用css3的transition过渡来做页面动画的时候,发现在chrome和ff流畅,在safari 不流畅: 度娘找到了淘宝UED的一个类似解决方案,动画就流畅了. 测试环境: win7 32bit ...

  6. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  7. CSS3动画效果之transition

    CSS3中有两种方式实现动画,transition和animation+@keyframe. 两者的作用机制不一样:transition定义在可能要进行动画的元素上,对某些CSS属性进行监听,一旦CS ...

  8. css3的动画特效--元素旋转(transition,animation)

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  9. 札记:翻译-使用Scene和Transition实现【场景切换】动画效果

    简述:transitions framework 下面翻译transition为"过渡",强调动画过程的含义,不过更多时候使用transition单词本身. Android 4.4 ...

随机推荐

  1. HDOJ(HDU).2546 饭卡(DP 01背包)

    HDOJ(HDU).2546 饭卡(DP 01背包) 题意分析 首先要对钱数小于5的时候特别处理,直接输出0.若钱数大于5,所有菜按价格排序,背包容量为钱数-5,对除去价格最贵的所有菜做01背包.因为 ...

  2. 【数位DP】【SCOI2009】windy数

    传送门 Description \(windy\)定义了一种\(windy\)数.不含前导零且相邻两个数字之差至少为\(2\)的正整数被称为\(windy\)数.\(windy\)想知道, 在\(A\ ...

  3. 【树形DP】【P1364】医院放置

    传送门 Description 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接 ...

  4. Linux之ioctl20160705

    ioctl(fdAcodec, ACODEC_GET_ADCL_VOL, &vol_ctrl)//从内核驱动中获取或者设置数据//内核驱动中也使用ACODEC_GET_ADCL_VOL进行ca ...

  5. git安装配置和使用

    ## 安装git服务器 ## 安装git sudo apt-get install git ## 建立git用户 sudo adduser git ## 修改git用户 * 设置不能登录 vim /e ...

  6. Apple Tree POJ - 3321 dfs序列构造树状数组(好题)

    There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow in the tree. ...

  7. 【题解】Weird journey Codeforces 788B 欧拉路

    传送门:http://codeforces.com/contest/788/problem/B 好题!好题! 首先图不连通的时候肯定答案是0,我们下面讨论图联通的情况 首先考虑,如果我们每条边都经过两 ...

  8. mysql Innodb索引

    基本概念 对于mysql目前的默认存储引擎Innodb来说,索引分为2个,一个是聚集索引,一个是普通索引(也叫二级索引). 聚集索引:聚集索引的顺序和数据在磁盘的顺序一致,因此查询时使用聚集索引,效率 ...

  9. Spring+SpringMVC+MyBatis整合(山东数漫江湖)

    Spring+SpringMVC+MyBatis(SSM)在我们项目中是经常用到的,这篇文章主要讲解使用Intellij IDEA整合SSM,具体环境如下: 数据库:MySQL5.7 依赖管理:Mav ...

  10. elementui table 多选 获取id

    //多选相关方法 toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggl ...