首页 > 其他分享 >css动画效果

css动画效果

时间:2023-02-25 22:47:46浏览次数:55  
标签:动画 rotate translateY 效果 50% transform animation 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="/i/l/?n=23&i=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="/i/l/?n=23&i=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)
  }
}

标签:动画,rotate,translateY,效果,50%,transform,animation,css
From: https://www.cnblogs.com/duanlvxin/p/17155442.html

相关文章

  • css视觉效果
    单侧投影box-shadow:x方向偏移y方向偏移模糊半径扩张半径颜色内投影/外投影单侧投影box-shadow:05px4px-4pxblack;//扩张半径=-模糊半径邻边投影b......
  • css形状
    自适应的椭圆椭圆border-radius:50%;二分之一椭圆border-radius:100%00100%/50%;四分之一椭圆border-radius:100%000;关于border-radius的解释,语法......
  • css背景与边框
    背景侵入边框问题background-clip:padding-box;background-clip的属性有content-box、padding-box、border-box,text,默认为border-box,所以背景会侵入边框,改为paddi......
  • CSS float 属性
    positionposition指定一个元素在文档中的定位方式,使元素脱离当前的文档流,可以自由地在一定区域内移动。如果上级元素没有relative,就以窗口作为定位范围,如果上级中有一个......
  • css用户体验
    选择适合的鼠标光标禁用光标cursor:not-allowed;隐藏光标cursor:url('transparent.gif');cursor:none;扩大可点击区域伪元素:button{position:relative;......
  • CSS
    CSS笔记大纲CSS概述1.产生背景●从HTML被发明开始,样式就以各种形式存在,最初的HTML只包含很少的显示属性。●随着HTML的成长,为了满足页面设计者的要求,HTM......
  • 【unity】基于Playable的自定义动画系统
    前言开发时逐渐对蜘蛛网动画系统中重复性的工作感到厌烦,而且当动画一多起来,即使蜘蛛网分了层,我仍然连看都不想看。遂寻求解决方案。蜘蛛网那一套系统不支持在运行时创建......
  • CSS 中的 :root
    :root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--......
  • jQuery插件-fullpage全屏幻灯片展示效果
    fullpage全屏插件全屏滚动效果,原生js也很好实现,主要是用mousewheel鼠标滚轮滚动事件,来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可。但是,虽然效果简......
  • 封装全局的scss样式
    1.首先,在公共样式文件中把样式写好/*主题色*/$leo-theme-color:#3983bf;/*辅助色*/$leo-color-red:#ec3e50;$leo-color-orange:#ffbb0e;2.然后,在vue.config.js文件中......