2020下半年CSS课程总结
下半学期学的主要是CSS3
CSS3是最新的CSS规则,主要包含了边框、背景、文本效果、字体、
2D、3D动画效果和过渡效果。
重点是过渡效果和动画效果的应用,我用两个代码块分别举例一下
过渡效果
#Id{
opacity:1;
transition: opacity 1s;
}
#Id:hover{
opacity:0;
}
这个代码块可以使被悬浮的对象在一秒内逐渐变得透明且不可见。需要注意的细节是:
- 要设置与元素不同的样式效果
- 要设置触发条件
- 用简写(transition)设置时不能跳过值书写,必须按顺序书写
2D动画效果
body{
background-color:#00ffe4;
animation: BGC 5s linear 0s 999 alternate;
-moz-animation: BGC 5s linear 0s 999 alternate;
-webkit-animation: BGC 5s linear 0s 999 alternate;
}
@-keyframes BGC
{
0% {background-color:#00ff88;}
50% {background-color: #00ffe4;}
100% {background-color: #00fe6b;}
}
@-moz-keyframes BGC /* Firefox */
{
0% {background-color:#00f