css实现爱心立方体表白动画代码-html代码-BFW代码库

css实现爱心立方体表白动画代码

代码语言：html

所属分类：表白

代码描述：css实现爱心立方体表白动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
    
*{
	margin:0;
	padding:0;
}
body{
	background:#000;
	overflow:hidden;
}
.heart{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:100px;
	height:160px;
	margin: auto;
	transform-style:preserve-3d;
	perspective:800px;
	animation:rot 15s linear infinite;
}
@keyframes rot{
	from{transform:rotateY(0deg) rotateX(0deg)}
	to{transform:rotateY(360deg) rotateX(360deg)}
}
.rib{
	position:absolute;
	width:100px;
	height:160px;
	border:solid red;
	border-width:1px 1px 0 0;
	border-radius:50% 50% 0/40% 50% 0;
}
.cube{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:50px;
	height:50px;
	color:red;
	transform-style:preserve-3d;
	transform:translateZ(25px);
}
.cube div{
	position:absolute;
	width:50px;
	height:50px;
}
.cube div:nth-child(1){
	left:0;
	top:-50px;
	transform-orig.........完整代码请登录后点击上方下载按钮下载查看