html怎么制作播放暂停按钮,css播放暂停按钮切换动画特效

* {

margin:0;

padding:0;

overflow:hidden;

}

body {

width:100%;

height:100vh;

background-image:linear-gradient(to right,#ff758c 0%,#ff7eb3 100%);

display:flex;

justify-content:center;

align-items:center;

}

.container {

width:200px;

height:200px;

background:#000;

background-image:linear-gradient(-20deg,#ddd6f3 0%,#faaca8 100%,#faaca8 100%);

border-radius:50%;

box-shadow:0 0 5px rgba(0,0,0,0.15),0 2px 10px rgba(0,0,0,0.1);

display:flex;

justify-content:center;

align-items:center;

}

#app {

width:80px;

height:80px;

position:relative;

border-radius:50%;

}

.pause,.play {

width:100%;

height:100%;

cursor:pointer;

position:absolute;

}

.line {

position:absolute;

width:8px;

height:50%;

background:#000;

border-radius:10px;

transition:all 400ms cubic-bezier(0.8,0,0.33,1);

}

.pause .line_1 {

margin:25% 0;

left:28%;

}

.pause .line_2 {

margin:100% -16%;

right:45%;

transition-delay:200ms;

}

.pause.active .line {

opacity:1;

}

.pause.active .line_1 {

margin:25% 0;

left:28%;

}

.pause.active .line_2 {

margin:25% 0;

right:28%;

}

.play .line {

margin:25% 0;

}

.play .line_1 {

left:28%;

}

.play .line_2 {

height:56%;

left:60%;

transform:rotate(-55deg) translateY(-128px) translateX(16px);

transition-delay:100ms;

}

.play .line_3 {

height:56%;

left:60%;

transform:rotate(55deg) translateY(-128px) translateX(16px);

transition-delay:200ms;

}

.play.active .line {

opacity:1;

height:62%;

margin:20% 0;

}

.play.active .line_1 {

left:28%;

transform:translateY(-2px);

}

.play.active .line_2 {

height:56%;

left:63%;

transform:rotate(-55deg) translateY(-16.5px) translateX(2px);

}

.play.active .line_3 {

height:56%;

left:63%;

transform:rotate(55deg) translateY(16px) translateX(2px);

}

.support {

position:absolute;

right:10px;

bottom:10px;

padding:10px;

display:flex;

}

a {

margin:0 20px;

color:#fff;

font-size:2rem;

transition:all 400ms ease;

}

a:hover {

color:#222;

}