HTML前端中实现动态页面-过渡效果和2D动画（附Xmind思维导图）

2020下半年CSS课程总结

下半学期学的主要是CSS3

	CSS3是最新的CSS规则，主要包含了边框、背景、文本效果、字体、
2D、3D动画效果和过渡效果。

重点是过渡效果和动画效果的应用，我用两个代码块分别举例一下

过渡效果

		#Id{
			opacity:1;
			transition: opacity 1s;
			}
		#Id:hover{
			opacity:0;
			}

这个代码块可以使被悬浮的对象在一秒内逐渐变得透明且不可见。需要注意的细节是：

1. 要设置与元素不同的样式效果
2. 要设置触发条件
3. 用简写（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