左眼跳edit icon

作者:
用户fkxIv10
Fork(复制)
下载
嵌入
设置
BUG反馈
index.html
style.css
index.js
现在支持上传本地图片了!
            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="48" fill="yellow" stroke="#000" stroke-width="4" />
    <path d="M20 57.5 h70" stroke="#000" stroke-width="4" class="mouth" />
    <g class="eyeR">
        <path d="M 62 50 v-6 a 1 1 0 0 1 30 0v6" fill="#fff" stroke="#000" stroke-width="3" />
        <path d="M 62 50 h30" stroke-linecap="square" stroke="darkorange" stroke-width="3" />
        <circle cx="83" cy="41.5" r="5" fill="#000" />
    </g>
    <g class="eyeL">
        <path d="M 15 50 v-6 a 1 1 0 0 1 30 0v6" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round">
            <animate id="a1" attributeName="d" values="M 15 50 v -6 c 0 -3 1 -6 3 -9 c 6 -8 18 -8 24 0 c 2 3 3 6 3 9 v 6; M 15 44 v 0 c 0 -3 1 -6 3 -9 c 11 0 13 0 24 0 c 2 3 3 6 3 9 v 0; M 15 50 v -6 c 0 -3 1 -6 3 -9 c 6 -8 18 -8 24 0 c 2 3 3 6 3 9 v 6" dur=".2s" begin="0s; a1.end+1s" repeatCount="2" keyTimes="0;0.5;1" keySplines="1 0 1 0;1 0 1 0" calcMode="spline" />
        </path>
        <circle cx="36" cy="41.5" r="5" fill="#000" />
        <path d="M 15 50 h30" stroke-linecap="square" stroke="darkorange" stroke-width="3">
            <animate attributeName="d" values="M 15 50 h30; M 15 45 h30; M 15 50 h30" dur=".2s" begin="0s; a1.end+1s" repeatCount="2" keyTimes="0;0.5;1" keySplines="1 0 1 0;1 0 1 0" calcMode="spline" />
        </path>
    </g>
</svg>
</body>

</html>
        
预览
控制台