css实现生日蛋糕蜡烛气球动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现生日蛋糕蜡烛气球动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Spicy+Rice); html, body { height: 100%; width: 100%; } body { display: flex; align-items: center; justify-content: center; background: #FDF6DA; } .music { display: none; } .cake { width: 260px; } .cake .slice { position: relative; margin: 0 auto; width: 130px; transform-origin: 50% 50%; } .cake .slice::before { content: ""; display: block; border-radius: 50%; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); } .cake .slice > span { position: absolute; right: 0; left: 0; top: 15px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); z-index: -1; } .cake .slice:nth-of-type(1) { z-index: 10; } .cake .slice:nth-of-type(1)::before { height: 20px; background: #FCC1AE; } .cake .slice:nth-of-type(1) > span { top: 10px; height: 60px; background: #F09678; border-radius: 0 0 50% 50%/0 0 7px 7px; } .cake .slice:nth-of-type(2) { margin-top: -10px; transform: scale(1.5, 1); z-index: 9; } .cake .slice:nth-of-type(2)::before { height: 27px; background: #FD7B9F; } .cake .slice:nth-of-type(2) > span { height: 90px; background: #E32C5E; border-radius: 0 0 50% 50%/0 0 12px 12px; } .cake .slice:nth-of-type(3) { margin-top: 50px; transform: scale(2, 1.1); z-index: 8; } .cake .slice:nth-of-type(3)::before { height: 33px; background: #6E3C3C; } .cake .slice:nth-of-type(3) > span { height: 100px; background: #371111; border-radius: 0 0 50% 50%/0 0 22px 22px; } .candle { position: relative; margin-right: 3px; } .candle:last-of-type { margin-right: 0; } .candle::after { content: ""; position: absolute; top: 7px; left: 50%; margin-left: -1px; width: 2px; height: 6px; background: rgba(0, 0, 0, 0.4); border-radius: 4px 4px 0 0; } .candle::before { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; background: linear-gradient(40deg, white 0%, yellow 20%, gold 50%, orange 100%); border-radius: 50% 0 50% 50%; box-shadow: 2px -2px 5px 1px orange; transform: rotate(-45deg); animation: flicker 3ms infinite; } .candle > span { position: absolute; bottom: 8px; left: 50%; display: block; margin-left: -1px; width: 2px; height: 7px; background: white; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0