一些CSS动画

已于 2024-05-13 14:47:03 修改
阅读量789 收藏 24
点赞数 16
文章标签： css css3 前端
于 2023-12-27 13:23:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pure_White520/article/details/135243155
版权

翻转动效

  /* 图片旋转一圈 */
    .img-pic {
      position: absolute;
      top: 20px;
      left: 20px;
      animation: trunFrames 8s infinite;
    }

    @keyframes trunFrames {
      0% {
        transform: rotateY("0deg");
      }

      20% {
        transform: rotateY(1turn);
      }

      100% {
        transform: rotateY(1turn);
      }

上下跳动

可以通过定位、margin等值的更改来达到效果

 /* 上下跳动 */
    .debounce-pic {
      position: absolute;
      top: 60px;
      left: 20px;
      animation: debounceFrame 2s infinite;
    }

    @keyframes debounceFrame {
      0% {
        top: 60px;
      }
      50% {
        top: 50px;
      }
      100% {
        top: 60px;
      }
    }

呼吸闪烁效果

  .cicle {
      width: 10px;
      height: 10px;
      background: red;
      border-radius: 50%;
      animation: twinkling 1s infinite ease-in-out;

      position: absolute;
      left: 100px;
      top: 20px;
    }

    @keyframes twinkling {
      0% {
        opacity: 0.2;

        transform: scale(1);
      }

      50% {
        opacity: 0.5;

        transform: scale(1.12);
      }

      100% {
        opacity: 0.2;

        transform: scale(1);
      }
    }

循环旋转

 .rotate {
      position: absolute;
      top: 100px;
      left: 100px;
      /*linear确保循环平滑  */
      animation: rotateFrames 2s linear infinite;
    }

    @keyframes rotateFrames {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(1turn);
      }
    }

多元素围绕伪椭圆旋转

详细可见博客

 <div class="topcenterbigitembox">
                        <div class="topcenbox1">
                            <div class="topcenboxitem topcenboxitem1">
                                文字
                            </div>
                            <div class="topcenboxitem topcenboxitem2">
                                文字
                            </div>
                            <div class="topcenboxitem topcenboxitem3">
                                文字
                            </div>
                            <div class="topcenboxitem topcenboxitem4">
                                文字
                            </div>
                            <div class="topcenboxitem topcenboxitem5">
                                文字
                            </div>
                            <div class="topcenboxitem topcenboxitem6">
                               文字
                            </div>
                        </div>
   <div>

//css
<style>
.topcenbox1 {
    width: 100%;
    height: 2rem;
    position: relative;
}
.topcenboxitem {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.18rem;
    font-family: YouShe;
    // background-image: -webkit-linear-gradient(bottom, #90e1ff, #d6eff8, #e5f6fd);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
    color: #C0E7FF;
    background: rgba(0, 133, 247, 0.22);
    position: absolute;
    width: 1rem;
    z-index: 99;
}

.topcenboxitem1 {
    animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
        animY0 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}

.topcenboxitem2 {
    animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -8.333s infinite alternate,
        animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -3.333s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -3.333s infinite alternate;
}

.topcenboxitem3 {
    animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -11.666s infinite alternate,
        animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -6.666s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -6.666s infinite alternate;
}

.topcenboxitem4 {
    animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -14.999s infinite alternate,
        animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -9.999s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -9.999s infinite alternate;
}

.topcenboxitem5 {
    animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -18.332s infinite alternate,
        animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -13.332s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -13.332s infinite alternate;
}

.topcenboxitem6 {
    animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -21.665s infinite alternate,
        animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -16.665s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -16.665s infinite alternate;
}
//animX0 和animY0 控制运动的位置
@keyframes animX0 {
    0% {
        left: 0.05rem;//最左边的位置
    }

    100% {
        left: 8.3rem;//最右边的位置
    }
}

@keyframes animY0 {
    0% {
        top: 1rem;//最高
    }

    100% {
        top: 2.55rem;//最低
    }
}

@keyframes scale {
    0% {
        transform: scale(0.6);
        opacity: 0.7;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.6);
        opacity: 0.7;
    }
}
</style>

在这里插入图片描述

@keyframes scale {
0% {
    height: 20vh;
    width: 20vh;
}
100% {
    height: 40vh;
    width: 40vh;
}
}

渐入动画

