div+css实现扇形分层动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现扇形分层动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap"); * { box-sizing: border-box; margin: auto; } body { position: relative; height: 100vh; display: flex; background: #61412e; background-image: url(//repo.bfw.wiki/bfwrepo/svg/nnnoise-beige.svg), linear-gradient(to bottom, #2a3116, #61412e, #251b13); overflow: hidden; perspective: 1440px; } .layers { position: relative; height: 70vh; aspect-ratio: 1/1.25; filter: drop-shadow(0 0 50px); } .layers .container { position: absolute; height: 100%; width: 100%; background: #72a2ff00; border-radius: 20px; overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 50% 100%, 0% 10%); animation: revealBG 5s ease-in-out infinite; } .layers .container .layer { position: absolute; height: 200%; aspect-ratio: 1/1; border-radius: 50%; bottom: -105%; left: 50%; translate: -50% 0; background-color: #0000000f; background-image: url(//repo.bfw.wiki/bfwrepo/svg/nnnoise-beige.svg); clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 50% 50%, 0% 10%); rotate: -180deg; animation: rotate 5s ease-out forwards infinite; } .layers .container .layer:nth-of-type(1) { scale: 1; background-color: #2a3116; animation-delay: 1s; } .layers .container .layer:nth-of-type(2) { scale: 0.9; background-color: #e4d082; animation-delay: 0.9s; } .layers .contain.........完整代码请登录后点击上方下载按钮下载查看
网友评论0