8种css3技术的hover动画效果

2019-09-12 郑州网站建设  

hover动画,简言之就是鼠标移上去触发的动画,就是触发了鼠标的hover事件时能看到的动画!

1.简单动画

html

<span class="ech-big">big</span><span class="ech-small">small</span>

css

.ech-big,.ech-small { transition: all .4s;

2形状变化

html

<span class="ech-skew-l">skew-l</span><span class="ech-skew-r">skew-r</span><span class="ech-skew-l-t">skew-l-t</span><span class="ech-skew-r-t">skew-r-t</span><span class="ech-skew-l-b">skew-l-b</span><span class="ech-skew-r-b">skew-r-b</span>

css

.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{ transition: all .4s;

3旋转角度变化

html

<span class="ech-grow-rotate-l">grow-rotate-l</span><span class="ech-grow-rotate-r">grow-rotate-r</span><span class="ech-rotate5">rotate5</span><span class="ech-rotate15">rotate15</span><span class="ech-rotate30">rotate30</span><span class="ech-rotate60">rotate60</span><span class="ech-rotate90">rotate90</span><span class="ech-rotate180">rotate180</span><span class="ech-rotate360">rotate360</span><span class="ech-rotate-5">rotate-5</span><span class="ech-rotate-15">rotate-15</span><span class="ech-rotate-30">rotate-30</span><span class="ech-rotate-60">rotate-60</span><span class="ech-rotate-90">rotate-90</span><span class="ech-rotate-180">rotate-180</span>

css

.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{transition: all .4s;

4位移变化

html

<span class="ech-t">up</span>

css

.ech-t,.ech-bottom,.ech-top,.ech-right{ transition: all .4s;

5边框变化

html

<span class="ech-border">border</span>

css

.ech-border,.ech-border-in{ transition: all .4s;

6阴影变化

html

<span class="ech-shadow">shadow</span>

css

.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{ transition: all .4s;

7透明度变化

html

<span class="ech-fade-out">fade-out</span>

css

.ech-fade-out,.ech-fade-in{ transition: all .4s;

8圆角变化

html

<span class="ech-rectangle">rectangle</span><span class="ech-radius">radius</span>

css

.ech-radius,.ech-rectangle{ transition: all .4s;


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2029.html转载请标明出处,谢谢合作!
标签:
  • 动画
  • Ч
  • 8css3hover
  • hover
  • 简言之