反正有没有在 CSS/JS 中构建像风车一样的动画？
Posted
技术标签:
【中文标题】反正有没有在 CSS/JS 中构建像风车一样的动画？【英文标题】：Is there anyway to build windmill like animation in CSS/JS? 【发布时间】：2022-01-21 23:14:42 【问题描述】：Demo Pic Here
CodePen
我制作了四个元素 A~D，并使用 CSS position: absolute 将它们放置在位置 1~4。
我的目标是让元素在点击时像风车一样移动，并将元素强调在位置 1，例如：
例子：
-
点击elementD（位于4），D会移动到1，放大1.5倍，同时A会移动到2，B -> 3，C -> 4
现在的位置应该是： A@2 B@3 C@4 D@1(1.5x 尺寸)
-
然后，单击 B（现在位于位置 3），B 将以 1.5 倍比例顺时针或逆时针移动到位置 1
其他元素也将移动，D 将调整为原始大小。
我是前端新手，我被要求制作这个动画..希望有人能给我这样的指导......谢谢！
【问题讨论】：
这可能会有所帮助：***.com/questions/10990942/… 看看transform rotate，看看你在哪里-旋转整个thng（如果它看起来像一个风车，而不是单个零件旋转）。然后，如果您遇到问题，请在描述问题所在的问题中发布您的代码。 【参考方案1】：我在这里做了一支笔：https://codepen.io/shahriarkh/pen/rNGwQMQ?editors=1100
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
background: skyblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
.windmill
width: 80px;
height: 80px;
position: relative;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: orbitAll;
-webkit-animation-duration: 10s;
.wheel
background: transparent;
height: 180px;
width: 180px;
position: absolute;
top: -50px; /* (180-80)÷2 */
left: -50px;
border: 8px solid #804040;
border-radius: 100%;
/* .axis
width: 8px;
height: 180px;
background: #804040;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
*/
.blade
width: 80px;
height: 80px;
line-height: 80px;
background: brown;
position: absolute;
border-radius: 32px;
color: white;
font-weight: 800;
text-align: center;
font-family: tahoma;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: orbitBlade;
-webkit-animation-duration: 10s;
#b1
right: 80px;
#b2
bottom: 80px;
#b3
left: 80px;
#b4
top: 80px;
@-webkit-keyframes orbitAll
from
-webkit-transform: rotate(0deg);
to
-webkit-transform: rotate(360deg);
@-webkit-keyframes orbitBlade
from
-webkit-transform: rotate(0deg);
to
-webkit-transform: rotate(-360deg);
<body>
<div class="windmill">
<div class="wheel">
<!-- <div class="axis"></div>
<div class="axis"></div>
<div class="axis"></div>
<div class="axis"></div>
<div class="axis"></div>
<div class="axis"></div>
<div class="axis"></div> -->
</div>
<div class="blade" id="b1">1</div>
<div class="blade" id="b2">2</div>
<div class="blade" id="b3">3</div>
<div class="blade" id="b4">4</div>
</div>
</body>您唯一需要做的就是通过 javascript 控制 transform: rotate(...) 并将 eventListeners 绑定到框 (.blades)
我只是添加了一些“不漂亮”的附加样式。随意删除它们。
【讨论】：
以上是关于反正有没有在 CSS/JS 中构建像风车一样的动画？的主要内容，如果未能解决你的问题，请参考以下文章