CSS3+SVG实现的带音效、会抖动的小铃铛图标特效

.button {
	width: 50px;
	height: 50px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(44, 44, 44);
	border-radius: 50%;
	cursor: pointer;
	transition-duration: .3s;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);
	border: none;
}

.bell {
	width: 18px;
}

.bell path {
	fill: white;
}

.button:hover {
	background-color: rgb(56, 56, 56);
}

.button:hover .bell {
	animation: bellRing 0.9s both;
}

@keyframes bellRing {
	0%,
	100% {
	transform-origin: top;
	}

	15% {
	transform: rotateZ(10deg);
	}

	30% {
	transform: rotateZ(-10deg);
	}

	45% {
	transform: rotateZ(5deg);
	}

	60% {
	transform: rotateZ(-5deg);
	}

	75% {
	transform: rotateZ(2deg);
	}
}

.button:active {
	transform: scale(0.8);
}

/*以下为辅助演示用css*/
h3{text-align: center;color: #fff;}
.box
{
	width: 300px;
	height: 360px;
	margin: 40px auto;
	border-radius: 8px;
	text-align: center;
	background: #000;
	overflow: hidden;
	position: relative;
}

.hvcc{
	position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);
}

<div class='box'>
	<h3>鼠标移上去会抖动的小铃铛</h3>
	<h3>点击还有“叮当”音效哦</h3>
	<div class='hvcc'>
		<button class="button">
  		<svg viewBox="0 0 448 512" class="bell"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg>
		</button>
	</div>
</div>

//引用mudi.org的JS框架
$=mdui.$;
$(function (){
	$('.button').on('click',function(){
		const music = new Audio('/sound/bell.mp3');
		music.play();
		music.loop =false;
		//music.pause();
	});
});