gasp实现生日蛋糕生日快乐生日蜡烛动画效果
代码语言:html
所属分类:动画
代码描述:gasp实现生日蛋糕生日快乐生日蜡烛动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Cookie&family=Rouge+Script&display=swap"); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } .svg { position: absolute; width: 0; height: 0; } .wrapper, .plate, .candle-container { display: grid; place-items: center; } .wrapper { position: relative; height: 100vh; min-height: 600px; background: linear-gradient(totop,#eee, transparent); } .greeting { font-family: 'Rouge Script', cursive; font-size: 4rem; color: #444; transform: scale(0); } .message { font-family: 'Cookie', cursive; font-size: 2.5rem; color: #777; } .plate { position: relative; width: 250px; height: 75px; background: #f1f1f1; margin-top: 0; border-radius: 50%; box-shadow: 0px 3px 5px 0px #aaa; } .cake-wrap { position: absolute; bottom: 50%; } .cake-base { position: relative; width: 200px; height: 50px; background: #c5a5c0; } .cake-base .base-front { position: absolute; width: 100%; height: 100%; background: inherit; } .cake-base .base-front:after { content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 55px; transform: translatey(-50%); background: inherit; border-radius: 50%; } .cake-base .base-top { position: absolute; width: 100%; height: 65px; top: 0; transform: translatey(-50%); border-radius: 50%; background: inherit; } .cake-base .base-top:before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; clip-path: polygon(0 0, 0% 50%, 100% 50%, 100% 0); } .cake-base .base-top:after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border-bottom-color: black; clip-path: polygon(0 50%, 60% 50%, 60% 101%, 0 101%); } .cake-topping { position: absolute; bottom: 0%; width: 200px; height: 100px; z-index: 99; } .cake-topping .topping-front { width: 100%; height: 100%; background: linear-gradient(tobottom,#b381ae 40%, transparent); } .cake-topping .topping-front .top-layer { height: 30%; background: #b381ae; } .cake-topping .topping-front .bottom-layer { position: relative; height: 70%; background: #b381ae; clip-path: url("#my-clip-path"); } .cake-topping .topping-top { background: #b381ae; position: absolute; width: 100%; height: 65px; top: 0; transform: translatey(-50%); border-radius: 50%; z-index: 9; } .cake-topping .topping-top:before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; clip-path: polygon(0 0, 0% 50%, 100% 50%, 100% 0); } .cake-topping .topping-top:after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 -1px 1px 2px rgba(200, 169, 195, 0.5); clip-path: polygon(10% 50%, 70% 50%, 70% 101%, 10% 101%); } .candle-container { width: 200px; position: absolute; bottom: 60%; z-index: 9999; opacity: 0; } .candle-container .candle-wrap { position: relative; width: 15px; } .candle-container .flame-wrap { position: relative; z-index: 99; width: 100%; background: #fcc56c; height: 30px; transform-origin: bottom center; transform: scale(0); clip-path: url(#my-flame-path); } .candle-container .candle-top { position: absolute; top: 0; left: 0; transform: translatey(-50%); width: 100%; height: 8px; background: white; border-radius: 50%; z-index: 9; background: radial-gradient(#eee, #f0abf0); } .candle-container .candle-base { position: relative; width: 100%; height: 75px; margin: 2px 0; background: repeating-linear-gradient(45deg, #eee, #f0abf0 20%); } .candle-container .candle-base:before { content: ''; po.........完整代码请登录后点击上方下载按钮下载查看
网友评论0