css动画效果

这篇具有很好参考价值的文章主要介绍了css动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

动画1(沿着椭圆转动)

css动画效果

 其实是个2D转动,只不过咱们设置椭圆,然后加上scale缩放(近大远小),看上去就是3D效果

代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画1</title>
</head>

<body>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    /* 位置 */
    .container {
      position: absolute;
      width: 800px;
      height: 180px;
      top: 20%;
      left: 50%;
      transform: translateX(-60%);
      /* border: 1px solid red; */
    }

    /* 动画的容器(椭圆) */
    .box {
      width: 100%;
      height: 100%;
      position: relative;
      /* border: 1px solid blue; */
      box-sizing: border-box;
      border-radius: 50%;
    }

    /*  椭圆线 */
    .border {
      position: absolute;
      width: 800px;
      height: 180px;
      top: 65px;
      left: 60px;
      border: 1px solid #0084ff;
      box-sizing: border-box;
      border-radius: 50%;
    }

    /* 以下是转动的动画 */
    .circle {
      width: 200px;
      height: 130px;
      position: absolute;
      z-index: 999;
    }

    .circle img {
      width: 100%;
      height: 100%;
    }

    .circle1 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -5.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }

    .circle2 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    }

    .circle3 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
    }

    .circle4 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -11.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
    }

    .circle5 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
    }

    .circle6 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -15.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
    }

    .circle7 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -17.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
    }

    .circle8 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
    }

    .circle9 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -21.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
    }

    .circle10 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -23.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate;
    }

    .circle11 {
      animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -25.5s infinite alternate,
        animY 11s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
        scale 22s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
    }

    @keyframes animX {
      0% {
        left: -4%;
      }

      100% {
        left: 96%;
      }
    }

    @keyframes animY {
      0% {
        top: -4%;
      }

      100% {
        top: 96%;
      }
    }

    @keyframes scale {
      0% {
        transform: scale(0.4);
        opacity: 0.5;
      }

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

      100% {
        transform: scale(0.4);
        opacity: 0.5;
      }
    }
  </style>

  <div class="container">
    <div class="box">
      <div class="circle circle1">
        <img src="./img/步数.png" alt="">
      </div>
      <div class="circle circle2">
        <img src="./img/胆固醇.png" alt="">
      </div>
      <div class="circle circle3">
        <img src="./img/肺呼吸.png" alt="">
      </div>
      <div class="circle circle4">
        <img src="./img/尿酸.png" alt="">
      </div>
      <div class="circle circle5">
        <img src="./img/睡眠.png" alt="">
      </div>
      <div class="circle circle6">
        <img src="./img/体脂.png" alt="">
      </div>
      <div class="circle circle7">
        <img src="./img/跳绳.png" alt="">
      </div>
      <div class="circle circle8">
        <img src="./img/握力.png" alt="">
      </div>
      <div class="circle circle9">
        <img src="./img/心率.png" alt="">
      </div>
      <div class="circle circle10">
        <img src="./img/血糖.png" alt="">
      </div>
      <div class="circle circle11">
        <img src="./img/血氧.png" alt="">
      </div>

      <!-- 椭圆线 -->
      <div class="border"></div>
    </div>
  </div>
</body>

</html>

1. scale去设置的总时间(也就是转一圈用的时间), 这里设置 22秒

2. X轴和Y轴用的时间是一样的,都为总时间的一半,也就是11秒

3. 相差的时间是 总时间/图片的个数  这里也就是 22/11 = 2秒

4.  X轴和Y轴的延时时间相差 11/2 = 5.5秒

可以把代码拷贝过去,修改一下试试就可以啦 

动画2 (旋转木马特效)

css动画效果

 代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画2</title>
