css制作播放器图标 |css图片的滚动

.play-icon {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid #008080;
border-bottom: 10px solid transparent;
}
.pause-icon {
width: 6px;
height: 20px;
background-color: #008080;
position: relative;
float: left;
margin-right: 4px;
}
.pause-icon:after {
content: "";
width: 6px;
height: 20px;
background-color: #008080;
position: absolute;
left: 10px;
top: 0;
}

上面是一个制作播放器和暂停图标的CSS代码示例，大家来简单分析一下：

1. 播放器图标用了一个三角形的形状，通过设置CSS的border-top、border-left、border-bottom属性可以实现。其中，transparent是透明色，#008080是绿松石色（当然，颜色可以根据需求自己调整）。

2. 暂停图标则使用了一个长条和一个矩形，通过设置CSS的width、height、background-color、position属性实现。其中，after伪类可以在元素的内部创建一个伪元素（pseudo-element），这里大家用它来实现暂停图标中的矩形。

通过上面这些CSS代码，大家就能够轻松地制作出播放器和暂停图标了。当然，这只是其中的一种简单实现方式，大家还可以通过其他CSS技巧和动画效果来让这些图标更加生动和有趣。