css实现Fractal Cantor Set动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现Fractal Cantor Set动画效果代码
代码标签: css Fractal Cantor Set 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: flex-end; height: 100svh; overflow: hidden; background-image: linear-gradient(#001, #4ab 75%, #bf9 75%, #010); } span { display: flex; align-items: flex-end; flex: 1; gap: 10%; height: 12vh; margin-bottom: 1vh; border-radius: 5px 5px 20px 20px; background-color: #210; &:last-child:not(:only-child) { transform: skew(2deg) rotateZ(-3deg); animation: rise 2s both, stir 4s 3s infinite alternate; } &:first-child:not(:only-child) { transform: skew(-2deg) rotateZ(3deg); animation: rise 2s both, stir 6s 3s infinite alternate; } } :empty { background-color: #2405; box-shadow: 0 3vh 1vh 0.5vh #050; &::after { right: 0; } &::before, &::after { content: ""; position: absolute; height: 1vmin; width: 1vmin; top: 0; border-radius: 50%; background-color: #e16; box-shadow: 0 1vh 1vh 0.5vh #dc2; } } @keyframes rise { to { margin-bottom: 10vh; } } @keyframes stir { 100% { transform: translateY(2vmin); } } </style> </head> <body translate="no"> <span><span><span><span><span><span><span><span></span><span></span></span><span><span></span><span></span></span></span><span><span><span></span><span></span></span><span><span></span><span></span></span></span></span><span><span><span><span></span><span></span></span><span><span></span><span></span></span></span><span><span><span></span><span></span></span><span><span></span><span></span></span></span></span></span><span><span><span><span><span></span><span></span></span><span><span></span><span></span></span></span><span><span><span></span><span></span></span><span><span></span><span></span></span></span></span><span><span><span><span></span><span></span></span><span><span></span><span></span></span></span><span><span><span></span><span></span></span><span><span></span><span></span></span></span></span></span></span><span><span><span><span><span><span></span><span></span></span><span><span></span><span></span></span></span><span><span><span></span><span></span></span><span><span></span><span></span></span></span></span><span><span><span><span></span><span></span></span><span><span></span><span></span></span></span><span><span><span></span><span></span></span><span><span></span><span></span></span></span></span></span><span><span><span><span><span></span><span></span></span><span><span></span><span><.........完整代码请登录后点击上方下载按钮下载查看
网友评论0