纯css实现语音播报动画效果

先来看看效果图

黑色以下代码

		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAO8SURBVGiB1ZlPaBxVHMe/v7fbkmUZErRs9/1moUtYBBfxklZR8aYg5KAgvcT25MFDvUhPTaGnHoKIlOpJ0VsPUvAgKNjSS0EPAVGKyanIEmffLuaQhZEmm7Tzeti37ZDdTOb/JN/LvPm9fZ/32/fb/c17vynh6ImyhNdqtdOzs7MrlmVJ13X/LJpfTtuBFEQAdFbwcrn8GoBPAYCZoZT6vkh+Kc3JU1Jmiw8Arus+tCyrBuAcgPcty7rnuu7GceFnIcHM7ywsLJzIky+l/JmZNTNvJ5w7EV8kmNiv2Hnbtu0rAO72er2/2+32yZT8OZTf6/UWAQwAzPT7/e+K4qcVAI2YQSCiuwAeA3hpMBj8tr87qWNBfCHERwCgtb4opTyTJb9erzenjU8rAEDMxXIcZ1UIsWBuz9q2fdXXnfh5EMR3HOcXAGsAIIRYLoI/EQAp5XVmVsx8KaIvoRZrGt9xnAdEdBkAtNbX5+fnZ31DIgU2Kp+IPjf2iwjxg4zLB3BhGn/SIEQVgATwtW3bi4d+4+cKFYCD+N1u90sAfQDY3t6OGvzY/N3d3R9Ns8LMb+TNnwhAt9v9DMAtANBa30bKZ4VD+N8AABF96LNFSkNR+Zubm/8D+Mvcvpk3f+pfTil1AcAjABXbtj84zKmoOoivtb5nmq82Go2Kb0ikNBSVr7V+AABE1MqbH5Tz7pjrW2GciqEJvud5/5pmmYg4Lz4R/WeaL+bNDwrAEAC01lmdlif4RPQs3Witk25Bo/DH9ihzpsIPCsC7BvpHyM9H1QS/VCrJcXs4HPZz5J8CAK31Vt78qQvKzF8AeMEMuj22t9vtVB7IB/G11m+b5pp5eOXFf9n0/5M3f9o5YBnAZXP7sVLq0bhvfX39SRgHgxTEJ6JPzPUn35Co54BIfFM+OGvsq3nzJwJARA2MctaKv5TabDZnACQOwEF8Zl7SWs8DQLlc/mpsb7VaJxFhKxqVv7W1tYjRVvLJ3Nzc/aL5Y9ip/fOGGhhS+/m1Wu00M++Z6uFNf1+cSmUUPjP/buw/FMHP9O1TGDUajZbnefcxOl1uKKWeFcWazeZMp9MZIkFNKIhfr9fPCSFWAcDzvFf6/f5a3vw0dzWx5HneEkbOD/b29l7393U6ncdIWJAL4gshxg/QX+Msfhr8wl9J7uzs3KhUKhtCiDtKKf/WrYRRmTcTPjN/C+AMAAghlo4qvyhlmhqllMsmL2vbts8fN/6xlpTyvfHiMPO1ovlH8aV8pqpWq54QokpEt5RSK0XznwJtVIo5wSg3xgAAAABJRU5ErkJggg==) right 0 no-repeat;

白色以下代码

	  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;

完整代码以黑色为例

HTML

<view class="voice-box">
   <view class="voice-bg voice-play"></view>
</view>

CSS

// 语音
	.voice-box {
	  padding-top: 12px;
	  padding-left: 10px;
	  height: 35px;
	  width: 150px;
	  background: #5555ff;
	  border-radius: 0 7px 7px;
	}
	
	.voice-bg {
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAO8SURBVGiB1ZlPaBxVHMe/v7fbkmUZErRs9/1moUtYBBfxklZR8aYg5KAgvcT25MFDvUhPTaGnHoKIlOpJ0VsPUvAgKNjSS0EPAVGKyanIEmffLuaQhZEmm7Tzeti37ZDdTOb/JN/LvPm9fZ/32/fb/c17vynh6ImyhNdqtdOzs7MrlmVJ13X/LJpfTtuBFEQAdFbwcrn8GoBPAYCZoZT6vkh+Kc3JU1Jmiw8Arus+tCyrBuAcgPcty7rnuu7GceFnIcHM7ywsLJzIky+l/JmZNTNvJ5w7EV8kmNiv2Hnbtu0rAO72er2/2+32yZT8OZTf6/UWAQwAzPT7/e+K4qcVAI2YQSCiuwAeA3hpMBj8tr87qWNBfCHERwCgtb4opTyTJb9erzenjU8rAEDMxXIcZ1UIsWBuz9q2fdXXnfh5EMR3HOcXAGsAIIRYLoI/EQAp5XVmVsx8KaIvoRZrGt9xnAdEdBkAtNbX5+fnZ31DIgU2Kp+IPjf2iwjxg4zLB3BhGn/SIEQVgATwtW3bi4d+4+cKFYCD+N1u90sAfQDY3t6OGvzY/N3d3R9Ns8LMb+TNnwhAt9v9DMAtANBa30bKZ4VD+N8AABF96LNFSkNR+Zubm/8D+Mvcvpk3f+pfTil1AcAjABXbtj84zKmoOoivtb5nmq82Go2Kb0ikNBSVr7V+AABE1MqbH5Tz7pjrW2GciqEJvud5/5pmmYg4Lz4R/WeaL+bNDwrAEAC01lmdlif4RPQs3Witk25Bo/DH9ihzpsIPCsC7BvpHyM9H1QS/VCrJcXs4HPZz5J8CAK31Vt78qQvKzF8AeMEMuj22t9vtVB7IB/G11m+b5pp5eOXFf9n0/5M3f9o5YBnAZXP7sVLq0bhvfX39SRgHgxTEJ6JPzPUn35Co54BIfFM+OGvsq3nzJwJARA2MctaKv5TabDZnACQOwEF8Zl7SWs8DQLlc/mpsb7VaJxFhKxqVv7W1tYjRVvLJ3Nzc/aL5Y9ip/fOGGhhS+/m1Wu00M++Z6uFNf1+cSmUUPjP/buw/FMHP9O1TGDUajZbnefcxOl1uKKWeFcWazeZMp9MZIkFNKIhfr9fPCSFWAcDzvFf6/f5a3vw0dzWx5HneEkbOD/b29l7393U6ncdIWJAL4gshxg/QX+Msfhr8wl9J7uzs3KhUKhtCiDtKKf/WrYRRmTcTPjN/C+AMAAghlo4qvyhlmhqllMsmL2vbts8fN/6xlpTyvfHiMPO1ovlH8aV8pqpWq54QokpEt5RSK0XznwJtVIo5wSg3xgAAAABJRU5ErkJggg==) right 0 no-repeat;
		width: 24px;
	  height: 24px;
	  background-size: 400%;
	}
	
	.voice-play {
	  animation-name: voicePlay;
	  animation-duration: 1s;
	  animation-direction: normal;
	  animation-iteration-count: infinite;
	  animation-timing-function: steps(3);
	}
	
	@keyframes voicePlay {
	  0% {
	    background-position: 0;
	  }
	  100% {
	    background-position: 100%;
	  }
	}