js实现线条眼睛眨眼动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现线条眼睛眨眼动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --rotation: 0deg; --container-width: 600px; --container-height: 600px; --element-width: 62%; --element-height: 62%; --element-bottom: 6%; --element-right: 5%; --outline-width: 1px; } body { margin: 0; overflow: hidden; background: var(--body-background-color); font-family: "Operator Mono", menlo, monaco, monospace; font-size: 14px; color: white; } .settings-panel { /* remove this to enter adjustment mode */ display: none; position: absolute; max-width: 200px; max-height: 435px; overflow: auto; padding: .5em; background: #00000099; border-radius: 6px; } .settings-panel-title { cursor: pointer; } .settings-panel[open] .settings-panel-title { cursor: default; } #settings { position: relative; z-index: 2; } .setting { display: block; margin-bottom: .5em; } .setting:first-of-type { margin-top: 1em; } #scene { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #scene div { width: var(--container-width); height: var(--container-height); border-top: var(--outline-width) solid deeppink; border-right: var(--outline-width) solid mediumspringgreen; position: relative; border-radius: 100%; transform: translateZ(0) rotate(var(--rotation)); } #scene div div { width: var(--element-width); position: absolute; bottom: var(--element-bottom); right: var(--element-right); animation: eyeball 2s infinite ease-in-out; } @keyframes eyeball { from, 8%, 92%, to { height: 99.6%; } 50% { height: var(--element-height); } } </style> </head> <body> <div id="scene"></div> <details class="settings-panel"> <summary class="settings-panel-title">Settings</summary> <div id="settings"></div> <button id="print">Print to console</button> </details> <template id="range-setting-template"> <label class="setting">{id}: <span id="{id}-value">{value}</span> <br /> <input id="{id}-input" type="range" min="{min}" max="{max}" value="{value}" /> </label> </template> <template id="color-setting-template"> <label class="setting">{id}: <span id="{id}-value">{value}</span> <br /> <input id="{id}-input" type="color" value="{value}" /> </label> </template> <script> const getNestedMarkup = (tagName, amount) => { return [ Array(amount).fill(`<${tagName}>`).join(''), Array(amount).fill(`</${tagName}>`).join('')]. join(''); }; const query = document.querySelector.bind(document); const setCSSProperty = (key, value, scope = window.document.documentElement) => { scope.style.setProperty(key, value); }; const renderTemplate = (template, data) => { Object.keys(data).forEach(key => { const pattern = new RegExp(`{${key}}`, 'g'); template = template.replace(pattern, data[key]); }); return template; }; const settings = [{ id: 'rotation', type: 'range', min: -360, max: 360, value: 180, hasCSSProperty: true, get formattedValue() { return `${this.value}deg`; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0