css实现酷炫网状物不规则分裂运动动画效果代码-html代码-BFW代码库

css实现酷炫网状物不规则分裂运动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现酷炫网状物不规则分裂运动动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @-webkit-keyframes anim-v {
        	0% {
        	transform:translate3d(0,10vh,0)
        }
        to {
        	transform:translate3d(0,-10vh,0) rotate3d(0,0,1,90deg)
        }
        }@keyframes anim-v {
        	0% {
        	transform:translate3d(0,10vh,0)
        }
        to {
        	transform:translate3d(0,-10vh,0) rotate3d(0,0,1,90deg)
        }
        }@-webkit-keyframes anim-h {
        	to {
        	transform:translate3d(0,0,var(--dist,0))
        }
        }@keyframes anim-h {
        	to {
        	transform:translate3d(0,0,var(--dist,0))
        }
        }@-webkit-keyframes anim-spin {
        	to {
        	transform:rotate3d(0,0,1,360deg)
        }
        }@keyframes anim-spin {
        	to {
        	transform:rotate3d(0,0,1,360deg)
        }
        }@-webkit-keyframes anim-s {
        	0% {
        	transform:scale3d(1,1,1)
        }
        to {
        	transform:scale3d(1.5,1.5,1.5)
        }
        }@keyframes anim-s {
        	0% {
        	transform:scale3d(1,1,1)
        }
        to {
        	transform:scale3d(1.5,1.5,1.5)
        }
        }@-webkit-keyframes reveal {
        	0% {
        	opacity:0
        }
        to {
        	opacity:1
        }
        }@keyframes reveal {
        	0% {
        	opacity:0
        }
        to {
        	opacity:1
        }
        }@-webkit-keyframes anim-r {
        	0% {
        	transform:rotate3d(1,1,0,75deg) rotate3d(0,0,-1,0deg)
        }
        to {
        	transform:rotate3d(1,1,0,75deg) rotate3d(0,0,-1,360deg)
        }
        }@keyframes anim-r {
        	0% {
        	transform:rotate3d(1,1,0,75deg) rotate3d(0,0,-1,0deg)
        }
        to {
        	transform:rotate3d(1,1,0,75deg) rotate3d(0,0,-1,360deg)
        }
        }:root {
        	--length:100
        }
        *,*::before,*::after {
        	margin:0;
        	border:0;
        	padding:0;
        	box-sizing:border-box
        }
        body,section,ul,li {
        	display:flex;
        	align-items:center;
        	justify-content:center;
        	transform-style:preserve-3d
        }
        body {
        	width:100vw;
        	height:100vh;
        	overflow:hidden;
        	background:#112d4e;
        	-webkit-animation:reveal 2s ease-in-out forwards;
        	animation:reveal 2s ease-in-out forwards;
        	perspective:440vmin
        }
        section {
        	-webkit-animation:anim-v 16s ease-in-out infinite alternate;
        	animation:anim-v 16s ease-in-out infinite alternate
        }
        ul {
        	-webkit-animation:anim-r 16s linear infinite;
        	animation:anim-r 16s linear infinite;
        	list-style:none;
        	position:relative
        }
        ul li:nth-child(1) {
        	--delay:.04s;
        	--dist:.9625vmin;
        	--size:55vmin
        }
        ul li:nth-child(1)::after {
        	--size:27.5vmin
        }
        ul li:nth-child(1)::before {
        	--size:13.75vmin
        }
        ul li:nth-child(2) {
        	--delay:.08s;
        	--dist:1.925vmin;
        	--size:53.9vmin
        }
        ul li:nth-child(2)::after {
        	--size:26.95vmin
        }
        ul li:nth-child(2)::before {
        	--size:13.475vmin
        }
        ul li:nth-child(3) {
        	--delay:.12s;
        	--dist:2.8875vmin;
        	--size:52.8vmin
        }
        ul li:nth-child(3)::after {
        	--size:26.4vmin
        }
        ul li:nth-child(3)::before {
        	--size:13.2vmin
        }
        ul li:nth-child(4) {
        	--delay:.16s;
        	--dist:3.85vmin;
        	--size:51.7vmin
        }
        ul li:nth-child(4)::after {
        	--size:25.85vmin
        }
        ul li:nth-child(4)::before {
        	--size:12.925vmin
        }
        ul li:nth-child(5) {
        	--delay:.2s;
        	--dist:4.8125vmin;
        	--size:50.6vmin
        }
        ul li:nth-child(5)::after {
        	--size:25.3vmin
        }
        ul li:nth-child(5)::before {
        	--size:12.65vmin
        }
        ul li:nth-child(6) {
        	--delay:.24s;
        	--dist:5.775vmin;
        	--size:49.5vmin
        }
        ul li:nth-child(6)::after {
        	--size:24.75vmin
        }
        ul li:nth-child(6)::before {
        	--size:12.375vmin
        }
        ul li:nth-child(7) {
        	--delay:.28s;
        	--dist:6.7375vmin;
        	--size:48.4vmin
        }
        ul li:nth-child(7)::after {
        	--size:24.2vmin
        }
        ul li:nth-child(7)::before {
        	--size:12.1vmin
        }
        ul li:nth-child(8) {
        	--delay:.32s;
        	--dist:7.7vmin;
        	--size:47.3vmin
        }
        ul li:nth-child(8)::after {
        	--size:23.65vmin
        }
        ul li:nth-child(8)::before {
        	--size:11.825vmin
        }
        ul li:nth-child(9) {
        	--delay:.36s;
        	--dist:8.6625vmin;
        	--size:46.2vmin
        }
        ul li:nth-child(9)::after {
        	--size:23.1vmin
        }
        ul li:nth-child(9)::before {
        	--size:11.55vmin
       .........完整代码请登录后点击上方下载按钮下载查看