广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >如何使用CSS3实现的科技球体旋转动画特效
  • 154

0
分享到

如何使用CSS3实现的科技球体旋转动画特效

2024-04-02 19:04:59 154人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“如何使用css3实现的科技球体旋转动画特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3实现的科技球体旋转动画特效”这

这篇文章主要为大家展示了“如何使用css3实现的科技球体旋转动画特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3实现的科技球体旋转动画特效”这篇文章吧。

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

box-sizing: border-box;

border-radius: inherit;

border: 1px solid;

box-shadow: inset 0 0 2em, 0 0 2em;

}

.side::before {

width: 2.5em;

height: 2.5em;

color: Gold;

}

.side::after {

width: 1.5em;

height: 1.5em;

-WEBkit-transfORM: translateZ(-2em);

transform: translateZ(-2em);

box-shadow: inset 0 0 1em, 0 0 1em;

color: teal;

}

.side--back {

-webkit-transform: translateZ(-5em) rotateY(180deg);

transform: translateZ(-5em) rotateY(180deg);

}

.side--left {

-webkit-transform: translateX(-5em) rotateY(-90deg);

transform: translateX(-5em) rotateY(-90deg);

}

.side--right {

-webkit-transform: translateX(5em) rotateY(90deg);

transform: translateX(5em) rotateY(90deg);

}

.side--top {

-webkit-transform: translateY(-5em) rotateX(90deg);

transform: translateY(-5em) rotateX(90deg);

}

.side--bottom {

-webkit-transform: translateY(5em) rotateX(-90deg);

transform: translateY(5em) rotateX(-90deg);

}

.side--front {

-webkit-transform: translateZ(5em);

transform: translateZ(5em);

}

.side__inner {

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

width: 5em;

height: 5em;

margin: auto;

border-radius: inherit;

border: 1px solid;

box-shadow: inset 0 0 2em;

color: orangered;

-webkit-transform: translateZ(2em);

transform: translateZ(2em);

-webkit-transform-style: preserve-3D;

transform-style: preserve-3d;

}

.side__inner::before, .side__inner::after {

content: "";

display: block;

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

box-sizing: border-box;

border-radius: inherit;

border: 1px solid;

box-shadow: inset 0 0 2em, 0 0 2em;

}

.side__inner::before {

width: 2.5em;

height: 2.5em;

-webkit-transform: translateZ(2em);

transform: translateZ(2em);

color: crimson;

}

.side__inner::after {

width: 1.5em;

height: 1.5em;

-webkit-transform: translateZ(4em);

transform: translateZ(4em);

color: purple;

}

@-webkit-keyframes rotate {

100% {

-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

}

}

@keyframes rotate {

100% {

-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

}

}

html, BODY {

height: 100%;

}

