Html
    Css
    Js


* {
	margin:0;
	padding:0;
}
.home {
	min-width:521px;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.r {
	width:100%;
	height:62px;
	overflow:hidden;
	padding:0 1px;
	margin-top:-30px;
}
.r2 {
	width:110%;
	margin-left:-26px;
	margin-top:-18px;
}
.r3 {
	margin-top:-18px;
}
.a {
	width:50px;
	height:60px;
	transform:rotate(120deg);
	overflow:hidden;
	float:left;
	margin:1px;
}
.b,.c {
	width:100%;
	height:100%;
	transform:rotate(-60deg);
	overflow:hidden;
}
.c {
	background-color:#747474;
}
@keyframes myfirst {
	0% {
	background:#FF0000;
}
16% {
	background:#FF7D00;
}
33% {
	background:#FFFF00;
}
48% {
	background:#00FF00;
}
64% {
	background:#00FFFF;
}
82% {
	background:#0000FF;
}
100% {
	background:#FF00FF;
}
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

移入移出(原创)

更新时间:2020-09-22 21:11:22

可根据自己的喜好调动画效果跟颜色

1
      ? Vinson丶0
      2020/9/27 1:38:57
      这个创意很不错,利用动画时间来制造出色彩追龙的效果,nice 回复