gpt4 book ai didi

javascript - 如何在 Div Wrapper 中实现圆形动画

转载 作者:可可西里 更新时间:2023-11-01 13:47:13 25 4
gpt4 key购买 nike

目前我正在修改这个jsfiddle ,但我的问题是我不能让它绕着某个方向转。

  .dice-wrapper {
position: absolute;
/* top: 50%; */
top: 209px;
right: -9px;
/* left: 50%; */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}

@-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@keyframes myOrbit {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-300deg); }
}

这应该是行为 enter image description here

行为说明:它会绕着箭头转一圈,然后原地返回。

这应该只在用户点击按钮时才会动画,而不是无限点击。

最佳答案

如果它应该在发布后停止

动画应该在事件状态下开始。在您的代码中,它不处于事件状态,因此它会在页面加载时启动。当然,当按下另一个按钮时它不能被激活。

尝试修复它:

.dice-wrapper {
position: absolute;
/* top: 50%; */
top: 209px;
right: -9px;
/* left: 50%; */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper:active { // :active is the pseudo class when mouse is down
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear; /* Opera 12+ */
animation: myOrbit 4s linear; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
// Keyframes...

当您使用它时,动画将在按下按钮时播放,松开时将停止。

如果发布后不应停止

如果你不想使用JavaScript,那是不可能的。

使用 JavaScript,您的 css 应该是:

.dice-wrapper {
position: absolute;
/* top: 50%; */
top: 209px;
right: -9px;
/* left: 50%; */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}
.dice-wrapper.pressed { // .pressed class will be added in JavaScript
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear; /* Opera 12+ */
animation: myOrbit 4s linear; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
// Keyframes...

Note that :active is replaced by .pressed

在 JavaScript 中,在按下时添加 pressed 类(我使用的是 jQuery):

$(".dice-wrapper").click(function(){
$(this).addClass("pressed"); // Activate the animation
})

如果您想在鼠标按下按钮时启动动画,请将click 替换为mousedown。您也可以使用另一个按钮。使用 setTimeout 函数停止动画。

$("#button").click(function(){
$(this).addClass("pressed");
})
setTimeout(function(){
$(this).removeClass("pressed")
}, 2000); // 2 seconds = 2000 milliseconds

关于javascript - 如何在 Div Wrapper 中实现圆形动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40460999/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com