// 渐入动画
@keyframes fade-right-trans {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.am-fade-right-trans {
  opacity: 0;
  transform: translate3d(-100px, 0, 0);
  animation: fade-right-trans 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes fade-right-pos {
  from {
    opacity: 0;
    left: -100px;
  }
  to {
    opacity: 1;
    left: 0;
  }
}
.am-fade-right-pos {
  position: relative;
  opacity: 0;
  left: -100px;
  animation: fade-right-pos 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

vue transition

appear属性:如果想要一刷新页面就展示动画，需加上 <transition name="run" mode="out-in" appear>
别人的博客介绍：链接

<transition name="run">
      <!-- 内部元素或组件的显示和隐藏，会触发transition效果 -->
      <div v-if="isShow">
        <span>123123123123</span>
      </div>
 </transition>


// 元素开始进入的状态 | 元素离开结束的状态
.run-enter-from,
.run-leave-to {
  opacity: 0;
}
// 元素进入结束的状态 ｜ 元素开始离开的状态。     
.run-enter-to,
.run-leave-from {
  opacity: 1;
}
// 元素进入 ｜ 结束时，过渡的效果
.run-enter-active,
.run-leave-active {
  // 过渡动画的使用
  transition: opacity 2s linear 0s;
}

旋转动画
在这里插入图片描述

rotate3d 自定义轴旋转

//0, 0, 1, 说明这里只使用了 Z 轴作为旋转的轴 ,
 transform: rotate3d(0, 0, 1, 360deg);  

.blue-crlie{
width: 40px;
display: inline-block;
height: 40px;
opacity: 1;
border-radius: 50%;
transform: rotate3d(0, 1, 0, 65deg); //rotate3d(x,y,z,angle)
animation: zhuan 2s infinite linear;
border: 1px solid rgba(0, 162, 255, 1);
box-shadow: 0px 0px 8px 1px rgba(0, 162, 255, 1);
}

@keyframes zhuan {
  0% {
    transform: rotate3d(0, 1, 0, 65deg) rotateZ(0deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 65deg) rotateZ(360deg);
  }
}

在这里插入图片描述

在这里插入图片描述

    .flat {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) scaleY(0.23);
        height: 6.73rem;

        &::after {
          display: inline-block;
          position: absolute;
		  top: 1.55rem;
		  width: 1.7rem;
		  height: 1.7rem;
		  background: url(~@/assets/images/screen/run-circle.png) no-repeat center;
		  background-size: 100% 100%;
		  animation: spinLight 3s infinite linear;
          content: ' ';
          top: 0;
          left: 0;
}
      }


  @keyframes spinLight {
        0% {
          transform: translate(-50%, -50%) rotate(360deg);
          opacity: 0.64;
        }
      
        50% {
          transform: translate(-50%, -50%) rotate(180deg);
          opacity: 1;
        }
      
        100% {
          transform: translate(-50%, -50%) rotate(0deg);
          opacity: 0.64;
        }
      }
二狗子的翠花
关注
  • 16
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 动画
12-13
一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的...
CSS动画
LiHang1234567777的博客
07-21 4680
今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
CSS过渡动画
热门推荐
weixin_70815247的博客
07-21 1万+
transition是css3新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前元素->元素hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡从开始状态到结束状态的中间过程可以查看格式transition过渡的属性完成时间(s)运动曲线延迟时间transitiontransition包含以下四个属性transition-property过渡属性。...
CSS动画和JS动画对比
weixin_36106791的博客
08-31 1963
在工作中，经常会写点动画效果，常用的方式有CSS动画还有JS动画，根据项目的需求，采用的方案各不相同，但是两者实现的性能分析没有进行对比。总结网上相关资料，在这里简单整理下 本文主要讲以下这些内容 1、浏览器渲染流程 2、回流和重绘 3、CSS 动画 4、JS 动画 两者对比 ???? 1. 浏览器的渲染流程 渲染流程主要有4个步骤 解析 HTML 生成DOM 树 解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree 布局 Render Tree 对每个节点进
CSS动画效果
weixin_53912712的博客
07-09 1780
过渡、动画】变形平移、旋转
JS 触发CSS动画
weixin_45352819的博客
06-14 1033
JS 触发CSS动画
WeatherApp:提取数据和一些CSS动画
03-10
实时版本-> Aplication API仅提供世界上最大城市的数据我在应用中添加的升级： 应用程序无法找到所搜索城市的数据时的情况的信息和功能主视图上CSS动画元素
html+css翻页动画效果
01-27
【html+css】翻页动画效果，64行代码实现翻页动画效果
CSS动画 3D反转Tab
01-29
纯css、动画、3d、关键帧.....
CSS3边框动画
09-13
CSS3边框动画
CSS弹窗
那片枫叶~
05-21 117
CSS 曲线弹窗和气泡弹窗小笔记，高德地图。标注气泡，背景是图片。
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 133
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
艾恩小灰灰的博客
05-21 202
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
css笔记总结2
fishniu35的博客
05-15 440
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
详解CSS（三）及案例实现
Romised的博客
05-21 388
弹性布局、弹性布局案例、flex 布局基本概念、常用属性、justify-content、align-items、案例实现：小广告、案例实现：百度热榜
css如何实现边框模糊的效果
rolling_kitten的博客
05-14 697
其实并不难，用属性 filter: blur(数字px); 即可。效果如下： 图上的圆形内有色彩的渐变，同样也是用filter: blur(数字px); 实现的，代码如下：、
CSS-元素堆叠顺序
Kevin7_35Durant的博客
05-18 150
元素的堆叠效果，是根据书写的顺序来的，后面的在上面绿色在最上面，随后是红色，最后是蓝色，跟书写的顺序一样我们可以改变这个顺序。
深入了解 CSS 预处理器 Sass
最新发布
_midnight的博客
05-21 333
Sass 是一种 CSS 预处理器，它为 CSS 增加了更强大的功能和灵活性。通过使用 .scss 文件扩展名编写代码，然后编译成标准 CSS，Sass 提供了变量、嵌套、Mixins、继承以及部分文件和导入等功能。这些功能使得 CSS 代码更简洁、可重用且易于维护，是前端开发中非常实用的工具。
web自动化高级定位-css
2301_77783487的博客
05-21 261
括号内填的是在同一堆相同的标签里找顺数第几个——是找爸爸的第几个孩子。对应表达式，注意：不同属性名的不同表达式！是找同种类型的第几个。
css动画的实现方式
07-28
4. 使用CSS animation库：除了原生CSS动画，还可以使用一些CSS动画库，如Animate.css或者Hover.css等。这些库提供了一系列预定义的CSS动画效果，可以直接应用到元素上，简化了动画的实现过程。 无论使用哪种方式，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值