如何解决CSS动画从左到右移动眼睛
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
#eyes {
animation: sun-eyes 2s ease infinite;
transform-origin: center;
animation-direction: alternate;
}
@keyframes sun-eyes {
from {
-webkit-transform: translate(100px,0)
}
to {
-webkit-transform: translate(-350px,0)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<svg width="20%" height="70vh" viewBox="0 0 1274 754" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="sunfigma 1">
<g id="sunbody">
<path id="Vector" d="M62.4028 749.792H1274" stroke="black" stroke-miterlimit="10" />
<path id="Vector_2"
d="M656.983 237.831C646.606 237.831 636.313 238.251 626.132 239.009C623.327 239.233 620.523 239.486 617.718 239.766C559.204 245.604 502.707 264.321 452.278 294.575C401.85 324.828 358.739 365.869 326.039 414.754C293.339 463.639 271.859 519.156 263.14 577.323C254.422 635.491 258.68 694.867 275.61 751.195H1038.47C1056.36 691.685 1060.08 628.816 1049.36 567.608C1038.63 506.399 1013.74 448.548 976.686 398.672C939.628 348.796 891.425 308.277 835.925 280.35C780.425 252.423 719.166 237.863 657.039 237.831H656.983Z"
fill="url(#paint0_linear)" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_3" d="M235.42 101.915L370.491 246.976" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_4" d="M764.568 178.415L825.569 0.925781" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_5" d="M1094.08 389.624L1235.74 294.188" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_6" d="M1140.67 730.857L1251.28 739.3" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_7" d="M0.701172 558.95L164.744 601.253" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
</g>
<g id="eyes">
<path id="Vector_8"
d="M724.294 690.881C730.49 690.881 735.512 685.858 735.512 679.66C735.512 673.463 730.49 668.439 724.294 668.439C718.098 668.439 713.075 673.463 713.075 679.66C713.075 685.858 718.098 690.881 724.294 690.881Z"
fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_9"
d="M837.881 681.063C837.881 684.039 836.699 686.893 834.595 688.998C832.491 691.102 829.638 692.284 826.663 692.284C820.464 692.284 815.444 685.86 815.444 679.66C815.444 673.461 820.464 669.842 826.663 669.842C829.638 669.842 832.491 671.024 834.595 673.129C836.699 675.233 837.881 678.087 837.881 681.063Z"
fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
</g>
</g>
<defs>
<linearGradient id="paint0_linear" x1="363" y1="-78" x2="863" y2="1098" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFDB00" />
<stop offset="1" stop-color="#FFDB00" />
</linearGradient>
</defs>
</svg>
</body>
</html>
如何在不显示眼球移动过渡并保持正确姿势的情况下,直接从左向右和从右向左移动眼球?
我是CSS动画的新手。任何帮助,将不胜感激!我已经添加了尽可能多的代码片段。
谢谢
解决方法
就像下面一样,没有复杂的JS代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
#eyes {
animation: sun-eyes 2s ease infinite;
transform-origin: center;
animation-direction: alternate;
}
@keyframes sun-eyes {
0%,50% {
transform: translate(100px,0)
}
50.1%,100% {
transform: translate(-350px,0)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<svg width="20%" height="70vh" viewBox="0 0 1274 754" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="sunfigma 1">
<g id="sunbody">
<path id="Vector" d="M62.4028 749.792H1274" stroke="black" stroke-miterlimit="10" />
<path id="Vector_2"
d="M656.983 237.831C646.606 237.831 636.313 238.251 626.132 239.009C623.327 239.233 620.523 239.486 617.718 239.766C559.204 245.604 502.707 264.321 452.278 294.575C401.85 324.828 358.739 365.869 326.039 414.754C293.339 463.639 271.859 519.156 263.14 577.323C254.422 635.491 258.68 694.867 275.61 751.195H1038.47C1056.36 691.685 1060.08 628.816 1049.36 567.608C1038.63 506.399 1013.74 448.548 976.686 398.672C939.628 348.796 891.425 308.277 835.925 280.35C780.425 252.423 719.166 237.863 657.039 237.831H656.983Z"
fill="url(#paint0_linear)" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_3" d="M235.42 101.915L370.491 246.976" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_4" d="M764.568 178.415L825.569 0.925781" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_5" d="M1094.08 389.624L1235.74 294.188" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_6" d="M1140.67 730.857L1251.28 739.3" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_7" d="M0.701172 558.95L164.744 601.253" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
</g>
<g id="eyes">
<path id="Vector_8"
d="M724.294 690.881C730.49 690.881 735.512 685.858 735.512 679.66C735.512 673.463 730.49 668.439 724.294 668.439C718.098 668.439 713.075 673.463 713.075 679.66C713.075 685.858 718.098 690.881 724.294 690.881Z"
fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_9"
d="M837.881 681.063C837.881 684.039 836.699 686.893 834.595 688.998C832.491 691.102 829.638 692.284 826.663 692.284C820.464 692.284 815.444 685.86 815.444 679.66C815.444 673.461 820.464 669.842 826.663 669.842C829.638 669.842 832.491 671.024 834.595 673.129C836.699 675.233 837.881 678.087 837.881 681.063Z"
fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
</g>
</g>
<defs>
<linearGradient id="paint0_linear" x1="363" y1="-78" x2="863" y2="1098" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFDB00" />
<stop offset="1" stop-color="#FFDB00" />
</linearGradient>
</defs>
</svg>
</body>
</html>
,
我使用一些javascipt / jquery来创建一些在循环内发生的定时事件。
let eyes = $("#eyes");
function LoopForever() {
setTimeout(function() { $(eyes).css('-webkit-transform','translate(-350px,0)'); },1000);
setTimeout(function() { $(eyes).css('display','none'); },2000);
setTimeout(function() { $(eyes).css('display','block'); },2300);
setTimeout(function() { $(eyes).css('-webkit-transform','translate(100px,3300);
setTimeout(function() { $(eyes).css('display',4300);
setTimeout(function() { $(eyes).css('display',4500);
}
var interval = self.setInterval(function(){LoopForever()},7000);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<svg width="20%" height="70vh" viewBox="0 0 1274 754" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="sunfigma 1">
<g id="sunbody">
<path id="Vector" d="M62.4028 749.792H1274" stroke="black" stroke-miterlimit="10" />
<path id="Vector_2"
d="M656.983 237.831C646.606 237.831 636.313 238.251 626.132 239.009C623.327 239.233 620.523 239.486 617.718 239.766C559.204 245.604 502.707 264.321 452.278 294.575C401.85 324.828 358.739 365.869 326.039 414.754C293.339 463.639 271.859 519.156 263.14 577.323C254.422 635.491 258.68 694.867 275.61 751.195H1038.47C1056.36 691.685 1060.08 628.816 1049.36 567.608C1038.63 506.399 1013.74 448.548 976.686 398.672C939.628 348.796 891.425 308.277 835.925 280.35C780.425 252.423 719.166 237.863 657.039 237.831H656.983Z"
fill="url(#paint0_linear)" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_3" d="M235.42 101.915L370.491 246.976" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_4" d="M764.568 178.415L825.569 0.925781" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_5" d="M1094.08 389.624L1235.74 294.188" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
<path id="Vector_6" d="M1140.67 730.857L1251.28 739.3" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_7" d="M0.701172 558.95L164.744 601.253" stroke="black" stroke-width="2"
stroke-miterlimit="10" />
</g>
<g id="eyes">
<path id="Vector_8"
d="M724.294 690.881C730.49 690.881 735.512 685.858 735.512 679.66C735.512 673.463 730.49 668.439 724.294 668.439C718.098 668.439 713.075 673.463 713.075 679.66C713.075 685.858 718.098 690.881 724.294 690.881Z"
fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path id="Vector_9"
d="M837.881 681.063C837.881 684.039 836.699 686.893 834.595 688.998C832.491 691.102 829.638 692.284 826.663 692.284C820.464 692.284 815.444 685.86 815.444 679.66C815.444 673.461 820.464 669.842 826.663 669.842C829.638 669.842 832.491 671.024 834.595 673.129C836.699 675.233 837.881 678.087 837.881 681.063Z"
fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
</g>
</g>
<defs>
<linearGradient id="paint0_linear" x1="363" y1="-78" x2="863" y2="1098" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFDB00" />
<stop offset="1" stop-color="#FFDB00" />
</linearGradient>
</defs>
</svg>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。