css实现杯中瓶中鲜花绽放落下动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现杯中瓶中鲜花绽放落下动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before{ padding: 0; margin: 0; box-sizing: border-box; } :root{ --color-bg: linear-gradient(to top,#010329,#000005); --color-glass:linear-gradient(to left,#142544,#1a9092); --color-water:linear-gradient(to left,#142544,#1b6d6e); } body{ background-image:var(--color-bg); min-height: 100vh; display: flex; justify-content: center; align-items:flex-end; overflow: hidden; } .flower{ position: relative; } .flower__glass{ width:20vmin; height: 30vmin; background-image: var(--color-glass); clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); opacity: .8; position: relative; } .flower__glass::after{ content: ''; position: absolute; bottom: 0; left: 0; background-color: #182843; width: 100%; height: 2vmin; } .flower__glass::before{ content: ''; position: absolute; bottom: 0; left: 0; background-image: var(--color-water); width: 100%; height: 15vmin; } .f-wrapper{ position: absolute; left: 45%; bottom: 2vmin; } .f-wrapper--2{ left: 50%; bottom: 5%; transform-origin: 10% left; transform: rotate(20deg); } .f-wrapper--3{ left: 30%; bottom: 5%; transform-origin: 10% left; transform: rotate(-10deg); } .f-wrapper--3 .flower__line{ height: 45vmin; position: relative; } .f-wrapper--3 .flower__line::after{ content: ''; position: absolute; left:0; top: 0; width: 6vmin; height: 6vmin; transform: translate(-69%,-30%) rotate(-5deg); border-radius:10vmin 10vmin 0 0; border: 2vmin solid #104d4e; border-bottom: transparent; border-left: transparent; } .f-wrapper--3 .flower__line::before{ content: ''; position: absolute; left:-40%; top: -1%; width: 6vmin; height: 2vmin; transform-origin: right; transform: translate(-100%,-80%) rotate(-20deg); background-color: #104d4e; border-radius: 2vmin; } .f-wrapper--3 .flower__line{ background-image: linear-gradient(to top,#142544,#104d4e); } .f-wrapper--2 .flower__line{ height: 45vmin; } .f-wrapper--2 .f{ transform: translateX(-50%) rotate(20deg); } .f-wrapper--3 .f{ transform: translate(-350%,-50%) rotate(-120deg); } .f-wrapper--2 .flower__leaf:not(:first-child){ width: 3.8vmin; height: 10vmin; background-image: linear-gradient(to bottom, #ff43b6 ,#c22887, #1a233a 99%); } .f-wrapper--3 .flower__leaf:not(:first-child){ width: 3.8vmin; height: 10vmin; background-image: linear-gradient(to bottom, #ad2be0 ,#712291, #1a233a 99%); } .f-wrapper--3 .flower__leaf--1{ width: 8vmin; height: 10vmin; bottom: 2vmin; background-color: #ad2be0; } .f-wrapper--2 .flower__leaf--1{ width: 8vmin; height: 10vmin; bottom: 2vmin; background-color: #de118b; } .f-wrapper--2 .f .flower__leaf--8{ width: 10vmin; height: 9vmin; bottom: 3vmin; left: -30%; transform: rotate(-50deg); background-image: linear-gradient(to left bottom, #ff43b6 ,#4d1337);; } .f-wrapper--3 .f .flower__leaf--8{ width: 10vmin; height: 9vmin; left: -10% !important; background-image: linear-gradient(to left bottom, #ad2be0 ,#712291);; } .flower__line{ width: 2vmin; height: 56vmin; background-image: linear-gradient(to left top,#82fdff 20%,#142544,#104d4e); border-radius: 4vmin; } .f{ position: absolute; top: 1vmin; left: 50%; transform: translateX(-50%) rotate(-10deg); width: 2vmin; height: 2vmin; } .flower__leaf{ position: absolute; left: 50%; bottom: 2vmin; transform: translateX(-50%); width: 5vmin; height: 14vmin; background-image: linear-gradient(to bottom, #ffa085 ,#fa7373, #1a233a 99%); clip-path: ellipse(50% 50% at 50% 50%); transform-origin: center bottom; animation: open-flower 2s 1s backwards; } .flower__leaf--1{ width: 10vmin; height: 12vmin; bottom: 3vmin; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background-color: #e24f5f; background-image: none; animation: open-flowe--middle 1.4s 1s backwards; } .flower__leaf--2{ transform: translateX(-50%) rotate(-30deg); } .flower__leaf--3{ transform: translateX(-50%) rotate(-50deg); } .flower__leaf--4{ transform: translateX(-50%) rotate(-70deg); } .flower__leaf--5{ transform: translateX(-50%) rotate(30deg); } .flower__leaf--6{ transform: translateX(-50%) rotate(50deg); } .flower__leaf--7{ transform: translateX(-50%) rotate(70deg); } .flower__leaf--8{ width: 13vmin; height: 11vmin; bottom: 6vmin; left: -30%; border-radius: none; clip-path: none; border-radius: 10vmin 2vmin 10vmin 2vmin; transform: rotate(-55deg); background-image: linear-gradient(to left bottom.........完整代码请登录后点击上方下载按钮下载查看
网友评论0