缓动动画
小球下落效果
| @keyframes bounce { |
| 60%, 80%, 100% { |
| transform: translateY(80px); |
| animation-timing-function: cubic-bezier(.215, .61, .355, 1); |
| } |
| 70% { |
| transform: translateY(60px); |
| } |
| 90% { |
| transform: translateY(70px); |
| } |
| } |
| |
| .ball { |
| width: 20px;height:20px;background:orange;border-radius:50%;margin: 0 auto; |
| animation: bounce 3s cubic-bezier(.755, .05, .855, .06) infinite; |
| } |
三次贝塞尔曲线可视化:https://cubic-bezier.com
输入框提示效果
| <div class="input-wrap"> |
| <input></input> |
| <div class="callout">一些提示,<br/>比如只能输入数字</div> |
| </div> |
| .input-wrap { |
| height: 24px; |
| position: relative; |
| } |
| .input-wrap .callout { |
| background: pink; |
| position: absolute; |
| left: 185px; |
| top: 0; |
| transform: scale(0); |
| transition: .25s transform; |
| } |
| .input-wrap input:focus + .callout{ |
| transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform; |
| transform: scale(1); |
| } |
逐帧动画
loading效果
网上随便找的一个马跑步素材:

利用该素材实现逐帧动画:
核心原理:background-position和steps
| @keyframes loading { |
| from { |
| background-position: 0; |
| } |
| to { |
| background-position: -550px; // 图片总宽度 |
| } |
| } |
| animation: run 2s steps(4) infinite; // 有4帧,所以为steps(4) |
闪烁效果
| animation: blink 1s steps(1) infinite; |
打字动画
CSS is awesome!
123456789123456
打字动画实际上是文字逐个显示动画+光标闪烁动画
| @keyframes typing { |
| from { |
| width: 0; |
| } |
| } |
| h1 { |
| width: 15ch; |
| overflow: hidden; |
| white-space: nowrap; |
| animation: typing 15s steps(15); |
| } |
| animation: typing 15s steps(15); |
状态平滑的动画
| animation-play-state: pause; |
沿环形路径平移的动画
方案一
用内层的变形来抵消外层的变形效果。
| <div class="path"> |
| <div class="avatar"> |
| <img src="https://img2023.cnblogs.com/blog/3116094/202302/3116094-20230225214134054-1457803797.jpg"> |
| </div> |
| </div> |
| @keyframes spin { |
| to { |
| transform: rotate(1turn); |
| } |
| } |
| .path { |
| width: 100px; |
| height: 100px; |
| background: orange; |
| border-radius: 50%; |
| } |
| .avatar { |
| width: 20px; |
| height: 20px; |
| margin: 0 auto; |
| border-radius: 50%; |
| overflow: hidden; |
| animation: spin 3s infinite linear; |
| transform-origin: 50% 50px; |
| } |
| .avatar img { |
| animation: inherit; |
| animation-direction: reverse; |
| } |
方案二
使用translate模拟transform-origin,从而不需要在Img外层多嵌套一个元素。
| <div class="path"> |
| <img src="https://img2023.cnblogs.com/blog/3116094/202302/3116094-20230225214134054-1457803797.jpg" class="img"> |
| </div> |
| .path { |
| width: 100px; |
| height: 100px; |
| background: orange; |
| border-radius: 50%; |
| } |
| |
| .img { |
| width: 20px; |
| height: 20px; |
| position: relative; |
| left: 40px; |
| border-radius: 50%; |
| animation: spin2 3s infinite; |
| } |
| |
| @keyframes spin2 { |
| from { |
| transform: translateY(50px) |
| rotate(0turn) |
| translateY(-50px) |
| translateY(50%) |
| rotate(1turn) |
| translateY(-50%) |
| } |
| to { |
| transform: translateY(50px) |
| rotate(1turn) |
| translateY(-50px) |
| translateY(50%) |
| rotate(0turn) |
| translateY(-50%) |
| } |
| } |
如果一开始头像就位于圆心,上面的css代码可简化:
也就是把translateY(50px) translateY(-50%)去除,这两句做的实际上就是把头像移到圆心。
| @keyframes spin2 { |
| from { |
| transform: rotate(0turn) |
| translateY(-50px) |
| translateY(50%) |
| rotate(1turn) |
| } |
| to { |
| transform: rotate(1turn) |
| translateY(-50px) |
| translateY(50%) |
| rotate(0turn) |
| } |
| } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析