https://www.w3schools.com/code/tryit.asp?filename=FQI7JGNB7W5G
我怎样才能制作我的代码;从 .roundbutton 到 .roundbutton-active。
我试过 js 但这不起作用。
.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>
仅基于给出的内容,一个简单的解决方案是选择圆形按钮类并切换“活动”类。
这可以通过说一个点击元素在jQuery中完成
$("div.round-button").click(function(){
$(this).toggleClass("active");
});
那是假设您尝试选择具有圆形按钮类而不是锚标记的 div。尽量不要让子元素与其父元素具有相同的类,因为这可能是 JS 最初不适合您的原因。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句