瓶中玫瑰动画
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Beauty and the Beast's Enchanted Rose</title> <style> body { height: 100%; width: 100%; background: #080f1a; overflow: hidden; } .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .glass { height: 350px; width: 200px; background: #122139; border-radius: 300px 300px 0px 0px; } .glass:before { content: ""; height: 10px; width: 10px; transform-origin: center; border: 10px solid #122139; border-radius: 100%; position: absolute; left: 87px; top: -25px; } .glass:after { content: ""; position: absolute; height: 15px; width: 250px; background: #a52a2a; top: 100%; left: -13%; } .shine { width: 12px; height: 140px; background: white; opacity: 0.2; position: absolute; left: 85%; top: 80px; border-radius: 100px; z-index: 10; } .shine:before { content: ""; width: 12px; height: 20px; position: absolute; background: white; top: 160px; border-radius: 100px; } .petals > div { position: absolute; background: #d52d58; width: 45px; height: 80px; top: 55px; transition: all 0.5s ease-out; } .petals > div:nth-child(1) { border-radius: 15px; box-shadow: 0px 0px 30px #f594b8; left: 80px; top: 60px; background: #d52d58; } .petals > div:nth-child(2), .petals > div:nth-child(4), .petals > div:nth-child(6) { background: #b81b43; left: 60px; border-radius: 0px 30px 0px 30px; transform-origin: bottom right; } .petals > div:nth-child(3), .petals > div:nth-child(5), .petals > div:nth-child(7) { background: #b81b43; left: 100px; border-radius: 30px 0px 30px 0px; transform-origin: bottom left; } .petals > div:nth-child(2) { z-index: 5; background: #ab1a3f; top: 75px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom2 3s ease-in-out; animation-fill-mode: forwards; } .petals > div:nth-child(3) { z-index: 4; background: #ab1a3f; top: 75px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom3 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(4) { z-index: 3; background: #b81b43; top: 70px; height: 75px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom4 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(5) { z-index: 2; background: #b81b43; top: 70px; height: 75px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); animation: bloom5 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(6) { z-index: 1; background: #c9204b; top: 65px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); animation: bloom6 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .petals > div:nth-child(7) { z-index: 0; background: #c9204b; top: 65px; height: 70px; box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); animation: bloom7 3s ease-in-out, glowing 2.5s ease-in-out infinite; animation-fill-mode: forwards; } .deadPetals > div { position: absolute; background: #d52d58; width: 20px; height: 15px; top: 120px; border-radius: 0px 30px 0px 30px; box-shadow: 0px 0px 30px rgba(245, 148, 184, 0.5); transition: all 0.5s ease-out; } .deadPetals > div:nth-child(1) { left: 72px; transform: rotate(-30deg); animation: falling 20s 4s ease-in-out infinite; } .deadPetals > div:nth-child(2) { left: 79px; transform: rotate(-30deg); animation: falling 20s 8s ease-in-out infinite; } .deadPetals > div:nth-child(3) { left: 103px; transform: rotat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0