div+css实现小型自建流动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现小型自建流动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>


  
  
  
<style>
* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}
		
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000vmin;
	background: radial-gradient(circle at 50% 50%, #333, #021320);
	cursor: zoom-in;
}

body:active .scene {
    transform: scale3d(1.35, 1.35, 1.35);
    transition: all 1s ease 0s;
}

.scene {
    width: 50vmin;
    height: 50vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s ease 0s;
}

.content {
	width: 50vmin;
    height: 50vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateX(-27.25deg) rotateY(-48.75deg) rotateZ(0deg);
	transition: all 1s ease 0s;
    margin-top: -20vmin;
	animation: back-scene 1s linear 0s 1;
}

.content:hover {
	animation: spin-scene 20s linear 0s infinite;
}

@keyframes spin-scene {
	0% { transform: rotateX(-27.25deg) rotateY(-48.75deg) rotateZ(0deg); }
	100% { transform: rotateX(-27.25deg) rotateY(-408.75deg) rotateZ(0deg); }
}

@keyframes back-scene {
	0%, 100% { transform: rotateX(-27.25deg) rotateY(-48.75deg) rotateZ(0deg); }
	25% { transform: rotateX(-27.25deg) rotateY(-52.75deg) rotateZ(0deg); }
	50% { transform: rotateX(-27.25deg) rotateY(-46.75deg) rotateZ(0deg); }
	75% { transform: rotateX(-27.25deg) rotateY(-49.75deg) rotateZ(0deg); }
}

body:active .content {
	animation-play-state: paused;
}

.content:before {
    content: "";
    position: absolute;
    width: calc(100% + 4vmin);
    height: calc(100% + 4vmin);
    background: green;
    transform: rotateX(90deg) translateZ(-25.5vmin);
    border-radius: 1vmin;
    box-shadow: 0 0 1vmin 0 #0008 inset;
    background: 
		radial-gradient(#1c8820 12%, transparent 18%) 0px 0, 
		radial-gradient(#4caf5080 12%, transparent 18%) 3px 4px, 
		radial-gradient(#ffffff40 12%, transparent 23%) 0 1px, 
		radial-gradient(#ffffff30 12%, transparent 23%) 2px 3px;
    background-color: #298f2c;
    background-size: 5px 4px;
}



/*** CUBOID ***/

.cuboid {
	--height: 2;
    --width: 2;
    --depth: 2;
	--hue: 200;
	--sat: 10%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	animation: cube1 0.6s linear 0s infinite;
	transform: translate3d(0vmin, 0vmin, -5vmin);
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
	background: hsl(var(--hue), var(--sat), 10%);
}

.cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	filter: brightness(0.75);
}
.cuboid .side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
}
.cuboid .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg)	translate3d(0, 0, calc(var(--width) * 0.5vmin));
	filter: brightness(1.5);
}
.cuboid .side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
	filter: brightness(0.6);
}
.cuboid .side:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg)	translate3d(0, 0, calc(var(--height) * 0.5vmin));
	filter: brightness(2);
}
.cuboid .side:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	filter: brightness(1.25);
}

.side:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    --units: 0.25vmin;
    --brick1: #ef490d;
    --brick2: #f13500;
    --lines: #5e5e5e;
	--brick1: #724f42;
    --brick2: #795548;
    --lines: #9b8989;
    --gp-ln: 50%/ calc(var(--units) * 10) calc(var(--units) * 5);
    --gp-cn: 50%/ calc(var(--units) * 5) calc(var(--units) * 5);
    background: repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn), repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100% ) var(--gp-ln), repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100% ) var(--gp-ln);
    opacity: 0.5;
}



/*** BRICKS ***/
.cuboid.brick-1 {
    --width: 36.5;
    transform: translate3d(1.75vmin, 24.45vmin, 22vmin);
}
.cuboid.brick-2 {
    --depth: 32;
    transform: translate3d(21vmin, 24.45vmin, 7vmin);;
}
.cuboid.brick-3 {
    --width: 29;
    transform: translate3d(7.5vmin, 24.45vmin, -8vmin);
}
.cuboid.brick-4 {
    --depth: 26;
    transform: translate3d(-6vmin, 24.45vmin, -20vmin);
}
.cuboid.brick-5 {
    --width: 30;
    transform: translate3d(-20vmin, 24.45vmin, -33vmin);
}
.cuboid.brick-6 {
    --width: 8.5;
    transform: translate3d(-19vmin, 24.45vmin, -22.5vmin);
}
.cuboid.brick-7 {
    --depth: 26;
    transform: translate3d(-15.75vmin, 24.45vmin, -9.5vmin);
}
.cuboid.brick-8 {
    --width: 27;
    transform: translate3d(-2.5vmin, 24.45vmin, 2.6vmin);
}
.cuboid.brick-9 {
    --depth: 7;
    transform: translate3d(10vmin, 24.45vmin, 6.5vmin);
}
.cuboid.brick-10 {
    --width: 27;
    transform: translate3d(-2.5vmin, 24.45vmin, 9.5vmin);
}
.cuboid.brick-11 {
    --depth: 14.5;
    transform: translate3d(-15.75vmin, 24.45vmin, 15.75vmin);
}

