1. Toy模板网首页
  2. > Toy博客

`CSS`----图标`3D`环绕旋转，近大远小效果

9月前 作者：cccc☜ 分类：Toy博客 阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了`CSS`----图标`3D`环绕旋转，近大远小效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS----图标3D环绕旋转，近大远小效果

1、先设置图标底部圆环,图片为一张正圆图，给图片外层盒子设置 transform: scaleY(0.25);,将图片效果转为椭圆
代码如下：
  <div class="entry-box">
      <div class="entry-box-content">
        <div class="content-circle">
          <div
            class="circle"
          ></div>
        </div>
      </div>
    </div>

  .entry-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    &-content {
      width: 50vw;
      height: 50vw;
      position: absolute;
      top: calc(50% - 25vw);
      left: 25vw;
      z-index: 1;
         .content-circle {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scaleY(0.25);//将背景圆设置为3D效果

        .circle {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: url("../../assets/bgImg/circular5.png") no-repeat center center;
          background-size: 100% 100%;
        }
      }
      }
}
效果图

css图片旋转3d旋转,css,css,3d,前端

2、给底部圆环添加动画
  .circle {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: url("../../assets/bgImg/circular5.png") no-repeat center center;
          background-size: 100% 100%;
          animation: centerRotate 15s linear infinite;
        }

@keyframes centerRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
3、引入图标，并渲染到页面
import icon1 from "@/assets/iconImg/GEO终端.png";
import icon2 from "@/assets/iconImg/MF终端.png";
import icon3 from "@/assets/iconImg/pad.png";
import icon4 from "@/assets/iconImg/手机.png";
import icon5 from "@/assets/iconImg/显示器.png";
import icon6 from "@/assets/iconImg/服务器.png";
import icon7 from "@/assets/iconImg/笔记本.png";
import icon8 from "@/assets/iconImg/视频终端.png";

const IconList = [
  { id: 1, iconImg: icon1 },
  { id: 2, iconImg: icon2 },
  { id: 3, iconImg: icon3 },
  { id: 4, iconImg: icon4 },
  { id: 5, iconImg: icon5 },
  { id: 6, iconImg: icon6 },
  { id: 7, iconImg: icon7 },
  { id: 8, iconImg: icon8 },
];


 <div
          :class="['icon', 'icon' + item.id]"
          v-for="item in IconList"
          :key="item.id"
         
        >
          <img :src="item.iconImg" alt="" />
        </div>
4、设置每个图标的位置，并给每个图标添加动画
 <div
          :class="['icon', 'icon' + item.id]"
          v-for="item in IconList"
          :key="item.id"
         
        >
          <img :src="item.iconImg" alt="" />
        </div>

   .icon {
        width: 6vw;
        height: 6vw;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 120%;
        }

        img:hover {
          width: 140%;
        }
      }     
      .icon1 {
        top: 24vw;
        left: 22vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
                   turnY 8s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
                   turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
      }
      .icon2 {
        top: 22.25vw;
        left: 11.25vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
      }
      .icon3 {
        top: 19vw;
        left: 3vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
      }
      .icon4 {
        top: 15.25vw;
        left: 11.25vw;
        animation: turnX  8s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
                   turnY  8s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
                   turn-self 16s cubic-bezier(0.36, 0, 0.64, 1)-6s infinite alternate;
      }
      .icon5 {
        top: 14.5vw;
        left: 22vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
      }
      .icon6 {
        top: 15.25vw;
        right: 11.25vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
      }
      .icon7 {
        top: 19vw;
        left: 41vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
      }

      .icon8 {
        top: 22.25vw;
        right: 11.25vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
      }

1、第一个icon初始值：

turn-self ：duration为 turnX和turnY之和

turnX：delay 为turn-self duration一半

turnY，turn-self ：delay 为 0

2、每个delay 每次递减的值为 turn-self的duration/icon的数量 例子：16/8 = 2，每次递减2；

3、cubic-bezier，css3贝塞尔曲线 一条表示进度变化快慢的速度曲线

/* icon自身的大小缩放 */
@keyframes turn-self {
  0% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.7);
  }
}

