css完成的动态项目

原创 于 2019-11-23 14:34:49 发布 · 175 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css动态王者荣耀 #王者荣耀

王者荣耀

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>王者荣耀</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="box">
			<div class="bordermax">
				<div class="bordermin">
					<p class="p01">让你秀起来</p>
					<p class="p02">跟我一起</p>
					<p class="p03">学习前端</p>
					<p class="p04">web秀</p>
				</div>
			</div>
			<div class="centen">
				<p class="centen-top"></p>
				<div class="left">
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
				</div>
				<div class="center">
					<img src="img/wzry.jpg"/>
				</div>
				<div class="right">
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
					<div class="border-anim2" id="border">
						<div class="border-anim-content">
							<img src="img/wzry.jpg"/>
						</div>
						<div class="border-anim2-edge border-anim2-left"></div>
						<div class="border-anim2-edge border-anim2-top"></div>
						<div class="border-anim2-edge border-anim2-right"></div>
						<div class="border-anim2-edge border-anim2-bottom"></div>
					</div>
				</div><br />
				<p class="centen-bottom"></p>
			</div>
		</div>
	</body>
</html>

css内容

*{
	padding: 0;
	margin: 0;
	list-style: none;
	box-sizing: content-box;
}
.box{
	position: relative;
	width: 1014px;
	height:414px;
	/*径向渐变*/
	background-image: radial-gradient(circle at 50% 50%, #AAAEB7,#181E52);
	padding: 0.1px;	
}
.bordermax{
	width: 288px;
	height: 288px;
	border: 3px solid #859bcc;
	transform: rotate(45deg);
	margin: 60px auto;
	padding: 0.1px;
	animation: tran 5s linear infinite;
}
@-webkit-keyframes tran{
 
		0%{-webkit-transform:rotate(0deg);}
 
		25%{-webkit-transform:rotate(90deg);}
 
		50%{-webkit-transform:rotate(180deg);}
 
		75%{-webkit-transform:rotate(270deg);}
 
		100%{-webkit-transform:rotate(360deg);}
 
}
.bordermin{
	width: 270px;
	height: 270px;
	border: 1px solid #859bcc;
	transform: rotate(90deg);
	margin:8px ;
}
.p01{
	width: 270px;
	height: 50px;
	background: linear-gradient(to top,transparent,#859bcc);
	transform: rotate(180deg);
	margin-top: 220px;
	color: #f0fbff;
	text-align: center;
	letter-spacing: 5px;
	line-height: 30px;
}
.p02{
	width: 270px;
	height: 50px;
	background: linear-gradient(to top,transparent,#859bcc);
	transform: rotate(90deg);
	margin: -160px 0px 0px 110px;
	color: #f0fbff;
	text-align: center;
	letter-spacing: 5px;
	line-height: 30px;
}
.p03{
	width: 270px;
	height: 50px;
	background: linear-gradient(to top,transparent,#859bcc);
	transform: rotate(270deg);
	margin: -50px 0px 0px -110px;
	color: #f0fbff;
	text-align: center;
	letter-spacing: 5px;
	line-height: 30px;
}
.p04{
	width: 270px;
	height: 50px;
	background: linear-gradient(to top,transparent,#859bcc);
	transform: rotate(360deg);
	margin-top: -160px;
	color: #f0fbff;
	text-align: center;
	letter-spacing: 5px;
	line-height: 30px;
}
.centen{
	position: absolute;
	top: 142px;
	width: 1014px;
	height: 150px;	
	background: rgba(33,45,71,0.5);
}
.left{
	float: left;
	margin: 21px 0;
	width: 400px;
	height: 72px;
}
.left:after,
.right:after
.center:after{
     content:".";        
     display:block;        
     height:0;        
     clear:both;        
     visibility:hidden; 
}
.right{
	float: right;
	margin: 21px 0;
	width: 400px;
	height:82px;
}
.center{
	float: left;
	width: 137px;
	height: 137px;
	border: 3px solid transparent;
	border-image: linear-gradient(to top, transparent,#0a7d81); 
	box-shadow: 0px 0px 10px 7px #70bbf5;
    border-image-slice:1;  
	transform: rotate(45deg);
	margin: -10px 0px 0px 35px;
	animation: centen 5s linear infinite;
}
@-webkit-keyframes centen{
 
		0%{-webkit-transform:rotate(360deg);}
 
		25%{-webkit-transform:rotate(270deg);}
 
		50%{-webkit-transform:rotate(180deg);}
 
		75%{-webkit-transform:rotate(90deg);}
 
		100%{-webkit-transform:rotate(0deg);}
 
}
.center>img{	
	width: 137px;
	height: 137px;
}

/*上下流光*/
.centen-top{
				width:200px;
				height: 7px;
				background-image: radial-gradient(circle at 50% 50%,#7C91D0,#4D6490,transparent);
				animation: progress 2s infinite linear;
			}
			@keyframes progress{
				from{
					width: 0%;
					
				}
				to{
					width: 100%;
				}
			}
			.centen-bottom{
				width:200px;
				height: 7px;
				background-image: radial-gradient(circle at 50% 50%,#7C91D0,#4D6490,transparent);
				position: absolute;
				bottom:0px;
				right: 0px;
				animation: progress 2s infinite linear;
			}

/*图片四周的流动边框*/
:root {
				--border-anim-size: 10em;
				--border-anim-width: calc(var(--border-anim-size) / 20);
				--border-anim-width-double: calc(var(--border-anim-width)*2);
				--border-anim-duration: 5s;
				--border-anim-border-color:dodgerblue;
				--border-anim-hover-color: blue;
			}
			.border-anim {
	width: var(--border-anim-size);
	height: var(--border-anim-size);
	position: relative;
	border: 1px solid  var(--border-anim-border-color);
}
.border-anim::before, .border-anim::after {
	content: '';
	position: absolute;
	border: var(--border-anim-width) solid var(--border-anim-border-color);
	/* 让边框在内容区域内绘制 */
	box-sizing: border-box;
	transition: background-color 1s;
}
.border-anim::before {
	animation: anim-border-run calc(var(--border-anim-duration) * 2) linear infinite;
}
.border-anim::after {
	animation: anim-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;
}
.border-anim:hover::before, .border-anim:hover::after {
	background-color: var(--border-anim-hover-color);
}
.border-anim-content {
	width: calc(100% - var(--border-anim-width-double));
	height: calc(100% - var(--border-anim-width-double));
	margin: var(--border-anim-width);
	border: 1px solid var(--border-anim-border-color);
}
.border-anim2 {
	width: var(--border-anim-size);
	height: var(--border-anim-size);
	position: relative;
	border: 1px solid var(--border-anim-border-color);
}
.border-anim2-edge {
	position: absolute;
	/* 必须把其他边框置0，否则有默认值存在 */
	border: 0px solid var(--border-anim-border-color);
	box-sizing: border-box;
}
.border-anim2:hover > .border-anim2-edge {
	background-color: var(--border-anim-hover-color);
}
.border-anim2-left {
	width: var(--border-anim-width-double);
	height: 100%;
	left: 0;
	border-left-width: var(--border-anim-width);
	animation: anim2-border-run-left var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;
}
.border-anim2-top {
	height: var(--border-anim-width-double);
	width: 100%;
	top: 0;
	border-top-width: var(--border-anim-width);
	animation: anim2-border-run-top var(--border-anim-duration) linear infinite;
}
.border-anim2-right {
	width: var(--border-anim-width-double);
	height: 100%;
	right: 0;
	border-right-width: var(--border-anim-width);
	animation: anim2-border-run-right var(--border-anim-duration) calc(var(--border-anim-duration) / -2) linear infinite;
}
.border-anim2-bottom {
	height: var(--border-anim-width-double);
	width: 100%;
	bottom: 0;
	border-bottom-width: var(--border-anim-width);
	animation: anim2-border-run-bottom var(--border-anim-duration) linear infinite;
}
@keyframes anim2-border-run-left {
	from, to {
		height: 0;
	}
	50% {
		height: 100%;
	}
	from, to, 49.9% {
		top: 0;
		bottom: auto;
	}
	50%, 99.9% {
		top: auto;
		bottom: 0;
	}
}
@keyframes anim2-border-run-top {
	from, to {
		width: 0;
	}
	50% {
		width: 100%;
	}
	from, to, 49.9% {
		left: auto;
		right: 0;
	}
	50%, 99.9% {
		left: 0;
		right: auto;
	}
}
@keyframes anim2-border-run-right {
	from, to {
		height: 0;
	}
	50% {
		height: 100%;
	}
	from, to, 49.9% {
		top: auto;
		bottom: 0;
	}
	50%, 99.9% {
		top: 0;
		bottom: auto;
	}
}
@keyframes anim2-border-run-bottom {
	from, to {
		width: 0;
	}
	50% {
		width: 100%;
	}
	from, to, 49.9% {
		left: 0;
		right: auto;
	}
	50%, 99.9% {
		left: auto;
		right: 0;
	}
}
.border-anim-content>img{
	width:62px;
	height:66px;
}
#border{
	float: left;
	width: 78px;
	height:82px;
	background:white;
}
念念欣欣
关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值