【ife】任务十二：学习CSS 3的新特性

最新推荐文章于 2021-06-21 13:00:02 发布

筱葭

最新推荐文章于 2021-06-21 13:00:02 发布

阅读量516

点赞数 1

CC 4.0 BY-SA版权

文章标签：百度前端技术学院 ife HTML CSS

本文链接：https://blog.youkuaiyun.com/zhouziyu2011/article/details/53836779

本文介绍了一种使用CSS实现的动画效果及表格样式的详细方法。通过关键帧动画实现元素宽度变化，同时利用CSS选择器为表格行设置不同背景色，并确保文字颜色突出显示。此外还展示了如何为输入框添加焦点动画。

table{
	border-collapse:collapse;
	margin:20px;
}
tr:nth-child(odd){
	background:grey;
}
tr:first-child{
	background:black;
	color:white;
}
tr:nth-child(2),tr:nth-child(3),tr:nth-child(4){
	color:red;
}
@keyframes myAnimation{
	from{width:200px;}
    to{width:400px;}
}
input:focus{
	animation:myAnimation 5s;
}
#move1{
	position:absolute;
	bottom:0;
	left:240px;
	width:20px;
	height:20px;
	background:grey;
	color:white;
	text-align:center;
	font-family:Microsoft Yahei;
	animation:change1 10s ease-out infinite;
}
#move2{
	position:absolute;
	bottom:0;
	left:260px;
	width:20px;
	height:20px;
	background:grey;
	color:white;
	text-align:center;
	font-family:Microsoft Yahei;
	animation:change2 10s ease-out infinite;
}
#move3{
	position:absolute;
	bottom:0;
	left:280px;
	width:20px;
	height:20px;
	background:grey;
	color:white;
	text-align:center;
	font-family:Microsoft Yahei;
	animation:change3 10s ease-out infinite;
}
#frame{
	position:absolute;
	margin-top:20px;
	width:300px;
	height:200px;
	overflow:hidden;
}
#photos img{
	float:left;
	width:300px;
	height:200px;
}
#photos{
	position:relative;
	width:900px; 
	animation:actions 10s ease-out infinite;
}
@keyframes actions{
	0%,30%{        
		margin-left:0px;
	}
	35%,65%{       
		margin-left:-300px; 
	}
	70%,100%{      
		margin-left:-600px;    
	}
}
@keyframes change1{
	0%,30%{        
		background:red;
	}
	35%,65%{       
		background:grey;
	}
	70%,100%{      
		background:grey;  
	}
}
@keyframes change2{
	0%,30%{        
		background:grey;
	}
	35%,65%{       
		background:red;
	}
	70%,100%{      
		background:grey;  
	}
}
@keyframes change3{
	0%,30%{        
		background:grey;
	}
	35%,65%{       
		background:grey;
	}
	70%,100%{      
		background:red;  
	}
}