/* icon横向运动变化，x轴的范围 */
@keyframes turnX {
  0% {
    left: 3vw;
  }

  100% {
    left: 41vw;
  }
}

/*icon纵向运动变化，Y轴的范围 */
@keyframes turnY {
  0% {
    top: 14.5vw;
  }

  100% {
    top: 24vw;
  }
}

效果图：

css图片旋转3d旋转,css,css,3d,前端文章来源地址https://www.toymoban.com/news/detail-832032.html

5、设置鼠标移入移出效果
 <div
          :class="['icon', 'icon' + item.id]"
          v-for="item in IconList"
          :key="item.id"
          :style="`animation-play-state: ${animationPlayState};`"
          @mouseover="mouseOver"
          @mouseleave="mouseleave"
        >

let animationPlayState = ref<string>("");

function mouseOver() {
  animationPlayState.value = "paused";
}
function mouseleave() {
  animationPlayState.value = "running";
}
6、完整代码
<template>
  <div class="entry">
    <div class="entry-box">
      <div class="entry-box-content">
        <div class="content-circle">
          <div
            class="circle"
            :style="`animation-play-state: ${animationPlayState};`"
          ></div>
        </div>
        <div
          :class="['icon', 'icon' + item.id]"
          v-for="item in IconList"
          :key="item.id"
          :style="`animation-play-state: ${animationPlayState}; --item:${-(
            item.id + 1
          )}; --icon:${-(item.id - 1)}`"
          @mouseover="mouseOver"
          @mouseleave="mouseleave"
        >
          <img :src="item.iconImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>




<script lang="ts" setup>
import icon1 from "@/assets/iconImg/GEO终端.png";
import icon2 from "@/assets/iconImg/MF终端.png";
import icon3 from "@/assets/iconImg/pad.png";
import icon4 from "@/assets/iconImg/手机.png";
import icon5 from "@/assets/iconImg/显示器.png";
import icon6 from "@/assets/iconImg/服务器.png";
import icon7 from "@/assets/iconImg/笔记本.png";
import icon8 from "@/assets/iconImg/视频终端.png";

const IconList = [
  { id: 1, iconImg: icon1 },
  { id: 2, iconImg: icon2 },
  { id: 3, iconImg: icon3 },
  { id: 4, iconImg: icon4 },
  { id: 5, iconImg: icon5 },
  { id: 6, iconImg: icon6 },
  { id: 7, iconImg: icon7 },
  { id: 8, iconImg: icon8 },
];

let animationPlayState = ref<string>("");

function mouseOver() {
  animationPlayState.value = "paused";
}
function mouseleave() {
  animationPlayState.value = "running";
}
</script>

<style lang="scss" scoped>
.entry {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .entry-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    &-content {
      width: 50vw;
      height: 50vw;
      position: absolute;
      top: calc(50% - 25vw);
      left:25vw;
      z-index: 1;
      .content-circle {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scaleY(0.25);

        .circle {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: url("../../assets/bgImg/circular5.png") no-repeat center center;
          background-size: 100% 100%;
          animation: centerRotate 15s linear infinite;
        }
      }
      .icon {
        width: 6vw;
        height: 6vw;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 120%;
        }

        img:hover {
          width: 140%;
        }
      }
      .icon1 {
        top: 24vw;
        left: 22vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
                   turnY 8s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
                   turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
      }
      .icon2 {
        top: 22.25vw;
        left: 11.25vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
      }
      .icon3 {
        top: 19vw;
        left: 3vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
      }
      .icon4 {
        top: 15.25vw;
        left: 11.25vw;
        animation: turnX  8s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
                   turnY  8s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
                   turn-self 16s cubic-bezier(0.36, 0, 0.64, 1)-6s infinite alternate;
      }
      .icon5 {
        top: 14.5vw;
        left: 22vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
      }
      .icon6 {
        top: 15.25vw;
        right: 11.25vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
      }
      .icon7 {
        top: 19vw;
        left: 41vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
      }

      .icon8 {
        top: 22.25vw;
        right: 11.25vw;
        animation: turnX 8s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate,
          turnY 8s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
          turn-self 16s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
      }
    }
  }
}

@keyframes centerRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* icon自身的大小缩放 */
@keyframes turn-self {
  0% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.7);
  }
}

/* icon横向运动变化，x轴的范围 */
@keyframes turnX {
  0% {
    left: 3vw;
  }

  100% {
    left: 41vw;
  }
}

/*icon纵向运动变化，Y轴的范围 */
@keyframes turnY {
  0% {
    top: 14.5vw;
  }

  100% {
    top: 24vw;
  }
}
</style>

到了这里，关于`CSS`----图标`3D`环绕旋转，近大远小效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • css实现图片的3d旋转-照片墙

    css实现图片的3d旋转-照片墙

      1.html                 这里准备了1个section和7个div，7个div都要求定位在父元素section那里（都在中心点），每个div各一张图，上面效果图有1张在中间的，其余6张图要在周围 2.图片位置摆放- 旋转           6个图片在 周围 ，看起来就像个六边形，所以每个图都间隔

    2024年02月06日
    浏览(98)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图，多个物体在轨道上绕中心物体旋转，当旋转到物体后面时将被遮挡。主要使用css实现，为了简化代码，引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转，计算出每个物体在椭圆轨道上的位置，使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(86)

  • 【CSS笔记】CSS动画效果（2d、3d）之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画

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

    2024年02月02日
    浏览(88)
  • CSS打造图片翻转立体3D效果

    CSS打造图片翻转立体3D效果

      html的结构非常简单，只要一个盒子里面放二张照片即可 html代码： css代码： 这里记得开绝对定位时一定要给父盒子开启相对定位，否则图片就会以body为父盒子进行定位了 我们可以通过 transform 这个css属性对样式进行一些翻转处理 1.我们需要翻转第一张图片展示第二张图片

    2024年02月07日
    浏览(44)
  • 【CSS动画02--卡片旋转3D】

    【CSS动画02--卡片旋转3D】

    css动画02--旋转卡片3D 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360°的旋转，以下是几张图片的介绍，上面是鄙人自己录得一个供大家参考的小视频🤭

    2024年02月12日
    浏览(42)
  • CSS 3D旋转正方形

    CSS 3D旋转正方形

    2024年01月23日
    浏览(38)
  • 【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

    【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

    3D 旋转 指的是 在 三维空间坐标系 中 , 绕 X 轴 , Y 轴 , Z 轴 进行旋转 , 同时还可以绕 自定义轴 进行旋转 ; 2D 旋转只能 以 某个点为中心进行旋转 , 3D 旋转可以绕某个轴进行旋转 ; CSS3 中 3D 旋转 语法 : 绕 X 轴旋转 : 沿着 X 轴 正方向 旋转 45 度 ; 绕 Y 轴旋转 : 沿着 Y 轴 正方向

    2024年02月11日
    浏览(42)
  • 如何用css实现一个3D旋转照片墙

    如何用css实现一个3D旋转照片墙

       学习前端是件很有趣的事，今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦，希望感兴趣的小伙伴会喜欢！    今天，我们要做一个3D旋转相册，首先让我们了解一下关于3D。    3D立体其实就像数学中的x轴，y轴，z轴，在网页上设置z轴与y轴的偏移量，能给

    2024年02月01日
    浏览(50)
  • 纯css实现奥运五环、3D平移、旋转、扭曲

    纯css实现奥运五环、3D平移、旋转、扭曲

    1、不是真正的五环，因为通过形变得来。 2、不同电脑显示器的像素不同，显现的效果不同。 3、不推荐使用此方法。 4、主要通过旋转加平移的方式实现。

    2024年02月10日
    浏览(42)
  • Echarts实现3D地球加卫星环绕效果

    Echarts实现3D地球加卫星环绕效果

    通过echarts实现自动旋转3D地球加卫星环绕效果 全部使用 按需使用 代码如下： 卫星环绕效果通过scatter3D实现，将symbolSize设置为0，通过label-textStyle-backgroundColor-image设置卫星图片，代码如下： 卫星伴随地球自转，缺点在于速度与地球相同，暂时未找到更好的替代方法。 完整代

    2024年02月17日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包