BODY {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

</style>

</head>

<body>

<div class="container">

<div class="cube cube--1">

<div class="side side--back">

<div class="side__inner"></div>

</div>

<div class="side side--left">

<div class="side__inner"></div>

</div>

<div class="side side--right">

<div class="side__inner"></div>

</div>

<div class="side side--top">

<div class="side__inner"></div>

</div>

<div class="side side--bottom">

<div class="side__inner"></div>

</div>

<div class="side side--front">

<div class="side__inner"></div>

</div>

</div>

<div class="cube cube--2">

<div class="side side--back">

<div class="side__inner"></div>

</div>

<div class="side side--left">

<div class="side__inner"></div>

</div>

<div class="side side--right">

<div class="side__inner"></div>

</div>

<div class="side side--top">

<div class="side__inner"></div>

</div>

<div class="side side--bottom">

<div class="side__inner"></div>

</div>

<div class="side side--front">

<div class="side__inner"></div>

</div>

</div>

<div class="cube cube--3">

<div class="side side--back">

<div class="side__inner"></div>

</div>

<div class="side side--left">

<div class="side__inner"></div>

</div>

<div class="side side--right">

<div class="side__inner"></div>

</div>

<div class="side side--top">

<div class="side__inner"></div>

</div>

<div class="side side--bottom">

<div class="side__inner"></div>

</div>

<div class="side side--front">

<div class="side__inner"></div>

</div>

</div>

</div>

</body>

</html>

以上是“如何使用CSS3实现的科技球体旋转动画特效”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用CSS3实现的科技球体旋转动画特效

本文链接: https://www.lsjlt.com/news/89824.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何使用CSS3实现的科技球体旋转动画特效
    这篇文章主要为大家展示了“如何使用CSS3实现的科技球体旋转动画特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3实现的科技球体旋转动画特效”这...
    99+
    2022-10-19
  • 如何使用css3实现3d旋转动画特效
    这篇文章将为大家详细讲解有关如何使用css3实现3d旋转动画特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下:<!doctype html><...
    99+
    2022-10-19
  • css3如何实现旋转缩放动画效果
    这篇文章主要介绍了css3如何实现旋转缩放动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 方法：1、利用...
    99+
    2022-10-19
  • css3如何实现放大旋转动画效果
    这篇文章主要介绍“css3如何实现放大旋转动画效果”，在日常操作中，相信很多人在css3如何实现放大旋转动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3如何实现...
    99+
    2022-10-19
  • HTML5+CSS3如何实现3D立方体旋转动画
    这篇文章将为大家详细讲解有关HTML5+CSS3如何实现3D立方体旋转动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图：知识点：1、perspective ，tr...
    99+
    2022-10-19
  • css3如何实现一个旋转的动画
    本篇内容介绍了“css3如何实现一个旋转的动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2022-10-19
  • CSS3如何实现同时执行倾斜和旋转的动画效果
    这篇文章主要介绍了CSS3如何实现同时执行倾斜和旋转的动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。先看看静态的效果，运行后的效果更...
    99+
    2022-10-19
  • 如何使用CSS3实现3D旋转透视效果
    本篇内容介绍了“如何使用CSS3实现3D旋转透视效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！你将学到...
    99+
    2022-10-19
  • 如何使用CSS3实现动画效果
    这篇文章主要为大家展示了“如何使用CSS3实现动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3实现动画效果”这篇文章吧。浏览器支持Inte...
    99+
    2022-10-19
  • 如何使用css3实现转换过渡和动画效果
    这篇文章主要介绍了如何使用css3实现转换过渡和动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。为什么要用css动画替换js动画  导致JavaScript效...
    99+
    2023-06-08
  • 如何使用CSS实现元素的旋转背景图动画效果
    如何使用CSS实现元素的旋转背景图动画效果背景图动画效果可以增加网页的视觉吸引力和用户体验。本文将介绍如何使用CSS实现元素的旋转背景图动画效果，并提供具体的代码示例。首先，我们需要准备一张背景图，可以是任何你喜欢的图片，例如一张太阳或者电...
    99+
    2023-11-21
    animation transform background
  • 如何利用纯CSS实现旋转React图标的动画效果
    如何利用纯CSS实现旋转React图标的动画效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。几天前，小编在 codepen 看到一个剑气...
    99+
    2022-10-19
  • 如何使用CSS制作旋转动画的实现步骤
    如何使用CSS制作旋转动画的实现步骤在现代网页设计中，动画效果是非常重要和受欢迎的一个元素。其中，旋转动画可以给网页注入活力和吸引力。本文将介绍如何使用CSS制作旋转动画的具体步骤，并提供一些代码示例。步骤一：创建HTML结构首先，在HTM...
    99+
    2023-10-26
    CSS 制作 旋转动画
  • 如何使用CSS创建一个炫酷的球体动画效果
    这篇文章给大家分享的是有关如何使用CSS创建一个炫酷的球体动画效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 　　1.使用Jade和SCSS生成一个圆圈 　　创建一个圆圈...
    99+
    2022-10-19
  • 如何使用CSS3实现超炫的Loading动画效果
    今天小编给大家分享一下如何使用CSS3实现超炫的Loading动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，...
    99+
    2022-10-19
  • 如何使用CSS3实现酷炫的3D旋转透视
    这篇文章将为大家详细讲解有关如何使用CSS3实现酷炫的3D旋转透视，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　开始 　　1.CSS3 3D 转换的常用API介...
    99+
    2022-10-19
  • 如何使用css3+js实现烟花绽放的动画效果
    这篇文章主要为大家展示了“如何使用css3+js实现烟花绽放的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css3+js实现烟花绽放的动画效果...
    99+
    2022-10-19
  • 如何使用CSS3实现SVG路径描边动画效果
    这篇文章将为大家详细讲解有关如何使用CSS3实现SVG路径描边动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。不依赖javascript，直接使用纯css实现 svg 的描边绘制动画效果，效果演示动...
    99+
    2023-06-08
  • 如何使用CSS实现图片的旋转效果
    如何使用CSS实现图片的旋转效果CSS（Cascading Style Sheets）是一种用于设置网页样式和布局的标记语言。通过CSS，我们可以实现许多吸引人的网页效果，其中包括图片的旋转效果。在本文中，我们将讨论如何使用CSS来实现图片...
    99+
    2023-11-21
    CSS 图片 旋转
  • 如何使用CSS3实现按钮悬停闪烁动态特效
    本篇内容介绍了“如何使用CSS3实现按钮悬停闪烁动态特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作