css实现四角爱心浮动漂浮表白动画效果代码-html代码-BFW代码库

css实现四角爱心浮动漂浮表白动画效果代码

代码语言：html

所属分类：表白

代码描述：css实现四角爱心浮动漂浮表白动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {  background: #f3f3f3;}.world {  position: absolute;  margin:auto;  left:0;  right:0;  top:0px;  bottom:0;  width:800px;  height:200px;}a {  position: relative;  letter-spacing: 2px;  font-family: "verdana";  font-size: 12px;  color: #F48FB1;  text-decoration: none;}/* BASIC CUBE CREATION *//* BASIC CUBE CREATION *//* BASIC CUBE CREATION */.box {  position:absolute;  margin:auto;  left:0;  right:0;  top:0;  bottom:0;  width: 100px;  height: 100px;  animation: rotate 5s ease-in-out infinite;  transform-style: preserve-3d;}.box:nth-of-type(1) {  animation-delay:-5s;  left:-600px;}.box:nth-of-type(2) {  animation-delay:-4s;  left:-300px;}.box:nth-of-type(3) {  animation-delay:-3s;  left:0px;}.box:nth-of-type(4) {  animation-delay:-2s;  left:300px;}.box:nth-of-type(5) {  animation-delay:-1s;  left:600px;}.plane1, .plane2 {  position: absolute;  opacity:0.8;}.plane2 {  transform: rotateY(90deg);}.heart {  background-color: pink;  height: 50px;  transform: rotate(-45deg);  width: 50px;}.heart:before {  content: "";  background-color: pink;  border-radius: 100%;  height: 50px;  position: absolute;  width: 50px;  top:-25px;}.heart:after {  content: "";  background-color: pink;  border-radius: 100%;  height: 50px;  position: absolute;  width: 50px;  top:0px;  left:25px;}/* Rotation animation to actually see the cube */@keyframes rotate {  0% {    transform: rotateY(0deg) rotateZ(25deg) translateY(50px);  }  50% {    transform: rotateY(270deg) rotateZ(25deg) translateY(-50px);  }  100% {    transform: rotateY(360deg) rotateZ(25deg) translateY(50px);  }}
</style>
</head>

<body>
.........完整代码请登录后点击上方下载按钮下载查看