富豪刑警富豪刑警修斯库界面效果实现

最新推荐文章于 2024-05-06 20:52:53 发布

白辞忧

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量313

点赞数 2

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_45833825/article/details/109004453

版权

前端时间富豪刑警看完了就像做个其中的ai 修斯库但是实力不够啊
只能先整个类似的页面效果玩玩了
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 600px;
			height: 300px;
			border: 1px solid red;
			margin-top: 49px;
			margin-left: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ECEAE4;
		}
		
		.yuan{
			background-color: #43E7D3;
			width: 200px;
			height:200px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			position: relative;
		}
		.yuan .left{
			height:50%;
			width: 5%;
			background-color: #FFFFFF;
			left: 20%;
			top: 25%;
		}
		
		@keyframes  mylinleft{
			25%{
				height: 20%;
			}
			50%{
				height:calc(50% - 40px);
				transform: translateY(10px);
			}
			75%{
				height:5%;
			}
			100%{
				height:40%;
				transform: translateY(-10px);
			}
		}
		@keyframes  mylinright{
			25%{
				height: 30%;
			}
			50%{
				height:calc(40% - 40px);
				transform: translateY(-10px);
			}
			75%{
				height:10%;
			}
			100%{
				height:30%;
			}
		}
		
		@keyframes  mylin1{
			25%{
				height: 75%;
			}
			50%{
				height:50%;
			}
			75%{
				height:25%;
			}
			100%{
				height: 80%;
			}
			
		}
		@keyframes  mylin3{
			25%{
				height: 80%;
			}
			50%{
				height:50%;
			}
			75%{
				height:85%;
			}
			100%{
				height: 30%;
			}
			
		}
		
		.yuan .left{
			animation: mylinleft 1s infinite linear;
		}
		.yuan .right{
			animation: mylinright 1s infinite linear;
		}
		
		
		.yuan .right{
			height:50%;
			width: 5%;
			background-color: #FFFFFF;
			
		
		}
		
		
		.yuan .center{
			width: 40%;
			height: 50%;
			
			margin: 0 5%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.yuan .center .item{
			height: 45%;
			position:relative;
		}
		.yuan .center .item>div{
			position: absolute;
		}
		.lin1{
			width:calc( 13% - 0.4px);
			height: 100%;
			background-color: #FFFFFF;
			left: 0;
			bottom: 0px;
			animation: mylin1 1s infinite linear;
			
		}
		.lin2{
			width: 100%;
			height:calc(20% + 1px);
			background-color: #FFFFFF;
			bottom: 0;
		}
		.lin3{
			width:calc( 13% - 0.4px);
			height: 100%;
			background-color: #FFFFFF;
			right: 0;
			bottom: 0px;
			animation: mylin3 1s infinite linear;
		}
		
		
		.item2{
			transform: rotateZ(180deg);
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="yuan">
			 <div class="left"></div>
			 <div class="center">
				 <div class="item item1">
					 <div class="lin1"></div>
					 <div class="lin2"></div>
					 <div class="lin3"></div>
				 </div>
				 <div class="item item2">
				 					 <div class="lin1"></div>
				 					 <div class="lin2"></div>
				 					 <div class="lin3"></div>
				 </div>
			 </div>
			 <div class="right"></div>
		</div>
	</div>
</body>
</html>在这里插入代码片

白辞忧

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
富豪刑警富豪刑警修斯库界面效果实现

前端时间富豪刑警看完了就像做个其中的ai 修斯库但是实力不够啊只能先整个类似的页面效果玩玩了<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
复制链接

扫一扫