纯css实现一个万圣节可爱小南瓜动画效果代码
代码语言:html
所属分类:动画
代码描述:纯css实现一个万圣节可爱小南瓜动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #321757; } .general-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: fly 10s ease-in-out infinite; } .shine { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background: radial-gradient(closest-side, #872c91, transparent); animation: shine 4s ease-in-out infinite alternate; } .stem { position: absolute; top: -5px; width: 100px; height: 25px; background-color: #2f5c15; border-radius: 50%; } .stem:before { position: absolute; top: -44px; left: 45px; content: ''; display: block; width: 25px; height: 30px; border-top: 15px solid #2f5c15; border-left: 10px solid #2f5c15; border-top-left-radius: 100% 100%; } .stem:after { position: absolute; top: -32px; left: 50px; content: ''; display: block; width: 25px; height: 30px; border-top: 3px solid #264d0f; border-left: 5px solid #264d0f; border-top-left-radius: 100% 100%; } .pumpkin1 { position: absolute; top: 0px; width: 100px; height: 125px; background-color: #c27713; box-shadow: inset 7px -20px 20px rgba(0, 0, 0, 0.5), inset -10px 15px 20px #fa940c, -1px 2px 5px rgba(0, 0, 0, 0.4); border-width: 0; border-top-left-radius: 50% 60%; border-top-right-radius: 50% 60%; border-bottom-left-radius: 50% 40%; border-bottom-right-radius: 50% 40%; } .pumpkin2 { position: absolute; top: 0px; left: -35px; width: 100px; height: 123px; background-color: #b56b0d; box-shadow: inset 3px -20px 20px rgba(0, 0, 0, 0.5), inset -3px 15px 20px #fa940c; border-top-left-radius: 60% 60%; border-top-right-radius: 40% 40%; border-bottom-left-radius: 60% 40%; border-bottom-right-radius: 40% 40%; } .pumpkin3 { position: absolute; top: 0px; left: 35px; width: 100px; height: 123px; background-color: #b56b0d; box-shadow: inset 3px -20px 20px rgba(0, 0, 0, 0.5), inset -3px 15px 20px #fa940c; border-top-right-radius: 60% 60%; border-top-left-radius: 40% 40%; border-bottom-right-radius: 60% 40%; border-bottom-left-radius: 40% 40%; } .pumpkin4 { position: absolute; top: 0px; left: 60px; width: 90px; height: 120px; background-color: #754709; box-shadow: inset 3px -20px 20px rgba(0, 0, 0, 0.4), inset -3px 15px 20px #fa940c; border-top-right-radius: 60% 60%; border-top-left-radius: 40% 60%; border-bottom-right-radius: 50% 40%; border-bottom-left-radius: 50% 40%; } .pumpkin5 { position: relative; top: 0px; left: -50px; width: 100px; height: 120px; background-color: #754709; box-shadow: inset 3px -20px 20px rgba(0, 0, 0, 0.4), inset -3px 15px 20px rgba(250, 148, 12, 0.8); border-top-left-radius: 60% 60%; border-top-right-radius: 40% 40%; border-bottom-left-radius: 50% 40%; border-bottom-right-radius: 50% 40%; } .eye-l { position: absolute; top: 60px; left: -10px; width: 15px; height: 15px; background-color: black; border: 5px solid black; border-radius: 50%; box-shadow: inset -3px -3px 3px rgba(201, 136, 38, 0.7); animation: blink 2s linear infinite alternate; } .eye-l:after { position: absolute; top: 2px; left: 5px; content: ''; display: block; width: 5px; height: 15px; background-color: yellow; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; border-top-left-radius: 50% 90%; border-top-right-radius: 50% 90%; } .eye-l:before { position: absolute; top: -2px; left: 0px; content: ''; display: block; width: 5px; height: 5px; background-color: wh.........完整代码请登录后点击上方下载按钮下载查看
网友评论0