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. BZOJ3714 [PA2014]Kuglarz 【最小生成树】

    题目链接 BZOJ3714 题解 我们如果知道了所有的数,同样就知道了所有的前缀和 相反,我们如果求出了所有前缀和,就知道了所有的数,二者是等价的 对于一个区间\([l,r]\)如果我们知道了前缀和\ ...

  2. HDOJ(HDU).2191. 悼念512汶川大地震遇难同胞――珍惜现在,感恩生活 (DP 多重背包+二进制优化)

    HDOJ(HDU).2191. 悼念512汶川大地震遇难同胞――珍惜现在,感恩生活 (DP 多重背包+二进制优化) 题意分析 首先C表示测试数据的组数,然后给出经费的金额和大米的种类.接着是每袋大米的 ...

  3. The driver has not received any packets from the server

    解决方法: jdbc的url添加参数: jdbc.url=jdbc:mysql://localhost:3306/totosea?useUnicode=true&characterEncodi ...

  4. redux样板代码简化写法

    直接使用redux,要写很多样板代码,大量的actiontype,actionCreator.一个异步的方法要写三个actiontype,三个actionCreator,十分繁琐.下面是本人使用的一种 ...

  5. Java API不能远程访问linux服务器HBase的问题

    今天我在虚拟机里面安装了Hbase 1.2.4,说在windows上Java API调用访问下玩玩,结果始终连接不上. 现象是启动程序后,程序出现卡死的状态,没报错也不停止,大约半分钟后才打印一堆日志 ...

  6. PostgreSQL主键索引膨胀的重建方法

    普通的索引膨胀处理比较简单,主键的索引膨胀也不复杂,只是在新旧索引交替时有一些小处理.本试验在primary key上通过CONCURRENTLY建立第二索引来解决索引膨胀问题,适用9.3.9.4,其 ...

  7. bzoj 5216 [Lydsy2017省队十连测]公路建设 线段树维护 最小生成树

    [Lydsy2017省队十连测]公路建设 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 93  Solved: 53[Submit][Status][ ...

  8. Microsoft office 2013安装图解

    Microsoft office 2013安装图解... ================ 简介: Microsoft Office 2013(Office 15)是微软的新一代Office办公软件, ...

  9. JSX 的基本语法规则

    JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析:遇到代码块(以 { 开头),就用 JavaScript 规则解析

  10. 「模板」 树链剖分 HLD

    「模板」 树链剖分 HLD 不懂OOP的OIer乱用OOP出人命了. 谨此纪念人生第一次类套类. 以及第一次OI相关代码打过200行. #include <algorithm> #incl ...