css动画效果

缓动动画

小球下落效果

@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; /* 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)
}
}
posted @   每天不emo  阅读(82)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示