创意css网格布局带动画效果

This is where I network and build my professional portfolio
_adamdipinto
Twitter

This is where I read news and network with different social groups
@AdamDipinto
Github

This is where I share code and work on projects
atom888
源码
<body>
	<div class="square linkedin"><span></span><span></span><span></span>
		<div class="content">
			<h2> LinkedIn</h2>
			<p>This is where I network and build my professional portfolio</p>
			<a href="#" target="_blank">_adamdipinto</a>
		</div>
	</div>
	<div class="square twitter"><span></span><span></span><span></span>
		<div class="content">
			<h2> Twitter</h2>
			<p>This is where I read news and network with different social groups</p>
			<a href="#" target="_blank">@AdamDipinto</a>
		</div>
	</div>
	<div class="square github"><span></span><span></span><span></span>
		<div class="content">
			<h2> Github</h2>
			<p>This is where I share code and work on projects</p>
			<a href="#" target="_blank">atom888</a>
		</div>
	</div>
</body>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Open Sans', sans-serif
	}
	body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: #f1f1f1;
	}
	.square {
		position: relative;
		margin: 0 10px;
		width: 400px;
		height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.square span:nth-child(1) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 2px solid black;
		border-radius: 32% 58% 69% 43% / 48% 32% 59% 55%;
		transition: 0.5s;
		animation: animate 6s linear infinite;
	}
	.linkedin:hover span:nth-child(1) {
		border: none;
		background: #f07e6e;
	}
	.twitter:hover span:nth-child(1) {
		border: none;
		background: #84cdfa;
	}
	.github:hover span:nth-child(1) {
		border: none;
		background: #5ad1cd;
	}
	.square span:nth-child(2) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 2px solid black;
		border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
		transition: 0.5s;
		animation: animate 4s linear infinite;
	}
	.linkedin:hover span:nth-child(2) {
		border: none;
		background: #f07e6e;
	}
	.twitter:hover span:nth-child(2) {
		border: none;
		background: #84cdfa;
	}
	.github:hover span:nth-child(2) {
		border: none;
		background: #5ad1cd;
	}
	.square span:nth-child(3) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 2px solid black;
		border-radius: 31% 45% 74% 35% / 38% 56% 51% 87%;
		transition: 0.5s;
		animation: animate2 10s linear infinite;
	}
	.linkedin:hover span:nth-child(3) {
		border: none;
		background: #f07e6e;
	}
	.twitter:hover span:nth-child(3) {
		border: none;
		background: #84cdfa;
	}
	.github:hover span:nth-child(3) {
		border: none;
		background: #5ad1cd;
	}
	.content {
		position: relative;
		padding: 40px 60px;
		color: #fff;
		text-align: center;
		transition: 0.5s;
		z-index: 1000;
	}
	
	.content a {
		position: relative;
		display: inline-block;
		margin-top: 10px;
		border: 2px solid #fff;
		padding: 6px 18px;
		text-decoration: none;
		color: #fff;
		font-weight: 600;
		border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
	}
	
	.content a:hover {
		background: white;
		color: #333;
	}
	
	@keyframes animate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	@keyframes animate2 {
		0% {
			transform: rotate(360deg);
		}
		100% {
			transform: rotate(0deg);
		}
	}
</style>
链接: https://fly63.com/course/33_1609