css实现骷颅圣诞老人送礼物动画代码
代码语言:html
所属分类:动画
代码描述:css实现骷颅圣诞老人送礼物动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } body { background: #9893bf; position: relative; height: 100%; width: 100%; } .container { position: relative; width: 500px; height: 500px; background: #1a1354; border-radius: 48% 52% 49% 51%/44% 44% 56% 56%; margin: auto; margin-top: 12vh; margin-bottom: 2rem; } .ground { position: absolute; width: 70%; height: 18%; border-radius: 43% 57% 33% 67%/55% 42% 58% 45%; background: white; z-index: 1; bottom: -1%; left: 15%; } .present { position: absolute; width: 9%; height: 9%; border-radius: 3px; background: #005c1d; top: 25.5%; left: 40%; z-index: 3; } .ribbon { position: absolute; width: 28%; height: 100%; background: #d6aa3a; left: 36%; } .bow { position: absolute; width: 30%; height: 30%; background: transparent; border: 4px solid #d6aa3a; border-radius: 30% 70% 0% 100%/30% 100% 0% 70%; } .bow1 { top: -35%; left: 5%; transform: rotate(-15deg); } .bow2 { top: -35%; left: 45%; transform: rotate(10deg) scaleX(-1); } svg { height: 22px; width: 22px; padding-top: 12px; padding-left: 3px; } svg:hover { cursor: pointer; } #pause { height: 19px; width: 19px; padding-bottom: 2px; } #icon-color { fill: #1a1354; } #player-container { position: absolute; width: 100px; height: 50px; background: white; border-radius: 49% 51% 71% 29%/54% 42% 58% 46%; right: 40px; top: -40px; text-align: center; z-index: 4; } .jack { position: absolute; width: 95%; height: 95%; left: 18%; top: 7%; z-index: 3; } .head { position: absolute; width: 11%; height: 11%; background: #e3e3e3; border-radius: 50% 50% 50% 50%/55% 55% 45% 45%; top: 11%; left: 16%; } .head-copy { position: absolute; width: 100%; height: 100%; border-radius: 50% 50% 50% 50%/55% 55% 45% 45%; background: #e3e3e3; z-index: 2; } .left-eye { position: absolute; width: 30%; height: 36%; border-radius: 60% 40% 53% 47%/50% 50% 50% 50%; background: #171717; top: 32%; left: 16%; transform: rotate(10deg); } .right-eye { position: absolute; width: 30%; height: 36%; border-radius: 60% 40% 53% 47%/50% 50% 50% 50%; background: #171717; top: 32%; left: 60%; transform: rotate(-10deg) scaleX(-1); } .left-nostril { position: absolute; width: 5%; height: 8%; border-radius: 0% 100% 25% 75%/0% 75% 25% 100%; background: #171717; top: 65%; left: 48%; transform: scaleX(-1); } .right-nostril { position: absolute; width: 5%; height: 8%; border-radius: 0% 100% 25% 75%/0% 75% 25% 100%; background: #171717; top: 65.5%; left: 58%; transform: scaleX(1); } .smile { position: absolute; width: 90%; height: 60%; border-radius: 50%; border: 1px solid; background: transparent; border-color: transparent transparent #171717 transparent; top: 26%; left: 5%; } .stitch { position: absolute; width: 1px; height: 20%; background: #171717; } .s1 { top: 76%; left: 15%; } .s2 { top: 83%; left: 28%; } .s3 { top: 88%; left: 41%; } .s4 { top: 90%; left: 54%; } .s5 { top: 87%; left: 67%; } .s6 { top: 80%; left: 80%; } .hat-front { position: absolute; width: 87%; height: 65%; background: #A01A21; border-radius: 30% 70% 50% 50%/100% 100% 0% 0%; top: -45%; left: 7%; z-index: 2; } .hat-tail { position: absolute; width: 70%; height: 140%; border-radius: 50%; background: #A01A21; z-index: -1; left: -25%; top: -51%; transform: rotate(30deg); z-index: 1; } .hat-tip { position: absolute; width: 40%; height: 50%; background: #A01A21; clip-path: polygon(50% 100%, 0 0, 100% 0); top: 58%; left: -60%; transform: rotate(45deg); z-index: 1; } .hat-ball { position: absolute; width: 25%; height: 25%; border-radius: 50%; background: white; left: -73%; top: 93%; z-index: 1; } .hat-lining { position: absolute; width: 115%; height: 45%; border-radius: 20px; background: white; top: 63%; left: -6%; } .beard { position: absolute; width: 100%; height: 115%; background: white; border-radius: 100% 0% 55% 45%/55% 0% 100% 45%; transform: rotate(140deg); z-index: 1; top: 50%; left: 0%; } .torso { position: absolute; width: 10%; height: 17%; background: #A01A21; clip-path: polygon(0 0, 100% 0, 83% 100%, 17% 100%); top: 25%; left: 16.5%; } .belt { position: absolute; width: 9%; height: 2.5%; background: #171717; border-radius: 5px; top: 35%; left: 17%; } .left-leg { position: absolute; width: 3.3%; height: 45%; background: #A01A21; top: 41.5%; left: 18.3%; border-right: 1px solid black; border-radius: 0 0 10px 10px; clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%); } .right-leg { position: absolute; width: 3.3%; height: 45%; background: #A01A21; top: 41.5%; left: 21.5%; border-radius: 0 0 10px 10px; clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%); } .upper-arm { position: absolute; width: 2.5%; height: 16%; border-radius: 10px; background: #A01A21; } .lower-arm { position: absolute; width: 2.5%; height: 15%; border-radius: 10px; background: #A01A21; } .lau { top: 23%; left: 10%; transform: rotate(50deg); } .lal { top: 32%; left: 9.5%; transform: rotate(-50deg); } .rau { top: 25%; left: 27%; transform: rotate(-20deg); } .ral { top: 30%; left: 35.4%; transform: rotate(-110deg); } .hand { position: absolute; background: #e3e3e3; width: 5.5%; height: 5.5%; border-radius: 15% 85% 0% 100%/15% 100% 0% 85%; } .hand-right { left: 41%; top: 32%; transform: rotate(-40deg); } .hand-left { left: 14%; top: 43%; transform: rotate(30deg); z-index: 3; } .arm-animate { position: absolute; width: 100%; height: 100%; animation: arm-lift 3s linear 200ms infinite; } .boot { position: absolute; background: #171717; width: 100%; height: 30%; bottom: 0%; z-index: 3; border-radius: 0 0 10px 10px; } .boot-bottom { position: absolute; width: 7%; height: 3%; border-radius: 50%; background: #171717; } .br { top: 86%; left: 18%; transform: rotate(40deg); } .bl { top: 85%; left: 22%; transform: rotate(15deg); } .boot-lining { position: absolute; width: 3.5%; height: 1.5%; background: white; border-radius: 10px; } .blr { top: 73%; left: 18%; } .bll { top: 73%; left: 21.5%; } .zero { position: absolute; width: 100%; height: 100%; animation: float 5s linear 0.1s infinite; z-index: 3; } .head-zero { position: absolute; width: 7%; height: 7%; background: #f0f0f0; border-radius: 50%; left: 63%; top: 62%; transform: scaleX(-1) rotate(10deg); z-index: 4; } .snout { position: absolute; width: 145%; height: 50%; border-radius: 50%; border-bottom: 1.1rem solid #f0f0f0; background: transparent; left: -50%; top: 10%; transform: rotate(-15deg); } .snout-cover { position: absolute; width: 65%; height: 20%; border-radius: 50%; border-bottom: 0.5rem solid #f0f0f0; background: transparent; left: -48%; top: 42%; transform: rotate(-30deg); } .zero-ear { position: absolute; width: 75%; height: 75%; background: #f0f0f0; border-radius: 100% 0% 100% 0%/100% 0% 100% 0%; } .zel { top: -40%; left: 85%; transform: rotate(15deg); } .zer { top: -60%; left: 40%; } .zero-body { position: absolute; width: 17%; height: 9%; background: #f0f0f0; border-radius: 76% 24% 27% 73%/69% 74% 26% 31%; top: 67%; left: 50%; z-index: 3; transform: rotate(5deg); } .zero-nose { position: absolute; width: 35%; height: 35%; border-radius: 50%; background: #A01A21; right: 140%; top: 60%; } .zero-eye { position: absolute; width: 26%; height: 26%; border-radius: 50%; background: #171717; right: 61%; top: 24%; } .zero-smile { position: absolute; width: 80%; height: 40%; border-radius: 50%; background: transparent; border: 2px solid; border-color: transparent transparent #171717 transparent; top: 51%; right: 60%; transform: rotate(-20deg); } .zero-collar { position: absolute; background: transparent; width: 50%; height: 10%; border-radius: 50%; border: 4px solid; border-color: transparent transparent #A01A21 transparent; transform: rotate(-45deg); top: 64%; left: 47%; } .snowflake { position: absolute; width: 2%; height: 2%; border-radius: 50%; background: white; } .snow1 { right: 10%; top: 20%; animation: snowfall 3s linear 50ms infinite; } .snow2 { right: 20%; top: 12%; animation: snowfall 2.5s linear 400ms infinite; } .snow3 { right: 35%; top: 5%; animation: snowfall 3s linear 100ms infinite; } .snow4 { right: 50%; top: 4%; animation: snowfall 2.8s linear 1ms infinite; } .snow5 { right: 67%; top: 7%; animation: snowfall 3s linear 500ms infinite; } .snow6 { right: 25%; top: 30%; animation: snowfall 3s linear 100ms infinite; } .snow7 { right: 40%; top: 20%; animation: snowfall 3s linear 600ms infinite; } .snow8 { right: 5%; top: 30%; animation: snowfall 3s linear 180ms infinite; } @keyframes snowfall { 0% { filter: opacity(100%); transform: translate(0, 0); } 100% { filter: opacity(0%); transform: translate(-1000%, 2500%); } } @keyframes float { 0% { transform: translate(0%, 0%); } 25% { transform: translate(-1%, 1%); color: pink; } 50% { transform: translate(-1%, 0%); } 75% { transform: translate(0%, 1%); } 100% { transform: translate(0%, 0%); } } @keyframes arm-lift { 0% { transform: rotate(0); } 50% { transform: rotate(-12deg) translateY(-4%) translateX(3%); } 100% { transform: rotate(0); } } </style> </head> <body > <audio id="player" src="//repo.bfw.wiki/bfwrepo/sound/5fe5680792ceb.mp3"></audio> <div id="player-container"> <span id="play-button" onclick="togglePlay()"> <svg width="11px" height="14px" viewBox="0 0 11 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>play_arrow</title> <desc>Created with Sketch.</desc> <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Rounded" transform="translate(-753.000000, -955.000000)"> <g id="AV" transform="translate(100.000000, 852.000000)"> <g id="-Round-/-AV-/-play_arrow" transform="translate(646.000000, 98.000000)"> <g> <rect id="Rectangle-Copy-50" x="0" y="0" width="24" height="24"></rect> <path d="M7,6.82 L7,17.18 C7,17.97 7.87,18.45 8.54,18.02 L16.68,12.84 C17.3,12.45 17.3,11.55 16.68,11.15 L8.54,5.98 C7.87,5.55 7,6.03 7,6.82 Z" id="icon-color" fill="#1D1D1D"></path> </g> </g> </g> </g> </g> </svg></span> <span id="mute-button" onclick="toggleMute()"> <svg width="18px" height="18px" viewBox="0 0 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0