使用c3動畫實現搖鈴鐺效果

使用c3動畫實現搖鈴鐺效果

ui小姐姐想給通知欄目添加一個搖鈴鐺效果，好久沒用c3的我太菜了，沒搞完美，最後還是UI小姐姐製作了一個gif圖，哈哈。

 

下面安排一個完美的純css實現的搖鈴鐺效果，隨便在阿里字體庫找了一個鈴鐺下載了png

相關推薦 css3變形 http://sharedblog.cn/post/131.html

 

附代碼

<style>
	.ld {
		width: 60px;
		height: 70px;
		transform-origin: 50% 0;
		animation: yaolingdang 3s infinite ease;
	}
	@keyframes yaolingdang {
		5%,25%,45% {
			transform: rotate(8deg);
		}
		0%,10%,30%,50% {
			transform: rotate(-8deg);
		}
		15%,35%,55% {
			transform: rotate(4deg);
		}
		20%,40%,60% {
			transform: rotate(-4deg);
		}
		65%,100% {
			transform: rotate(0deg);
		}
	}
</style>

<img class="ld" src="ld.png" alt="">

DEMO下載

藍奏雲盤：點擊下載

個人博客 http://sharedblog.cn/post/179.html