css grid布局动画

最新推荐文章于 2023-08-01 17:53:40 发布

逸曦穆泽

最新推荐文章于 2023-08-01 17:53:40 发布

阅读量208

点赞数

分类专栏： web前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_41408081/article/details/131126668

版权

web前端专栏收录该内容

65 篇文章 2 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <style>
	    .content{
		    width: 300px;
		    height: 300px;
		    margin: 39px auto;
		    display: grid;
		    grid-template-columns: repeat(3,1fr);
		    grid-template-rows: repeat(3,1fr);
		    grid-template: 
			    "A A B"
			    "C D B"
			    "C E E"
		    ;
		    gap: 5px;
		    --r: 360deg;
	    }
	    .item{
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    overflow: hidden;
		    border: 2px solid;
		    border-radius: 20%;
	    }
    	.item:nth-child(1){
		    grid-area: A;
	    }
	    .item:nth-child(2){
	    	grid-area: B;
	    }
	    .item:nth-child(3){
	    	grid-area: C;
	    }
	    .item:nth-child(4){
	    	grid-area: D;
	    }
	    .item:nth-child(5){
	    	grid-area: E;
	    }
	    .image{width: 240px;height: 240px;--r: -360deg;}
	    .content,.image{
		    animation: rotation 5s linear infinite;
	    }
	    @keyframes rotation {
		    to{
		    	transform: rotate(var(--r));
		    }
	    }
    </style>
  </head>
  <body>
	<div class="content">
		<div class="item">
			<img class="image" src="https://image.happyacomma.top/images/2022/12/22/1.jpg" alt="1"/>
		</div>
		<div class="item">
			<img class="image" src="https://image.happyacomma.top/images/2022/12/22/2.jpg" alt="2"/>
		</div>
		<div class="item">
			<img class="image" src="https://image.happyacomma.top/images/2022/12/22/3.jpg" alt="3"/>
		</div>
		<div class="item">
			<img class="image" src="https://image.happyacomma.top/images/2022/12/22/4.jpg" alt="4"/>
		</div>
		<div class="item">
			<img class="image" src="https://image.happyacomma.top/images/2022/12/22/5.jpg" alt="5"/>
		</div>
	</div>
  </body>
</html>

旋转原理挺简单的，大的模块顺时针，小的模块逆时针，所以图片维持统一不转的状态