css 透明播放按钮 |js控制 css

.btn{
background-color: transparent;
border: none;
cursor: pointer;
height: 50px;
width: 50px;
position: relative;
display: block;
}
.btn::before,
.btn::after{
content: '';
position: absolute;
top: 0;
left: 0;
transform-origin: center center;
transform: translateX(50%) translateY(50%);
}
.btn::before{
border: 12px solid transparent;
border-right-color: #fff;
}
.btn::after{
height: 5px;
width: 20px;
background-color: #fff;
}

上述代码使用CSS伪元素在按钮上创建了一个三角形并在其下方添加了一条水平线段。将按钮的背景颜色设置为透明，并去掉边框,将按钮的光标设为“指针”，这将使鼠标悬停在按钮上时显示指针的形状。

按钮的高度和宽度都被设置为50像素，它的位置取决于按钮的相对位置。使用边框和背景为三角形和线段填充颜色使其成为白色。另外，使用伪元素的transform属性使三角形位于按钮的中央，将伪元素的transform-origin设置为“center center”将坐标定位到元素的中心。最后，使用伪元素设置一条水平线段，使其位于三角形下方，来表示“播放”。

通过上述CSS代码，大家可以创建漂亮的透明播放按钮，来提升网页的美观度。这个透明的按钮可以在任何网页上使用，让您的页面看起来更加现代、精美。