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 .........完整代码请登录后点击上方下载按钮下载查看