css实现一个三维旋转的生日蛋糕动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个三维旋转的生日蛋糕动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; background: #006bf4; height: 100vh; overflow: hidden; } .cake { width: 270px; height: 270px; display: flex; flex-direction: column; transform-style: preserve-3d; transform: rotateY(0); } .body { height: 120px; border-radius: 20px 20px 0 0; background: #ff0059; position: relative; overflow: hidden; white-space: nowrap; /* for safari border-radius overflow and transform fix */ -webkit-mask-image: -webkit-radial-gradient(white, black); } .tray { width: 100%; height: 3px; background: #cac9c9; box-shadow: 0px 5px 0px 2px #9E9E9E; } .cream { height: 32px; background: #fff; width: 100%; } .cream-wrap { display: inline-block; width: 100%; animation: rotate-cake 8s linear infinite; } .--copy { animation: rotate-cake2 8s linear infinite; animation-delay: -4s; left: -35px; position: relative; } .cream-line { width: 30px; height: 60px; background: #fff; border-radius: 0 0 20px 20px; box-shadow: inset 0px -7px 0px 0px #e5e5e6; position: absolute; top: 29px; left: 0; } .cream-line:nth-child(2) { left: 60px; height: 65px; } .cream-wrap:not(.--copy) .cream-line:nth-child(2) { left: 60px; height: 65px; animation: cream-low 8s linear infinite; } .cream-line:nth-child(6) { left: 120px; height: 67px; } .cream-line:nth-child(8) { left: 180px; height: 80px; } .cream-line:nth-child(10) { left: 240px; height: 60px; } .cream-line-top { left: 30px; height: 30px; top: 32px; position: absolute; width: 30px; background: white; } .cream-line-top:nth-child(5) { left: 90px; top: 15px; } .cream-line-top:nth-child(7) { left: 150px; top: 22px; } .cream-line-top:nth-child(9) { left: 210px; top: 22px; } /* the joining one */ .cream-line-top:nth-child(11) { left: 270px; top: 0px; width: 32px; } .cream-line-top:nth-child(11)>.mask { width: 98%; } .cream-line-top .mask { width: 100%; height: 30px; position: absolute; left: 0; background: #ff0054; top: 20px; border-radius: 50% 50% 0 0; box-shadow: 0px -7px 0px 0px #e5e5e6; } .candles { height: 150px; display: flex; justify-content: space-evenly; width: 80%; margin: 0 auto; transform-style: preserve-3d; transform: rotateY(0deg); animation: turn infinite linear 5s; animation-play-state: running; } .candle { width: 30px; display: flex; flex-direction: column; align-items: center; position: relative; transform-style: preserve-3d; transform: rotateY(0); animation: turn1 infinite linear 5s; animation-play-state: running; overflow: hidden; } .candle::before { content: ""; position: absolute; background: rgba(0, 0, 0, 0.15); width: 100%; bottom: 0; height: 15px; left: 0; z-index: 1; } .candle--wax { display: flex; height: 80%; flex: 1; width: 100%; border-radius: 20px 20px 0 0; background: repeating-linear-gradient(-50deg, #6ae59f, #6ae59f 20px, #68c7fb 20px, #68c7fb 40px); background-position: 0 0; animation: candle infinite linear 2.5s; } .candle--wick { display: flex; height: 4px; width: 2px; background: #afdbf8; } .candle--light { display: flex; width: 40%; height: 20px; border-radius: 0 60% 30% 60%; transform: translate(21%, 6%) rotate(45deg); background-image: linear-gradient(-45deg, #fdf967, rgba(253, 249, 103, 0.69)); animation: candleLight infinite linear 1s; } .has-shadow .candle--wax::before { content: ""; position: absolute; background: rgba(0, 0, 0, 0.3); width: 100%; bottom: 0; left: 0; height: 100%; animation: shadow infinite linear 2.5s; border-radius: 20px 20px 0 0; } .has-shadow.back .candle--wax::before { animation: shadow-back infinite linear 5s; background: rgba(0, 0, 0, 0.3); border-radius: 20px 20px 0 0; } .has-shadow.front .candle--wax::before { animation: shadow-back infinite linear 5s; background: rgba(0, 0, 0, 0.3); animation-delay: -2.5s; border-radius: 20px 20px 0 0; } .has-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0