仅使用CSS模拟眼睛眨眼动画



i具有SVG文件的以下部分(基本上是绘制的连字符(。

<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>

我想在SVG文件的那一部分上闪烁某种眼睛,以使形状看起来像这样。

<path fill="#000000" d="m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z" fill-rule="nonzero"></path>

我不知道如何仅使用CSS执行此操作。一个"眨眼"是第一步。当然,下一步是计时一些不同的眨眼,以使其看起来自然。这是整个SVG形状 - 我会同时"眨眼"左眼和右眼。我希望我可以在这里提供更多细节,但我是新手。

        <svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <clipPath id="p.0">
            <path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
        </clipPath>
        <g clip-path="url(#p.0)">
            <path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
            <path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
            <path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
            <path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
            <path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
            <path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
        </g>
    </svg>

播放更多后,我使用smil

<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <clipPath id="p.0">
            <path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
        </clipPath>
        <g clip-path="url(#p.0)">
            <path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
            <path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
            <path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
            <path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
            <path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
            <path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">

现在我不知道这是否可以,但是我想以某种随机的间隔迭代每个眨眼。或至少,类似的东西:

眨眼.........眨眼。

我不知道如何循环这些动画,但是今晚我在这里学到了很多东西。:(

这是使用SMIL的答案,我刚刚将D值粘贴到了动画元素的值属性中。我已经使用了键盘,以使眨眼之间有一个停顿。

        <svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <clipPath id="p.0">
            <path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
        </clipPath>
        <g clip-path="url(#p.0)">
            <path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
            <path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
            <path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
            <path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
            <path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
            <path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
            <path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
            <animate attributeName="d" dur="3s" repeatCount="indefinite" values="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" keyTimes="0 ; 0.1 ; 0.2 ; 1" />
            </path>
       
        </g>
    </svg>

	.st0{fill:#232323;}
	.st1{fill:#FFFFFF;}
	
	@keyframes open {
		0% { ry: 61.7; }
		95% { ry: 61.7; }
		100% { ry: 0; }
	}
	.left-eye, .right-eye {
		animation-name: open;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 752.9 752.9" style="enable-background:new 0 0 752.9 752.9;" xml:space="preserve">
<g id="circle" transform="translate(-17.5 -17.5) scale(0.3431372549019608)">
	<g>
		<circle vector-effect="non-scaling-stroke" class="st0" cx="1148.1" cy="1148.1" r="1097.1"/>
	</g>
</g>
<g id="icon" transform="translate(-16.325252525252523 -16.361616161616162) scale(0.3232323232323232)">
	<g>
		<ellipse class="st1 left-eye" cx="998.4" cy="1304.6" rx="41.1" ry="61.7"/>
		<ellipse class="st1 right-eye" cx="1409.8" cy="1304.6" rx="41.1" ry="61.7"/>
		<path class="st1" d="M1368.7,1510.3h-329.1c-11.4,0-20.6,9.2-20.6,20.6c0,11.4,9.2,20.6,20.6,20.6h329.1
			c11.4,0,20.6-9.2,20.6-20.6C1389.3,1519.5,1380,1510.3,1368.7,1510.3z"/>
		<path class="st1" d="M1753.5,816.9l-287.9-288c-3.9-3.8-9.1-5.9-14.6-6H751.5c-56.8,0-102.8,46.1-102.9,102.9v1152
			c0.1,56.8,46.1,102.8,102.9,102.9h905.1c56.8,0,102.8-46.1,102.9-102.9V831.5c0-2.7-0.5-5.4-1.6-7.9
			C1756.9,821.1,1755.4,818.8,1753.5,816.9L1753.5,816.9z M1533.2,810.9c-34.1,0-61.7-27.6-61.7-61.7V593.1l217.8,217.8H1533.2z
			 M1656.7,1839.5H751.5c-34.1,0-61.7-27.6-61.7-61.7v-1152c0-34.1,27.6-61.7,61.7-61.7h678.9v185.2
			c0.1,56.8,46.1,102.8,102.9,102.9h185.2v925.7C1718.4,1811.8,1690.7,1839.4,1656.7,1839.5L1656.7,1839.5z"/>
	</g>
</g>
</svg>

最新更新