2024年03月26日 前端 css H5 HTML css3 共享博客
ui小姐姐想给通知栏目添加一个摇铃铛效果,好久没用c3的我太菜了,没搞完美,最后还是UI小姐姐制作了一个gif图,哈哈。
下面安排一个完美的纯css实现的摇铃铛效果,随便在阿里字体库找了一个铃铛下载了png
相关推荐 css3变形 https://www.lmcjl.com/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="">
蓝奏云盘:点击下载
本文链接:http://so.lmcjl.com/news/394/