css3动画创意

鼠标指向前：
在这里插入图片描述
鼠标指向后：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<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-color: #000000;
		}
		.square
		{
			position: relative;
			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 #FFFFFF;
			border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
			transition: 0.5s;
			animation: animate 6s linear infinite;
		}
		.square:hover span:nth-child(1)
		{
			border: none;
			background-color: #0000FF;
		}
		.square span:nth-child(2)
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 2px solid #FFFFFF;
			border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
			transition: 0.5s;
			animation: animate 4s linear infinite;
			z-index: 10;
		}
		.square:hover span:nth-child(2)
		{
			border: none;
			background-color: yellow;
		}
		.square span:nth-child(3)
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 2px solid #FFFFFF;
			border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
			transition: 0.5s;
			animation: animate2 10s linear infinite;
			
		}
		.square:hover span:nth-child(3)
		{
			border: none;
			background-color: red;
		}
		@keyframes animate{
			0%
			{
				transform: rotate(0deg);
			}
			100%
			{
				transform: rotate(360deg);
			}
		}
		@keyframes animate2{
			0%
			{
				transform: rotate(360deg);
			}
			100%
			{
				transform: rotate(0deg);
			}
		}
		.content{
			position: relative;
			padding: 40px 60px;
			color: black;
			text-align: center;
			transition: 0.5s;
			z-index: 1000;
		}
		.content a{
			position: relative;
			display: inline-block;
			margin-top: 10px;
			border: 2px solid black;
			padding: 6px 18px;
			text-decoration: none;
			color: black;
			font-weight: 600;
			border-radius: 73% 27% 44% 56%; / 49% 44% 56% 51%;
		}
		.content a:hover{
			background-color: #FFFFFF;
			color:  black;
		}
		</style>
	</head>
	<body>
		<div class="square">
			<span></span>
			<span></span>
			<span></span>
			<div class="content">
				<h2>hello</h2>
				<p>this is text</p>
				<a href="#">Read</a>
			</div>
		</div>
	</body>
</html>

动画效果还是挺好看的，可以改进。
有兴趣的朋友可以自己试一下。

————————————————————————————————————————————————
有问题，建议可以在评论区共同交流哦。

来源：CSDN

作者：LeslieCheung_

链接：https://blog.csdn.net/LeslieCheung_/article/details/104114800

标签

css3动画