CSS3左右间歇晃动_消息铃铛
分类专栏: Css&
简介 今天在做一个消息提示铃铛, 就是八仔博客的消息提示铃铛效果。
<p>css3制作消息提示铃铛左右晃动效果。</p><p>1.</p><p> <div class="relative mr30"></p><p> <i class="el-icon-message-solid size24 flashing"></i></p><p> <span class="absolute size12 tip">1</span></p><p> </div></p><p>2.css3样式,(重点)</p><p>.flashing {</p><p> color: $theme;</p><p> animation: opacitys 2s infinite;</p><p>}</p><p>@keyframes opacitys {</p><p> 0%, 65% {</p><p> transform:rotate(0deg);</p><p> }</p><p> 70% { </p><p> -webkit-transform:rotate(6deg);</p><p> transform:rotate(6deg);</p><p> }</p><p> 75% { </p><p> -webkit-transform:rotate(-6deg);</p><p> transform:rotate(-6deg);</p><p> }</p><p> 80% { </p><p> -webkit-transform:rotate(6deg);</p><p> transform:rotate(6deg);</p><p> }</p><p> 85% { </p><p> -webkit-transform:rotate(-6deg);</p><p> transform:rotate(-6deg);</p><p> }</p><p> 90% { </p><p> -webkit-transform:rotate(6deg);</p><p> transform:rotate(6deg);</p><p> }</p><p> 95% { </p><p> -webkit-transform:rotate(-6deg);</p><p> transform:rotate(-6deg);</p><p> }</p><p> 100% { </p><p> -webkit-transform:rotate(0deg);</p><p> transform:rotate(0deg);</p><p> }</p><p>}</p><p>有不对的地方或有改进的地方, 还望大佬多多指教,在评论区留言!</p>
分享到:
转载:
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
Docker 常用命令
docker目前代替虚拟机使用的一个容器,灵活好用。
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1254天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据