如何使点击有效和无效 [英] how to make active and inactive on click
本文介绍了如何使点击有效和无效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在单击时使按钮处于活动状态和非活动状态?有5个按钮，每个按钮都有其自己的功能.当单击一个按钮时，某些动画将连续开始；如果单击相同的一个按钮，如何停止动画；如何禁用其余四个按钮；单击活动的其余按钮时，则必须禁用.前进(假设如果单击A，它必须处于活动状态，并且必须禁用BCDE，并且如果再次单击A，它必须进入正常状态，BCDE必须启用)
How to make buttons active and inactive on click? am having 5 button each one has its own function. when click on A button some animation will start continuously,if click on same A button how to stop animation, how to make rest of the four buttons has to disable and when click on the active one rest of the buttons has to disable.thanks in advance (suppose if A is clicked it has to active and B C D E has to be disabled and if A is clicked again it has to come to normal state B C D E has to enable)
function bubbles() {
$.each($(".particletext.bubbles"), function(){
var bubblecount = 4;
for(var i = 0; i <= bubblecount; i++) {
var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10);
$(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function hearts() {
$.each($(".particletext.hearts"), function(){
var heartcount = 3;
for(var i = 0; i <= heartcount; i++) {
var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10);
$(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function confetti() {
$.each($(".particletext.confetti"), function(){
var confetticount = 4;
for(var i = 0; i <= confetticount; i++) {
$(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function fire() {
$.each($(".particletext.fire"), function(){
var firecount = 2;
for(var i = 0; i <= firecount; i++) {
var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8;
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function sunbeams() {
$.each($(".particletext.sunbeams"), function(){
var linecount = 3;
for(var i = 0; i <= linecount; i++) {
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>');
}
});
}
.particletext {
text-align: center;
font-size: 48px;
position: relative;
}
.particletext.bubbles > .particle {
opacity: 0;
position: absolute;
background-color: rgba(33, 149, 243, 0.603);
-webkit-animation: bubbles 3s ease-in infinite;
animation: bubbles 3s ease-in infinite;
border-radius: 100%;
}
.particletext.hearts > .particle {
opacity: 0;
position: absolute;
background-color: rgba(204,42,93,1);
-webkit-animation: hearts 3s ease-in infinite;
animation: hearts 3s ease-in infinite;
}
.particletext.hearts > .particle:before,.particletext.hearts > .particle:after {
position: absolute;
content: '';
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(204,42,93,1);
}
.particletext.hearts > .particle:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.particletext.hearts > .particle:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.particletext.lines > .particle {
position: absolute;
background-color: rgba(244, 67, 54, 0.5);
-webkit-animation: lines 3s linear infinite;
animation: lines 3s linear infinite;
}
.particletext.confetti > .particle {
opacity: 0;
position: absolute;
-webkit-animation: confetti 3s ease-in infinite;
animation: confetti 3s ease-in infinite;
}
.particletext.confetti > .particle.c1 {
background-color: rgba(76, 175, 80, 0.5);
}
.particletext.confetti > .particle.c2 {
background-color: rgba(156, 39, 176, 0.5);
}
.particletext.fire > .particle {
position: absolute;
background-color: rgba(7, 141, 255, 0.5);
border-radius: 40px;
border-top-right-radius: 0px;
-webkit-animation: fires 0.8s linear infinite;
animation: fires 0.8s linear infinite;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0;
}
.particletext.fire > .particle:before {
position: absolute;
content: '';
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 40px;
border-top-right-radius: 0px;
background-color: rgba(0, 66, 251, 0.5);
}
.particletext.sunbeams > .particle {
position: absolute;
background-color:#dc3dd5;
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
-webkit-animation: sunbeams 3s linear infinite;
animation: sunbeams 3s linear infinite;
}
@-webkit-keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
}
@keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
}
@-webkit-keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
@keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
@-webkit-keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@-webkit-keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@-webkit-keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}
@keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}
ul.socialIcons {
padding: 0;
text-align: center;
}
.socialIcons li {
background: #fff;
list-style: none;
display: inline-block;
margin: 0 25px;
font-size: 12px;
}
.socialIcons li a {
text-decoration: none;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="socialIcons">
<li class="particletext hearts" onclick="hearts()"><a>A</a></li>
<li class="particletext bubbles" onclick="bubbles()"><a>B</a></li>
<li class="particletext sunbeams" onclick="sunbeams()"><a>C</a></li>
<li class="particletext confetti" onclick="confetti()"><a>D</a></li>
<li class="particletext fire" onclick="fire()"><a>E</a></li>
</ul>
推荐答案
@aryana这是您上次想要的解决方案.现在，当单击一个按钮时，它将触发其动画，您可以通过再次单击将其停止.如果单击了其他任何禁用按钮，则其他按钮将停止运行，并且将触发该按钮的动画.
我对js文件和html文件进行了一些更改.并通过注释指示更改.
@aryana here's the solution last time you've wanted. Now when a button is clicked it will fire its animation and you can stop it by clicking it again. And if any other dissable button is clicked other buttons and any of their running animation will stop and the animation of this button will be fired.
I made some change in js file and html file. And changes are indicated by comments.
// My code starts here
var clickedElement = ""; //track the click element
var elementClassName;
$('.particletext').click(function () {
$('.particletext').children('span').remove(); //remove animation for click
elementClassName = $(this).attr('class');
if (clickedElement == elementClassName) { //if the same element is clicked again then it simply null the clickedElement
clickedElement = "";
} else { //if different element is clicked then it store the element class in clickedElement and fires the respective animation animation
clickedElement = elementClassName;
elementFunctionName = (elementClassName.split(" "))[1];
if (elementFunctionName == "hearts") {
hearts();
} else if (elementFunctionName == "bubbles") {
bubbles();
} else if (elementFunctionName == "sunbeams") {
sunbeams();
} else if (elementFunctionName == "confetti") {
confetti();
} else if (elementFunctionName == "fire") {
fire();
}
}
})
// My code ends here
function stopAnimation(element) {
$(element).children('span').remove(); //remove animating particles
//for second click re-add onclick functions to all elements
$('.hearts').each(function() {
$(this).attr("onclick", "hearts()");
$(this).attr("onclick");
})
$('.bubbles').each(function() {
$(this).attr("onclick", "bubbles()");
$(this).attr("onclick");
})
$('.sunbeams').each(function() {
$(this).attr("onclick", "sunbeams()");
})
$('.confetti').each(function() {
$(this).attr("onclick", "confetti()");
})
$('.fire').each(function() {
$(this).attr("onclick", "fire()");
})
}
function bubbles() {
$.each($(".particletext.bubbles"), function(){
var bubblecount = 4;
for(var i = 0; i <= bubblecount; i++) {
var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10);
$(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function hearts() {
$.each($(".particletext.hearts"), function(){
var heartcount = 3;
for(var i = 0; i <= heartcount; i++) {
var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10);
$(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function confetti() {
$.each($(".particletext.confetti"), function(){
var confetticount = 4;
for(var i = 0; i <= confetticount; i++) {
$(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function fire() {
$.each($(".particletext.fire"), function(){
var firecount = 2;
for(var i = 0; i <= firecount; i++) {
var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8;
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}
function sunbeams() {
$.each($(".particletext.sunbeams"), function(){
var linecount = 3;
for(var i = 0; i <= linecount; i++) {
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>');
}
});
}
.particletext {
text-align: center;
font-size: 48px;
position: relative;
}
.particletext.bubbles > .particle {
opacity: 0;
position: absolute;
background-color: rgba(33, 149, 243, 0.603);
-webkit-animation: bubbles 3s ease-in infinite;
animation: bubbles 3s ease-in infinite;
border-radius: 100%;
}
.particletext.hearts > .particle {
opacity: 0;
position: absolute;
background-color: rgba(204,42,93,1);
-webkit-animation: hearts 3s ease-in infinite;
animation: hearts 3s ease-in infinite;
}
.particletext.hearts > .particle:before,.particletext.hearts > .particle:after {
position: absolute;
content: '';
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(204,42,93,1);
}
.particletext.hearts > .particle:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.particletext.hearts > .particle:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.particletext.lines > .particle {
position: absolute;
background-color: rgba(244, 67, 54, 0.5);
-webkit-animation: lines 3s linear infinite;
animation: lines 3s linear infinite;
}
.particletext.confetti > .particle {
opacity: 0;
position: absolute;
-webkit-animation: confetti 3s ease-in infinite;
animation: confetti 3s ease-in infinite;
}
.particletext.confetti > .particle.c1 {
background-color: rgba(76, 175, 80, 0.5);
}
.particletext.confetti > .particle.c2 {
background-color: rgba(156, 39, 176, 0.5);
}
.particletext.fire > .particle {
position: absolute;
background-color: rgba(7, 141, 255, 0.5);
border-radius: 40px;
border-top-right-radius: 0px;
-webkit-animation: fires 0.8s linear infinite;
animation: fires 0.8s linear infinite;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0;
}
.particletext.fire > .particle:before {
position: absolute;
content: '';
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 40px;
border-top-right-radius: 0px;
background-color: rgba(0, 66, 251, 0.5);
}
.particletext.sunbeams > .particle {
position: absolute;
background-color:#dc3dd5;
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
-webkit-animation: sunbeams 3s linear infinite;
animation: sunbeams 3s linear infinite;
}
@-webkit-keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
}
@keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
}
@-webkit-keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
@keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
@-webkit-keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@-webkit-keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@-webkit-keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}
@keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}
ul.socialIcons {
padding: 0;
text-align: center;
}
.socialIcons li {
background: #fff;
list-style: none;
display: inline-block;
margin: 0 25px;
font-size: 12px;
}
.socialIcons li a {
text-decoration: none;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- all onclick methods are removed -->
<ul class="socialIcons">
<li class="particletext hearts"><a>A</a></li>
<li class="particletext bubbles"><a>B</a></li>
<li class="particletext sunbeams"><a>C</a></li>
<li class="particletext confetti"><a>D</a></li>
<li class="particletext fire"><a>E</a></li>
</ul>
这篇关于如何使点击有效和无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
