js实现线条眼睛眨眼动画效果代码-html代码-BFW代码库

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".........完整代码请登录后点击上方下载按钮下载查看