专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

使用c3动画实现摇铃铛效果

作者:鹏仔先生日期:2020-06-16浏览:3687分类:CSS

使用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下载

蓝奏云盘:点击下载

手机扫码访问

已有3位网友发表了看法:

  • 访客

    访客  评论于 [2020-06-16 19:49:03]  回复

    鹏仔牛逼

  • 访客

    访客  评论于 [2020-06-16 19:36:17]  回复

    不错,解决了我的问题

  • 小小

    小小  评论于 [2020-06-16 19:36:10]  回复

    奥利给

取消回复欢迎 发表评论:

关灯