</head>
<body>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      position: relative;
    }
    .container {
      position: absolute;
      width: 1000px;
      height: 500px;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }
    .box {
      width: 150px;
      height: 150px;
      position: relative;
      transform-style: preserve-3d;
      animation: run 11s linear infinite;
    }
    .circle {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      height: 150px;
    }

    /*设置图像大小、边框、圆角、位置*/
    .circle img {
      width: 150px;
      height: 200px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .circle1 {
      transform: translateZ(500px);
    }
    .circle2 {
      transform: rotateY(36deg) translateZ(500px);
    }
    .circle3 {
      transform: rotateY(72deg) translateZ(500px);
    }
    .circle4 {
      transform: rotateY(108deg) translateZ(500px);
    }
    .circle5 {
      transform: rotateY(144deg) translateZ(500px);
    }
    .circle6 {
      transform: rotateY(180deg) translateZ(500px) ;
    }
    .circle7 {
      transform: rotateY(216deg) translateZ(500px);
    }
    .circle8 {
      transform: rotateY(252deg) translateZ(500px);
    }
    .circle9 {
      transform: rotateY(288deg) translateZ(500px);
    }
    .circle10 {
      transform: rotateY(324deg) translateZ(500px);
    }
    @keyframes run {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
  <div class="container">
    <div class="box">
      <div class="circle circle1">
        <img src="./img/1.jpg" alt="">
      </div>
      <div class="circle circle2">
        <img src="./img/2.jpg" alt="">
      </div>
      <div class="circle circle3">
        <img src="./img/3.jpg" alt="">
      </div>
      <div class="circle circle4">
        <img src="./img/4.jpg" alt="">
      </div>
      <div class="circle circle5">
        <img src="./img/5.jpg" alt="">
      </div>
      <div class="circle circle6">
        <img src="./img/6.jpg" alt="">
      </div>
      <div class="circle circle7">
        <img src="./img/7.jpg" alt="">
      </div>
      <div class="circle circle8">
        <img src="./img/8.jpg" alt="">
      </div>
      <div class="circle circle9">
        <img src="./img/9.jpg" alt="">
      </div>
      <div class="circle circle10">
        <img src="./img/10.jpg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

动画3 (沿X、Y、Z轴自转)

css动画效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画3</title>
</head>
<body>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container img {
      width: 150px;
      height: 150px;
      margin: 0 20px;
    }
    .container > img:nth-of-type(1) {
      animation: rotate1 5s linear infinite;
    }
    .container > img:nth-of-type(2) {
      animation: rotate2 5s linear infinite;
    }
    .container > img:nth-of-type(3) {
      animation: rotate3 5s linear infinite;
    }
    /* 绕着Y轴转 */
    @keyframes rotate1 {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }
    /* 绕着X轴转 */
    @keyframes rotate2 {
      0% {
        transform: rotateX(0);
      }

      100% {
        transform: rotateX(360deg);
      }
    }
    /* 绕着Z轴转 */
    @keyframes rotate3 {
      0% {
        transform: rotateZ(0);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }
  </style>
  <div class="container">
    <img src="./img/1.png" alt="">
    <img src="./img/2.jpg" alt="">
    <img src="./img/3.jpg" alt="">
  </div>
</body>
</html>

 动画4(点击收缩隐藏)

css动画效果 文章来源地址https://www.toymoban.com/news/detail-404240.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .box {
      width: 500px;
      height: 500px;
      border: 1px solid red;
      margin: 100px 0 0 100px;
      position: relative;
      overflow: hidden;
    }
    .move {
      width: 30%;
      height: 70%;
      border: 1px solid blue;
      border-radius: 10px;
      position: absolute;
      right: -150px;
      top: 15%;
    }
    #btn {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    .show {
      animation: rotate1 0.4s linear;
      /* 动画执行一次 */
      animation-iteration-count: 1;
      /* 停留在最后一帧 */
      animation-fill-mode: both;
    }
    .hide {
      animation: rotate2 0.4s linear;
      /* 动画执行一次 */
      animation-iteration-count: 1;
      /* 停留在最后一帧 */
      animation-fill-mode: both;
    }
    /* 向左移动 */
    @keyframes rotate1 {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-150px);
      }
    }
    /* 向右移动 */
    @keyframes rotate2 {
      0% {
        transform: translateX(-150px);
      }

      100% {
        transform: translateX(0);
      }
    }
  </style>
  <div class="box">
    <div class="move"></div>
    <button id="btn"></button>
  </div>
  <script>
    //  DOM.classList -> 返回一个元素的类属性的实时 DOMTokenList 集合。
    //  DOM.classList.add('class1', 'class2', 'class3')  // 添加一个或多个类名
    //  DOM.classList.remove('class1', 'class2', 'class3')  // 删除一个或多个类名
    //  DOM.classList.toggle('class1', 'class2', 'class3')  // 切换类名(有则移除,没有则添加(切换效果))

    let flag = true  // true -> 点击展示, false -> 点击隐藏
    const $ = name => document.querySelector(name)
    $('#btn').innerHTML = '点击展开'
    $('#btn').onclick = () => {
      if (flag) {
        $('.move').classList.remove('hide');
        $('.move').classList.add('show');
        setTimeout(() => {
          $('#btn').innerHTML = '点击收起'
        }, 400)
      } else {
        $('.move').classList.remove('show');
        $('.move').classList.add('hide');
        setTimeout(() => {
          $('#btn').innerHTML = '点击展开'
        }, 400)
      }
      flag = !flag
    }
  </script>
