我怎样才能制作这个动画?
到目前为止,我是这样的:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: royalblue;
}
.block {
width: 800px;
height: 400px;
margin: 200px auto 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
-webkit-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
}
.centerBlock {
width: 410px;
height: 110px;
border-radius: 100px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to right, white, grey, grey, black, black);
z-index: 10;
}
.back {
width: 400px;
height: 100px;
border-radius: 100px;
background-image: linear-gradient(to right, white, grey, black, black);
z-index: 15;
}
.bl {
position: absolute;
width: 110px;
height: 110px;
}
.left {
transform: translateY(-5px) translateX(-5px);
background-color: black;
border: 5px solid white;
border-radius: 50%;
z-index: 2;
}
.right {
transform: translateX(155px);
background-color: black;
z-index: 2;
width: 110px;
height: 110px;
border-radius: 110px;
border: 5px solid black;
border-left: 5px solid white;
animation: rotate 5s infinite linear;
}
.lineTop {
position: absolute;
height: 5px;
width: 100px;
transform: translateY(-52.5px) translateX(-100px);
background-color: white;
z-index: 10;
border-radius: 25px;
animation: anim_top 5s infinite linear;
}
.lineBottom {
position: absolute;
height: 5px;
width: 0;
transform: translateY(52px) translateX(150px);
background-color: white;
z-index: 10;
border-radius: 25px;
animation: anim_bot 5s infinite linear;
}
@keyframes rotate {
0%,
30% {
transform: translateX(155px);
}
55%,
100% {
transform: translateX(155px) rotate(360deg);
}
}
@keyframes anim_top {
0% {
transform: translateY(-52px) translateX(-100px);
}
35% {
transform: translateY(-52px) translateX(120px);
width: 100px;
}
45%,
100% {
transform: translateY(-52px) translateX(155px);
width: 0;
}
}
@keyframes anim_bot {
45% {
width: 0;
transform: translateY(52px) translateX(150px);
}
50% {
width: 100px;
transform: translateY(52px) translateX(110px);
}
80% {
transform: translateY(52px) translateX(-110px);
width: 100px;
}
90%,
100% {
transform: translateY(52px) translateX(-155px);
width: 0;
}
}
<div class="block">
<div class="centerBlock">
<div class="lineTop"></div>
<div class="lineBottom"></div>
<div class="bl right">
<div class="border"></div>
</div>
<div class="back">
<div class="bl left"></div>
</div>
</div>
</div>
简短的回答
fill="url(#grad)" stroke="white" stroke-width="10"
stroke-dasharray
stroke-dashoffset
详细一点,一步一步来:
第 1 步:绘制形状
我们看到有必要画两个半圆和两条直线
1.1 使用椭圆弧命令创建一个半圆- 椭圆弧 (A, a)
从半径为A50的底部点150.250到顶部点150.150
1.2 添加水平线h500
1.3 在坐标650.250 的底部点添加第二个半圆A50.50 0 0 1 650.250
1.4 添加第二条(底部)水平线h -500
图已经准备好了,我们可以在没有矢量编辑器的情况下绘制它!
步骤 2. 使用将线分成三个扇区
stroke-dasharray
使用该方法
getTotalLength()
,我们找到了线的总长度——1314px每个扇区的长度
1314 / 3 = 438px
添加到
stroke-dasharray="280,158"
,其中第一个数字是破折号的长度,第二个是空格的长度。总和应该是:
438px
第 3 步:为线条的旋转设置动画
第 4 步。制作图形细节
<circle cx="150" cy="200" r="50" fill="#151515" stroke="white" stroke-width="10" />
请参阅代码中的注释。
根据第一个答案,只需进行最小的更改,您就可以制作链条、齿轮等。
stroke-dasharray="15.7, 15.7"
点击开始动画:
stoke-dasharray
我们将圆圈分成相等的部分(牙齿)单击时更改旋转的示例
让我们把动画复杂一点:当你点击左边的齿轮时,链条和齿轮顺时针旋转。当您单击右齿轮时,旋转为逆时针方向。
改变旋转方向是通过改变值来实现的:
values="1314;0"
- 正向和values="0;1314"
- 反向3d 尝试