虽说立志成为一个顶呱呱的全栈工程师,但是在前端方面的涉猎其实是很少的,要说对js的学习还是因为要用nodejs的缘故,总有些本末倒置的感觉。
最近专业内部的大实习是要做一个志愿者银行系统,我们的三人组采用纵向分工的方法,这样有利于大家在每个环节都能参与到。不过在快收尾的时候,界面严重不统一,作为处女座怎么能熟视无睹呢,于是立即上马前端进行大幅修改。
俗话说,磨刀不误砍柴工,对css深入学习是很有必要的。学习的过程中有很多启发,于是就有了这篇文章。
--------------------------------以上都是废话-----------------------------------------
值 | 描述 |
---|---|
transition-property | 设置过渡效果的 CSS 属性的名称 |
transition-duration | 设置完成过渡效果需要多少秒或毫秒 |
transition-timing-function | 设置速度效果的速度曲线 |
transition-delay | 设置过渡效果何时开始 |
css动画的核心在于使用好transition和animation。
我们先来看看transition的各项属性
值 | 描述 |
---|---|
transition-property | 设置过渡效果的 CSS 属性的名称 |
transition-duration | 设置完成过渡效果需要多少秒或毫秒 |
transition-timing-function | 设置速度效果的速度曲线 |
transition-delay | 设置过渡效果何时开始 |
transition的特点是需要一个触发,比如鼠标移入(:hover)等事件;
我们先举个栗子:
利用transition实现鼠标指针移到爱心上心就跳一下
先自己制作一个爱心的图片,格式不限,也可以使svg型的,比如这样

这里插一句
在CSS 3引入Transition之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。--- 参见阮一峰老师的博客
所以transition的作用在于,指定状态变化所需要的时间,这样显著增加了美感。
不过我们可以不用把每个属性都声明一遍,transition也提供简写的方式
下面的代码在鼠标移到后会花费1s的时间放大爱心
.heart{
height:500px;
width:500px;
transition:1s height, 1s width;
}
.heart:hover{
height: 800px;
width: 800px;
}
其实等同于
.heart{
transition-property: height,width
transition-duration: 1s;
}
测试结果可以点这里
于是我们引出animation,首先看一看animation和transition的不同
1、都可以定义开始和结束状态,但是animation还可以指定更为精确的中间状态
2、animation可以像transition一样被触发,也可自动运行
3、animation可以无限循环的运行,也可指定运行次数
下面我们一起实现真正的跳动的爱心
第一步利用keyframes关键字定义动画名称
keyframes beat_animation {
0% { transform: none; }
100% { transform: scale(1.3); }
}
上面的代码就是定义了动画的名字叫beat_animation, 动画是指变大为原来的1.3倍。利用transform可以做出很多漂亮的效果,这个大家自行谷歌就不多做介绍了。
animation需要指定动画一个周期持续的时间,以及动画效果的名称。
.heart {
animation: beat_animation 300ms infinite;
}
加入infinite关键字就可以让动画无限播放。因为默认情况下,动画只播放一次。
当然上面的代码也是简写
我们看看依次声明完整的属性所需要的代码是什么样
.heart {
animation-name: 'beat_animation';
animation-duration: 300ms;
animation-timing-function: linear;
}
这里要提醒大家前缀的重要性,目前,IE 10和Firefox支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀
所以上面的代码要修改成
.heart {
-webkit-animation-name: 'beat_animation';
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
}
最终效果请点这里
css就写这么多,很多内容也是学自阮一峰老师的博客,原创并不是很多,下次会写关于nodejs爬虫的文章,自己的知识点就会比较多。