https://www.w3schools.com/code/tryit.asp?filename=FQI7JGNB7W5G
Comment puis-je créer mon code ; passer de .roundbutton à .roundbutton-active.
J'ai essayé js mais cela ne fonctionnait pas.
.round-button {
width: 45%;
}
.round-button-active {
-webkit-animation-name: example;
/* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes example {
from {
left: 0px;
}
to {
left: 150px;
}
}
@keyframes d {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
.float_center {
float: right;
position: relative;
left: -30%;
/* or right 50% */
text-align: left;
}
.float_center>.child {
position: relative;
left: 50%;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #cfdcec;
overflow: hidden;
background: #ff006e;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #9d0346;
}
.round-button a {
display: block;
float: left;
width: 100%;
padding-top: 50%;
padding-bottom: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #e2eaf3;
font-family: Verdana;
font-size: 4.5em;
font-weight: bold;
text-decoration: none;
}
<video poster="key.png" id="bgvid" playsinline autoplay loop>
<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="videoplayback.mp4" type="video/webm">
<source src="videoplayback.mp4" type="video/mp4">
</video>
<div class="round-button float_center">
<div class="round-button-circle">
<a href="#" class="round-button" ">PLAY</a></div></div>
Basé uniquement sur ce qui est donné, une solution simple serait de sélectionner la classe roundbutton et de basculer une classe "active".
Cela pourrait être fait dans jQuery via, par exemple, un élément de clic en
$("div.round-button").click(function(){
$(this).toggleClass("active");
});
Et cela suppose que vous essayez de sélectionner le div avec la classe du bouton rond et non la balise d'ancrage. Essayez de ne pas avoir un élément enfant avec la même classe que son parent car cela pourrait être la raison pour laquelle le JS ne fonctionnait pas pour vous en premier lieu.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots