js+css实现墙角绿叶生长下垂动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现墙角绿叶生长下垂动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .flower { filter: drop-shadow(4px 4px 2px rgba(0,0,0,.25)); animation: grow 1s forwards; } @keyframes grow { 100% { transform: translateY(0%); } } body { background: linear-gradient(163deg, transparent 0px, transparent 1px, BlanchedAlmond 1px, BlanchedAlmond 14px, transparent 14px), linear-gradient(161deg, transparent 0px, #FFF 2px, BlanchedAlmond 2px, BlanchedAlmond 16px, transparent 16px), linear-gradient(343deg, transparent 0px, transparent 1px, #ffe1b4 1px, BlanchedAlmond 14px, transparent 14px), linear-gradient(343deg, transparent 0px, transparent 1px, #ffe1b4 1px, BlanchedAlmond 14px, transparent 14px); background-color: #FFF; background-size: 48px 30px; background-position: 2px 1px, 23px 16px, 48px 15px, 21px 30px; margin: 0; overflow: hidden; display: grid; place-items: center; min-height: 100vh; } h1 { font-family: system-ui; font-size: 15rem; margin: 0; line-height: 100%; width: fit-content; color: saddleBrown; opacity: .5; text-shadow: 5px 5px rgba(0,0,0,.25); } </style> </head> <body > <h1>Vines</h1> <script > var flowers = 19 // not meant to be changed function addFlower() { var f = document.createElement('div') f.className = 'flower' f.style.width = '3px' var num = Math.ce.........完整代码请登录后点击上方下载按钮下载查看
网友评论0