CSS技巧：css实现播放器play按钮

如何仅用css实现下图的播放按钮效果？不妨看看追格小编是如何实现的。

首先，将在需要增加播放器的图片外容器view添加属性

position:relative;

然后再<image>标签同级增加播放器结构

<view class="zhuige-play"></view>

然后添加播放器相关css

	.zhuige-play {
		position: absolute;
		z-index: 12;
		height: 72rpx;
		width: 72rpx;
		border-radius: 50%;
		border: 4rpx solid #FFFFFF;
		top: 50%;
		left: 50%;
		margin-left: -36rpx;
		margin-top: -36rpx;
		background: rgba(255, 255, 255, .3);
	}

	.zhuige-play::after {
		content: ' ';
		width: 0;
		height: 0;
		border-left: 26rpx solid #FFFFFF;
		border-top: 18rpx solid transparent;
		border-bottom: 18rpx solid transparent;
		position: absolute;
		top: 18rpx;
		left: 28rpx;
	}

即可实现图片上的播放器效果 如果要把播放器里的实心按钮改为线条，修改如下

.zhuige-play::after {
		content: ' ';
		height: 22rpx;
		width: 22rpx;
		transform: rotate(45deg);
		border-right: 4px solid #FFFFFF;
		border-top: 4px solid #FFFFFF;
		position: absolute;
		top: 22rpx;
		left: 20rpx;
	}