简单写一下css2d动画效果

最新推荐文章于 2024-03-31 00:46:26 发布

雕琢时光纸戆

最新推荐文章于 2024-03-31 00:46:26 发布

阅读量244

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102491346

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>科技</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				
			}
			html,body{
				height: 100%;
				widows: 100%;
				
			}
			.box{
				overflow: hidden;
				height: 100%;
				width: 100%;
				/*background-color: red;*/
				animation: gradation 15s infinite;
				display: flex;
			}
			@keyframes gradation {
				0%{
					background-color: red;
				}
				12.9%{
					background-color: #fbc2eb;
				}
				34.5%{
					background-color: #fad0c4;
				}
				66%{
					background-color: #ffd1ff;
				}
				79%{
					background-color: #ffecd2;
				}
				88%{
					background-color: #fdcbf1;
				}
				100%{
					background-color: #d4fc79;
				}
			}
			.box .photos{
				overflow: hidden;
				align-items: center;
				margin: 0px auto;
				display: flex;
				animation: gradation1 5s infinite;
				
			}
			@keyframes gradation1{
				0%{
					transform: rotate(0deg);
				}
				30%{
					transform: rotate(50deg);
					
				}
				60%{
					transform: rotate(560deg);
				}
				100%{
					transform: rotate(0deg);
				}
			}
			.box .photos img{
				
				height: 300px;
				width: 300px;
			  
		
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="photos">
				<img src="img/b91a258c823d715c62521fada8510abe.png"/>
			</div>
		</div>
	</body>
</html>