程序员获取灵感专注写代码的动画效果代码
代码语言:html
所属分类:动画
代码描述:程序员获取灵感专注写代码的动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --green-one: #9be9a8; --green-two: #40c463; --green-three: #30a14e; --green-four: #216e39; --grey: #ebedf0; --shirt: var(--green-one); --shirt-shade: var(--green-two); --skin: #ebe0e0; --skin-shade: #c2a3a3; --stroke: #333; --laptop: #c7c7c7; --laptop-main: #4d4d4c; --laptop-shade: rgba(58,58,59,0.5); --laptop-badge: #fff; --beard: #bf8040; --beard: #ae6113; --beard-light: #d9b38c; --beard-light: #ea943e; --eyes: var(--stroke); --strap: #bf4040; --strap: var(--green-four); --cheeks: #df9f9f; --cap: #404040; --sparks: rgba(255,255,153,0.85); --bulb: rgba(255,255,153,0.85); --filament: #000; --screw: #ccc; --bg: #6e7c91; --owl-1: #feec90; --owl-2: #c6e472; --owl-3: #f88a68; --owl-4: #80cbc5; --owl-5: #c793ec; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; min-height: 100vh; background: var(--bg); } .vvg { height: 50vmin; overflow: visible !important; } .vvg__code-block { fill: var(--block-color, var(--owl-1)); } .vvg__bulb-bulb { fill: var(--bulb); } .vvg__bulb-dashes { stroke: var(--sparks); stroke-width: 4px; } .vvg__bulb-filament { stroke: var(--filament); } .vvg__bulb-screw { fill: var(--screw); } .vvg__cheeks { fill: var(--cheeks); } .vvg__cap-body { fill: var(--cap); } .vvg__cap-strap { fill: var(--strap); } .vvg__cap-notch { fill: var(--stroke); } .vvg-stroke { stroke: var(--stroke); stroke-width: 2px; } .vvg__eyes { fill: var(--eyes); stroke: var(--eyes); } .vvg-hair { fill: var(--beard); } .vvg-hair--light { fill: var(--beard-light); } .vvg__shirt { fill: var(--shirt); } .vvg__shirt--shade { fill: var(--shirt-shade); } .vvg-skin { fill: var(--skin); } .vvg-skin--shade { fill: var(--skin-shade); } .vvg__laptop-badge { fill: var(--laptop-badge); } .vvg__laptop-shell { fill: var(--laptop); } .vvg__laptop-shell--main { fill: var(--laptop-main); } .vvg__laptop-shell--shade { fill: var(--laptop-shade); } label { height: 44px; width: 44px; position: fixed; bottom: 1rem; right: 1rem; cursor: pointer; } label > svg { position: absolute; height: 100%; width: 100%; top: 0; left: 0; } label path { fill: #424a57; } label svg:nth-of-type(1) { display: none; } [type='checkbox'] { height: 0; width: 0; } :checked ~ label svg:nth-of-type(1) { display: block; } :checked ~ label svg:nth-of-type(2) { display: none; } </style> </head> <body translate="no" > <svg class="vvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="vvg" viewBox="0 0 104.211 178.897"> <defs> <clipPath id="b"> <path d="M242.822 893.869c0 61.251-36.059 106.284-94.208 106.284-54.326 0-91.436-45.033-91.436-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z" fill="red"/> </clipPath> <clipPath id="d"> <ellipse ry="23.111" rx="23.762" cy="827.682" cx="68.304"/> </clipPath> <clipPath id="e"> <ellipse transform="scale(-1 1)" cx="-231.243" cy="827.682" rx="23.762" ry="23.111" fill="#803300"/> </clipPath> <g id="a"> <rect width="159.025" height="12.562" x="182.011" y="79.443" ry="0" fill="#fa4d32"/> <rect ry="0" y="92.004" x="182.011" height="12.562" width="159.025" fill="#fdb020"/> <rect width="159.025" height="12.562" x="182.011" y="104.566" ry="0" fill="#fdf133"/> <rect ry="0" y="117.128" x="182.011" height="12.562" width="159.025" fill="#1ce590"/> <rect width="159.025" height="12.562" x="182.011" y="129.689" ry="0" fill="#13a1e3"/> <rect ry="0" y="142.251" x="182.011" height="12.562" width="159.025" fill="#7e2ae4"/> <rect width="159.025" height="12.562" x="182.011" y="154.813" ry="0" fill="#9e4ea5"/> </g> <g id="c"> <use height="100%" width="100%" xlink:href="#a" transform="rotate(-45 965.632 1098.357) scale(2 3)"/> <use height="100%" width="100%" xlink:href="#a" transform="rotate(-45 1282.497 967.107) scale(2 3)"/> </g> </defs> <g transform="translate(67.874 -9.03)"> <g class="vvg__body"> <ellipse class="vvg__shirt vvg__shirt--shade vvg-stroke" transform="translate(3.085 -12.7)" cx="-18.854" cy="148.83" rx="37.558" ry="34.35" stroke-linecap="round" stroke-linejoin="round"/> <path class="vvg__shirt" d="M-19.325 101.965a37.558 34.35 0 00-34.001 34.165 37.558 34.35 0 0033.706 34.165 37.558 34.35 0 0034-34.165 37.558 34.35 0 00-33.705-34.165z" /> <circle class="vvg__neck vvg-skin vvg-stroke" transform="translate(3.085 -12.7)" cx="-18.854" cy="112.584" r="13.363" stroke-linecap="round" stroke-linejoin="round"/> <ellipse class="vvg__body-outline vvg-stroke" transform="translate(3.085 -12.7)" ry="34.35" rx="37.558" cy="148.83" cx="-18.854" fill="none" stroke-linecap="round" stroke-linejoin="round"/> </g> <g class="vvg__head-group"> <g class="vvg__head"> <circle class="vvg-skin vvg__ear vvg-stroke" r="8.553" cy="73.563" cx="-59.067" stroke-linecap="round" stroke-linejoin="round" transform="translate(.406)"/> <g class="vvg__face"> <circle class="vvg-skin--shade" cx="-15.769" cy="63.674" r="44.099" stroke-linecap="round" stroke-linejoin="round"/> <path class="vvg-skin" d="M-21.87 20.047a44.1 44.1 0 00-37.998 43.627A44.1 44.1 0 00-21.84 107.3a44.1 44.1 0 0038-43.626 44.1 44.1 0 00-38.03-43.627z" fill="#f4e3d7"/> </g> <g class="vvg__beard"> <path class="vvg-hair" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0044.099 44.1 44.1 44.1 0 0044.1-44.1 44.1 44.1 0 00-5.67-21.523c5.746 41.309-17.27 46.421-38.43 46.421-21.174 0-45.005-4.052-38.424-46.494z" stroke-linecap="round" stroke-linejoin="round"/> <path class="vvg-hair--light" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0019.076 36.252 43.902 43.902 0 0020.79 5.201c24.355 0 44.1-19.744 44.1-44.1a44.09 44.09 0 00-.544-6.775c-.075 30.245-20.437 34.32-39.323 34.32-21.174 0-45.005-4.052-38.424-46.494z"/> <path class="vvg-stroke vvg__beard-outline" d="M-54.193 42.078a44.1 44.1 0 00-5.675 21.596 44.1 44.1 0 0044.099 44.1 44.1 44.1 0 0044.1-44.1 44.1 44.1 0 00-5.67-21.523c5.746 41.309-17.27 46.421-38.43 46.421-21.174 0-45.005-4.052-38.424-46.494z" fill="none" stroke-linecap="round" stroke-linejoin="round"/> </g> <g class="vvg__moustache"> <path class="vvg-hair" d="M4.78 89.546A20.548 12.028 0 00-5.496 79.13a20.548 12.028 0 00-20.548 0 20.548 12.028 0 00-10.274 10.416h20.548z" stroke-linecap="round" stroke-linejoin="round"/> <path class="vvg-hair--light" d="M-17.866 77.593a20.548 12.028 0 00-8.177 1.537 20.548 12.028 0 00-10.274 10.416H.546A20.548 12.028 0 00-9.728 79.13a20.548 12.028 0 00-8.138-1.537z"/> <path class="vvg__moustache-outline vvg-stroke" d="M4.78 89.546A20.548 12.028 0 00-5.496 79.13a20.548 12.028 0 00-20.548 0 20.548 12.028 0 00-10.274 10.416h20.548z" fill="none" stroke-width="1.654" stroke-linecap="round" stroke-linejoin="round"/> </g> <g class="vvg__eyes-group"> <g class="vvg-stroke vvg__eyes" transform="translate(.487)" stroke-width="1.296" stroke-linecap="round" stroke-linejoin="round"> <circle r="1.998" cy="64.681" cx="-33.494"/> <circle cx=".983" cy="64.681" r="1.998"/> </g> </g> <rect class="vvg__hair vvg-hair" width="57.452" height="26.269" x="-44.495" y="22.4" ry="4.438"/> <g class="vvg__cheeks" transform="translate(-.468)"> <circle r="3.875" cy="73.162" cx="-39.021"/> <circle cx="8.419" cy="73.162" r="3.875"/> </g> <g class="vvg__eyebrows vvg-stroke" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M-40.713 61.55a6.123 6.123 0 018.486-5.699"/> <path d="M9.176 61.55a6.123 6.123 0 00-8.487-5.7"/> </g> </g> <g class="vvg__cap"> <rect class="vvg-stroke vvg__cap-strap" width="43.566" height="7.408" x="-37.953" y="42.542" ry="3.704" stroke-linecap="round" stroke-linejoin="round"/> <rect class="vvg-stroke vvg__cap-strap" ry="3.704" y="42.542" x="-22.798" height="7.408" width="28.411" stroke-linecap="round" stroke-linejoin="round"/> <ellipse class=" vvg-stroke vvg__cap-button" cx="-15.769" cy="10.626" rx="2.847" ry="1.157" stroke-linecap="round" stroke-linejoin="round"/> <circle class="vvg__cap-notch" cx="-17.198" cy="46.246" r=".945"/> <circle class="vvg__cap-notch" r=".945" cy="46.246" cx="-5.67"/> <circle class="vvg__cap-notch" cx="-11.339" cy="46.246" r=".945"/> <path class="vvg__cap-body vvg-stroke" d="M-14.755 11.393a42.956 38.567 0 00-22.492 5.157 42.956 38.567 0 00-21.478 33.4h26.174v-2.467c2.27-12.737 2.466-12.32 16.782-12.32 14.316 0 14.577-.028 15.98 12.32v2.467h26.976A42.956 38.567 0 005.71 16.55a42.956 38.567 0 00-20.464-5.157z" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> <!-- <path d="M-14.755 11.393a42.956 38.567 0 00-22.492 5.157 42.956 38.567 0 00-21.478 33.4h26.174v-2.467c2.27-12.737 2.466-12.32 16.782-12.32 14.316 0 14.577-.028 15.98 12.32v2.467h26.976A42.956 38.567 0 005.71 16.55a42.956 38.567 0 00-20.464-5.157z" fill="#4d4d4d" stroke="#000" stroke-width="1.323" stroke-linecap="round" stroke-linejoin="round"/> --> <g class="vvg__bulb" transform="translate(-39.365 -11.864)" stroke-linecap="round"> <path class="vvg__bulb-dashes" d="M10.794 5.982a22.935 22.935 0 1125.335.178" fill="none.........完整代码请登录后点击上方下载按钮下载查看
网友评论0