.cuboid.brick-12 {
    --depth: 28;
    transform: translate3d(-15.75vmin, 12.25vmin, -2vmin);
}
.cuboid.brick-13 {
    --depth: 18;
    transform: translate3d(-4.5vmin, 12.25vmin, 3.1vmin);
}
.cuboid.brick-14 {
    --width: 9;
    --height: 0.75;
    transform: translate3d(-10.25vmin, 12.65vmin, 11.5vmin);
}
.cuboid.brick-14 .side:nth-of-type(1), 
.cuboid.brick-14 .side:nth-of-type(5) {
    background: #2196f3;
}

.cuboid.brick-15 {
    --depth: 3;
    --width: 1;
    transform: translate3d(-15.75vmin, 24.65vmin, 7vmin);
}



/*** COLUMNS ***/
.cuboid.col-1 {
    --height: 18;
    transform: translate3d(21.15vmin, 14.5vmin, -8vmin);
}
.cuboid.col-2 {
    --height: 18;
    transform: translate3d(21vmin, 14.5vmin, 2vmin);
}
.cuboid.col-1 .side:nth-of-type(1),
.cuboid.col-2 .side:nth-of-type(1) {
    clip-path: polygon(0 12%, 100% 5%, 100% 100%, 0% 100%);
}
.cuboid.col-1 .side:nth-of-type(2),
.cuboid.col-2 .side:nth-of-type(2) {
    clip-path: polygon(0 4%, 100% 11.5%, 100% 100%, 0% 100%);
}
.cuboid.col-1 .side:nth-of-type(3),
.cuboid.col-2 .side:nth-of-type(3) {
   clip-path: polygon(0 4%, 100% 4%, 100% 100%, 0% 100%);
}
.cuboid.col-1 .side:nth-of-type(4),
.cuboid.col-2 .side:nth-of-type(4) {
   clip-path: polygon(0 12%, 100% 12%, 100% 100%, 0% 100%);
}
.cuboid.col-1 .side:nth-of-type(5),
.cuboid.col-2 .side:nth-of-type(5) {
    display: none;
}
.cuboid.col-3 {
    --height: 13;
    transform: translate3d(-15.7vmin, 17.75vmin, 9.5vmin);
}
.cuboid.col-4 {
    --height: 13;
    transform: translate3d(-4.5vmin, 17.75vmin, 9.5vmin);
}
.cuboid.col-4 .side:nth-of-type(3):after {
    content: "";
    background: #00000069;
    width: 1.2vmin;
    height: 1.2vmin;
    position: absolute;
    left: 0.35vmin;
    top: 52%;
    border-radius: 100%;
    border-left: 1px solid #fff8;
    box-sizing: border-box;
}



/*** WATER ***/
.water {
    background: #03a9f4;
    position: absolute;
    width: 36vmin;
    height: 11vmin;
    transform: translate3d(3vmin, 24.75vmin, 16vmin) rotateX(90deg);
    overflow: hidden;
}
.water.one {
    clip-path: polygon(0% 0%, 72% 0%, 100% 100%, 0 100%, 0 0);
}
.water.two {
    width: 30vmin;
    height: 11vmin;
    transform: translate3d(15.5vmin, 24.75vmin, 7.5vmin) rotateX(90deg) rotate(-90deg);
    clip-path: polygon(0% 0%, 66% 0%, 100% 100%, 0% 100%, 40% 0);
}
.water.three {
    width: 36vmin;
    height: 11vmin;
    transform: translate3d(3vmin, 24.75vmin, -2vmin) rotateX(90deg) rotate(180deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 30% 0);
}
.water.four {
    width: 37vmin;
    height: 11vmin;
    transform: translate3d(-11vmin, 24.75vmin, -14.5vmin) rotateX(90deg) rotate(-90deg);
    clip-path: polygon(0 0, 72% 0, 100% 100%, 30% 100%, 2% 0%);
}
.water.five {
    width: 32vmin;
    height: 11vmin;
    transform: translate3d(-20vmin, 24.75vmin, -27.5vmin) rotateX(90deg) rotate(180deg);
    clip-path: polygon(93% 100%, 5% 100%, 35% 0%, 0% 0%, 65% 0%);
}
.water.six {
    width: 29.75vmin;
    height: 9.15vmin;
    transform: translate3d(-10.25vmin, 12.25vmin, -2.35vmin) rotateX(90deg) rotate(90deg);
    clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 5% 100%, 5.5% 85%, 40% 0);
}
.water.fall {
    width: 13vmin;
    height: 9.1vmin;
	transform: translate3d(-10.1vmin, 18.35vmin, 13.55vmin) rotateX(9deg) rotate(90deg);
    border-right: 0.125vmin solid #fff2;
    border-left: 0.25vmin solid #fff4;
    opacity: 0.85;
    box-shadow: 1vmin 0vmin 1vmin 0.5vmin #03a9f4, 0vmin 0 2vmin 10vmin #03a9f4 inset;
}
.water.fall:before {
    animation-duration: 0.8s;
}
.water:before {
    content: "";
	--clr: #fff8;
    width: 2vmin;
    height: 0.1vmin;
    background: var(--clr);
    position: absolute;
    left: 50%;
    top: .........完整代码请登录后点击上方下载按钮下载查看