在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了,是时候开始封装css3的代码库了,相比起js的代码库,css3的代码库的逻辑性就更加简单了!可以说只要打上注释和一张效果图就可以让大家明白了其中的原理了! 我写代码库的时候,动画效果主要是参考了三个开源项目:
nec(http://nec.netease.com/library/category/#animation)
hover.css(https://ianlunn.github.io/Hover/)
animate.css(https://daneden.github.io/animate.css/)
这三个项目的质量非常的高,建议大家去了解。
源码已经放到github上面了,大家可以去看,也欢迎大家star一下:
ec-css(https://github.com/chenhuiYj/ec-css)
我指出这三个库并不是叫大家去拿别人的代码,稍微修改一下,或者直接拷贝到自己的项目上,然后就说是自己的项目。我是让大家去看别人的代码,学习别人的实现方式或者动画效果,然后再用自己的方式实现,当然如果把别人的项目,增删改查到面目全非的地步,这个我个人觉得可以说是自己的项目了!强调一点,不要直接复制别人的代码,放到自己的项目上,然后说是自己开发的,这是不尊重别人的成果,对自己的技术水平提升的帮助也较少。我写文章,虽然也会给出代码,但是我的目的是提供大家参考的,希望给让大家学习到知识或者发散思维,写出更好的作品。之前也说过,我写文章的目的是授人以渔,不是授人以鱼。
声明:
1.下面将会看到很多个 demo-text
类似这样的举例,都是span标签,样式都是给出的css
span {
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
color: #333;
background: #ccc;
min-width: 80px;
padding: 0 10px;
margin: 10px;
}
2.关于class命名方式, l
代表 left
, r
代表 right
, t
代表 top
, b
代表 bottom
, c
代表 center
, m
代表 middle
。切记
文章比较长,但是说得就是两点,大家看得也应该会很快 1.写出一些hover动画和预设动画的运行效果,并且贴出代码 2.发现几个动画组合,和加上无限动画,反向动画,会有不一样的效果,并且继续研究,看下能不能研究出不一样的东西!
说了那么多,是时候进入正文了,
首先是hover动画,关于这个概念,我解释下,就是鼠标移上去触发的动画,就是触发了鼠标的hover事件时能看到的动画!下面,按照类型,一个一个的写!
html
<span class="ech-big">big</span>
<span class="ech-small">small</span>
css
.ech-big,.ech-small {
transition: all .4s;
}
.ech-big:hover {
transform: scale(1.2);
}
.ech-small:hover {
transform: scale(.9);
}
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;
}
.ech-skew-r-t, .ech-skew-l-t {
transform-origin: 0 100%;
}
.ech-skew-r-b, .ech-skew-l-b {
transform-origin: 100% 0;
}
.ech-skew-l:hover {
transform: skew(-15deg);
}
.ech-skew-r:hover {
transform: skew(15deg);
}
.ech-skew-l-t:hover {
transform: skew(-15deg);
}
.ech-skew-r-t:hover {
transform: skew(15deg);
}
.ech-skew-l-b:hover {
transform: skew(15deg);
}
.ech-skew-r-b:hover {
transform: skew(-15deg);
}
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;
}
.ech-grow-rotate-l:hover {
transform: scale(1.1) rotate(4deg);
}
.ech-grow-rotate-r:hover {
transform: scale(1.1) rotate(-4deg);
}
.ech-rotate-5:hover {
transform: rotate(-5deg);
}
.ech-rotate-15:hover {
transform: rotate(-15deg);
}
.ech-rotate-30:hover {
transform: rotate(-30deg);
}
.ech-rotate-60:hover {
transform: rotate(-60deg);
}
.ech-rotate-90:hover {
transform: rotate(-90deg);
}
.ech-rotate-180:hover {
transform: rotate(-180deg);
}
.ech-rotate5:hover {
transform: rotate(5deg);
}
.ech-rotate15:hover {
transform: rotate(15deg);
}
.ech-rotate30:hover {
transform: rotate(30deg);
}
.ech-rotate60:hover {
transform: rotate(60deg);
}
.ech-rotate90:hover {
transform: rotate(90deg);
}
.ech-rotate180:hover {
transform: rotate(180deg);
}
.ech-rotate360:hover {
transform: rotate(360deg);
}
html
<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>
css
.ech-t,.ech-bottom,.ech-top,.ech-right{
transition: all .4s;
}
.ech-t:hover {
transform: translate3d(0, -10px, 0);
}
.ech-b:hover {
transform: translate3d(0, 10px, 0);
}
.ech-l:hover {
transform: translate3d(-10px, 0, 0);
}
.ech-r:hover {
transform: translate3d(10px, 0, 0);
}
html
<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>
css
.ech-border,.ech-border-in{
transition: all .4s;
}
.ech-border:hover {
box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}
.ech-border-in:hover {
box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}
(gif图看得效果太难看了,大家可以去github下载看)
html
<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-write">shadow-write</span>
<span class="ech-shadow-big">shadow-big</span>
css
.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
transition: all .4s;
}
.ech-shadow:hover {
box-shadow: 0 0 10px #333;
}
.ech-shadow-in:hover {
box-shadow: inset 0 0 10px #333;
}
.ech-shadow-write:hover {
box-shadow: inset 0 0 20px #fff;
}
.ech-shadow-big:hover {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}
html
<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>
css
.ech-fade-out,.ech-fade-in{
transition: all .4s;
}
.ech-fade-out:hover {
opacity: .6;
}
.ech-fade-in {
opacity: .5;
}
.ech-fade-in:hover {
opacity: 1;
}
html
<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>
css
.ech-radius,.ech-rectangle{
transition: all .4s;
}
.ech-radius {
border-radius: 10px;
}
.ech-radius:hover {
border-radius: 0;
}
.ech-rectangle:hover {
border-radius: 10px;
}
这部分的动画主要是利用 :before
和 :after
进行实现的,所以,大家如果使用的时候,切记 :before
和 :after
没有被占用,否则会显示不正常
这里也是一大块一起说,看代码可能会更乱,所以大家看代码的时候要更加留神注意。看代码看不明白,直接在github下载,然后运行文件,边调试边看效果!这样大家就很容易明白了!
html
<span class="ech-overline-l">overline-l</span>
<span class="ech-overline-r">overline-r</span>
<span class="ech-underline-l">underline-l</span>
<span class="ech-underline-r">underline-r</span>
<span class="ech-underline-c">underline-c</span>
<span class="ech-underline-c-out">underline-c-out</span>
<span class="ech-overline-c">overline-c</span>
<span class="ech-overline-c-out">overline-c-out</span>
css
/*上划线和下划线变化 当前元素样式设置相对定位*/
.ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{
position: relative;
transition: all .3s;
z-index: 1;
}
/*初始化:after:before大小和绝对定位*/
.ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before {
position: absolute;
transition: all .3s;
content: "";
display: block;
background: #09f;
z-index: -1;
height: 4px;
width: 100%;
transform: scaleX(0);
}
/*上划线 左右出来*/
.ech-overline-r:before {
top: 0;
left: 0;
transform-origin: 100% 50%;
}
.ech-overline-l:before {
top: 0;
right: 0;
transform-origin: 0 50%;
}
/*下划线 左右出来*/
.ech-underline-r:before {
bottom: 0;
left: 0;
transform-origin: 100% 50%;
}
.ech-underline-l:before {
bottom: 0;
right: 0;
transform-origin: 0% 50%;
}
/**上划线 下划线 居中进来**/
.ech-overline-c:before {
top: 0;
transform-origin: 0 50%;
}
.ech-overline-c:after {
top: 0;
transform-origin: 100% 50%;
}
.ech-underline-c:before {
bottom: 0;
transform-origin: 0 50%;
}
.ech-underline-c:after {
bottom: 0;
transform-origin: 100% 50%;
}
.ech-overline-c:before, .ech-underline-c:before {
left: 0;
}
.ech-overline-c:after, .ech-underline-c:after {
right: 0;
}
/*上划线 下划线-居中出去 */
.ech-overline-c-out:before {
top: 0;
left: 0;
right: 0;
margin: auto;
}
.ech-underline-c-out:before {
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*hover效果*/
.ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before {
transform: scaleX(.51);
}
.ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before {
transform: scaleX(1);
}
html
<span class="ech-arrow-l">arrow-l</span>
<span class="ech-arrow-r">arrow-r</span>
<span class="ech-arrow-t">arrow-t</span>
<span class="ech-arrow-b">arrow-b</span>
<span class="ech-arrow-l-move">arrow-l</span>
<span class="ech-arrow-r-move">arrow-r</span>
<span class="ech-arrow-t-move">arrow-t</span>
<span class="ech-arrow-b-move">arrow-b</span>
css
.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{
position: relative;
transition: all .3s;
z-index: 1;
}
/*初始化箭头样式*/
.ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before {
position: absolute;
transition: all .3s;
content: "";
display: block;
z-index: -1;
border-style: solid;
margin: auto;
width: 0;
height: 0;
}
.ech-arrow-l:before, .ech-arrow-l-move:before {
left: 0;
top: 0;
bottom: 0;
border-width: 10px 10px 10px 0;
border-color: transparent #ccc transparent transparent;
}
.ech-arrow-r:before, .ech-arrow-r-move:before {
right: 0;
top: 0;
bottom: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #ccc;
}
.ech-arrow-t:before, .ech-arrow-t-move:before {
left: 0;
top: 0;
right: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #ccc transparent;
}
.ech-arrow-b:before, .ech-arrow-b-move:before {
left: 0;
bottom: 0;
right: 0;
border-width: 10px 10px 0 10px;
border-color: #ccc transparent transparent transparent;
}
.ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move {
transition: transform .3s;
}
/*hover效果*/
.ech-arrow-l-move:hover {
transform: translateX(10px);
}
.ech-arrow-r-move:hover {
transform: translateX(-10px);
}
.ech-arrow-t-move:hover {
transform: translateY(10px);
}
.ech-arrow-b-move:hover {
transform: translateY(-10px);
}
.ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before {
transform: translateX(-10px);
}
.ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before {
transform: translateX(10px);
}
.ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before {
transform: translateY(-10px);
}
.ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before {
transform: translateY(10px);
}
2-1和2-2的内容,都是利用过渡实现效果,那么这一块就是利用动画来实现效果!区别就是hover的写法是增加一个动画,动画的封装,难度就在于创意。
html
<span class="ech-flash">flash</span>
css
.ech-flash:hover {
animation: flash .5s ease;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
html
<span class="ech-shake-time">shake-time</span>
css
/*仿闹钟振铃效果*/
.ech-shake-time:hover {
animation: shake-time 1s ease;
}
@keyframes shake-time {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
html
<span class="ech-wobble-c">wobble-c</span>
<span class="ech-wobble-t">wobble-t</span>
<span class="ech-wobble-b">wobble-b</span>
css
.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t {
transform-origin: 0 100%;
}
.ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b {
transform-origin: 100% 0;
}
.ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover {
animation: wobble-x 1s ease-in-out;
}
@keyframes wobble-x {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
html
<span class="ech-swing">swing</span>
css
.ech-swing:hover {
animation: swing .5s ease alternate;
}
@keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
html
<span class="ech-shake">shake</span>
css
.ech-shake:hover {
animation: shake .5s ease;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
2-3-6弹跳效果
html
<span class="ech-bounce">bounce</span>
css
.ech-bounce:hover {
animation: bounce 1s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
4.未知探索
好了,说完了hover动画和预设动画,我开发的时候,发现了这样一些好玩的东西,我也准备继续研究,也建议大家玩下,说不定哪天做出了了不起的东西!如下面的栗子!
下面说的动画,不分hover动画和预设动画,大家注意
一个普通的动画,加上无限执行,一般会出现很友好的效果,
但是有些时候的效果差强人意
在4-1的基础上,加上方向执行动画,也会有不一样的效果
没加反向动画效果
加上反向动画效果
阴影效果和其它效果的组合,(gif看不出阴影效果,哎。。)
上面的几个的栗子,css代码不变,区别是html代码,多加了一些类名。
上面几个是我在开发时候发现的栗子,这个我会继续研究,也希望大家能研究,研究出什么好玩的效果,或者动画写法,欢迎分享!
在写css3代码库的时候,我也发现封装css3的一个鸡肋情况。
但是最后我还是坚持写下去了,原因如下:
好了,css3的代码库封装到这里就差不多了,如果你能看完全篇,你已经是勇士了,证明你很有耐心,看完马上掌握,这个对于大家来说问题不大,毕竟不是什么逻辑性强的代码。我想要的效果虽然都实现了,不过以后肯定也是要修改完善的(至少看源码的话,我自己看得都有点乱,但是一时之间又不知道该如果整理,就先放上去了)。话说回来,通过以上的案例,希望能帮到大家,最理想就是能起到发散思维的作用,就是通过我的案例,能让大家知道其它的一些动画怎么做,或者想到有什么好看动画效果。web前端这一行,最重要的就是多练,大家除了看别人的项目,博客之外,一定要多练,多写,这样进步才会更快,知识才会记得更牢。
最后,如果大家觉得我哪里写得不好或者写错了,欢迎指出。有什么好的想法,随时给您宝贵的建议我!项目我也放到github上面了!有需要的可以去看下,star下ec-css(https://github.com/chenhuiYj/ec-css)!