CSS动画效果2

最新推荐文章于 2024-07-29 14:14:21 发布

Bear

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量632

点赞数

分类专栏： HTML与CSS 文章标签： css 动画

本文链接：https://blog.csdn.net/bear_huangzhen/article/details/101863781

版权

本文介绍了多个CSS动画效果，包括嫦娥奔月、多种Loading动画、折角效果和钟摆效果，还展示了如何通过组合动画实现更复杂的视觉效果。

摘要由CSDN通过智能技术生成

示例1（嫦娥奔月）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>嫦娥奔月</title>
		<style type="text/css">
			body{
				background-color: #000;
			}
			
			#moon{
				margin: 50px auto;
				width: 400px;
				height: 400px;
				background-image: url(img/moon.png);
				background-size: cover;
				border:15px solid #eee;
				cursor: pointer;
			}
			
			#ce{
				width: 250px;
				height: 250px;
				background-image: url(img/ce.png);
				background-size: cover;  /*看到图像全貌*/
				opacity: 0;              /*完全透明看不见*/
				transform: translate(-65px,-65px);  /*左移65，上移65*/
				transition: all .5s linear;
			}
			
			#moon:hover #ce{
				transform: translate(0px,0px); /*原位不动*/
				opacity: 1;  /*完全不透明*/
			}
			
		</style>
	</head>
	<body>
		
		<div id="moon">
			<div id="ce"></div>
		</div>
		
	</body>
</html>

示例2（Loading动画）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Loading动画</title>
		<style type="text/css">
			body{
		  		color: #fff;
		  		background: #222;
			}
			
			.spinner{
			  width:80px;
			  height:50px;
			  margin:100px auto;
			  text-align:center;
			}
			
			.spinner>div{
			  display:inline-block;
			  width:6px;
			  height:100%;
			  background:green;
			  animation: strechdelay 1.2s infinite ease-in-out ;
			}
			
			.spinner .line1{
				animation-delay: -1.2s; /*提前1.2s开始动画*/
			}
			
			.spinner .line2{
				animation-delay: -1.1s;  /*提前1.1s开始动画*/
			}
			
			.spinner .line3{
				animation-delay: -1.0s;  /*提前1.0s开始动画*/
			}
			
			.spinner .line4{
				animation-delay: -0.9s;  /*提前0.9s开始动画*/
			}
			
			.spinner .line5{
				animation-delay: -0.8s;  /*提前0.8s开始动

最低0.47元/天解锁文章

Bear

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS动画效果2

示例1（嫦娥奔月）：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>嫦娥奔月</title> <style type="text/css"> body{ background-color: #000; ...
复制链接

扫一扫

专栏目录