</body>
</html>

到了这里,关于css动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css动画效果

     其实是个2D转动,只不过咱们设置椭圆,然后加上scale缩放(近大远小),看上去就是3D效果 代码: 1. scale去设置的总时间(也就是转一圈用的时间), 这里设置 22秒 2. X轴和Y轴用的时间是一样的,都为总时间的一半,也就是11秒 3. 相差的时间是 总时间/图片的个数  这里也就

    2023年04月08日
    浏览(37)
  • CSS3动画效果详解

    在CSS3中,animation属性用于实现元素的动画。 animation属性跟transition属性在功能实现上是非常相似的,都是通过改变元素的属性值来实现动画效果。但是,这两者实际上有着本质的区别 对于transition属性来说,它只能将元素的某一个属性从一个属性值过渡到另一个属性值 对于

    2024年01月21日
    浏览(53)
  • CSS3实现动画加载效果

    2024年02月07日
    浏览(61)
  • css有哪些动画效果怎么实现的

     css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画   transition实现渐变动画 transform实现缩放平移效果动画  animation实现自定义动画  属性 描述 属性值 animation-name 动画名称 animat

    2024年02月09日
    浏览(49)
  • CSS打字回删效果动画源码

    2024年02月11日
    浏览(34)
  • 【CSS笔记】CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画

    这篇文章,主要介绍CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。 目录 一、2d动画 1.1、渐变色 (1)线性渐变色 (2)径向渐变色

    2024年02月02日
    浏览(93)
  • CSS动画属性关键帧Keyframes详解:创建令人惊叹的动画效果

    CSS中的关键帧(Keyframes)是一种强大的工具,可用于创建各种动画效果,从简单的渐变到复杂的运动路径。通过定义关键帧的属性值和时间轴上的位置,我们可以实现令人惊叹的视觉效果。本文将详细介绍CSS动画属性关键帧Keyframes的使用方法,并提供相应的源代码示例。 关键

    2024年01月23日
    浏览(59)
  • 仅使用 CSS 创建打字机动画效果

    创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript,但我们也可以使用纯 CSS 来创建我们的打字机动画。 在本文中,我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScript 创建这种效果的利弊

    2024年02月13日
    浏览(53)
  • animation.css无法显示动画效果问题解决

    在使用【微信开发者工具】开发微信小程序时发现无法在开发者工具中展示出动画效果来 但是真机调试中可以正常的显示动画效果 【关于微信小程序中如何使用animation.css,参考微信小程序使用animation.css_THE WHY的博客-CSDN博客 】 同时发现在官网上点击各个动画并不能展示动

    2024年02月16日
    浏览(44)
  • vue 分页器组件+css动画效果

    全网都找了一遍没有找到符合UI需求的分页动画,于是就主动上手了 需求: 1、分页最多显示9页,总页数最多显示无上限; 2、点击下一页的时候需要有动画效果过度,如果当前页数是当前显示最后的一页,则停了当前显示最后的位置,但是点击下一页的时候需要用户感知 效

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包