纯CSS3旋转原子动画特效

原创 已于 2025-06-27 11:13:42 修改 · 778 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #css3

于 2025-06-19 13:59:24 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS3旋转原子动画特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0f0c29;
            background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
            overflow: hidden;
            font-family: Arial, sans-serif;
            perspective: 1000px;
        }

        .atom {
            position: relative;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: rotateAtom 20s infinite linear;
        }

        .nucleus {
            position: absolute;
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, #ff0a54, #ff477e);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 30px #ff0a54;
        }

        .orbit {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform-style: preserve-3d;
        }

        .electron {
            position: absolute;
            width: 15px;
            height: 15px;
            background: radial-gradient(circle, #00f5d4, #00bbf9);
            border-radius: 50%;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 15px #00f5d4;
        }

        /* 轨道1 */
        .orbit-1 {
            transform: rotateX(70deg) rotateY(10deg);
            animation: orbit1 8s infinite linear;
        }

        .orbit-1 .electron {
            animation: electron1 8s infinite linear;
        }

        /* 轨道2 */
        .orbit-2 {
            transform: rotateX(10deg) rotateY(70deg);
            animation: orbit2 12s infinite linear reverse;
        }

        .orbit-2 .electron {
            animation: electron2 12s infinite linear reverse;
        }

        /* 轨道3 */
        .orbit-3 {
            transform: rotateX(50deg) rotateY(50deg);
            animation: orbit3 15s infinite linear;
        }

        .orbit-3 .electron {
            animation: electron3 15s infinite linear;
        }

        /* 动画定义 */
        @keyframes rotateAtom {
            0% {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }

        @keyframes orbit1 {
            0% {
                transform: rotateX(70deg) rotateY(10deg) rotateZ(0);
            }
            100% {
                transform: rotateX(70deg) rotateY(10deg) rotateZ(360deg);
            }
        }

        @keyframes electron1 {
            0% {
                transform: translateX(-50%) rotateZ(0) translateY(-150px);
            }
            100% {
                transform: translateX(-50%) rotateZ(360deg) translateY(-150px);
            }
        }

        @keyframes orbit2 {
            0% {
                transform: rotateX(10deg) rotateY(70deg) rotateZ(0);
            }
            100% {
                transform: rotateX(10deg) rotateY(70deg) rotateZ(360deg);
            }
        }

        @keyframes electron2 {
            0% {
                transform: translateX(-50%) rotateZ(0) translateY(-150px);
            }
            100% {
                transform: translateX(-50%) rotateZ(360deg) translateY(-150px);
            }
        }

        @keyframes orbit3 {
            0% {
                transform: rotateX(50deg) rotateY(50deg) rotateZ(0);
            }
            100% {
                transform: rotateX(50deg) rotateY(50deg) rotateZ(360deg);
            }
        }

        @keyframes electron3 {
            0% {
                transform: translateX(-50%) rotateZ(0) translateY(-150px);
            }
            100% {
                transform: translateX(-50%) rotateZ(360deg) translateY(-150px);
            }
        }

        /* 背景粒子 */
        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            animation: floatParticle linear infinite;
        }

        @keyframes floatParticle {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) translateX(100px);
                opacity: 0;
            }
        }

        /* 版权信息 */
        .footer {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
        }

        .footer a {
            color: #00f5d4;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="atom">
        <!-- 原子核 -->
        <div class="nucleus"></div>
        
        <!-- 电子轨道1 -->
        <div class="orbit orbit-1">
            <div class="electron"></div>
        </div>
        
        <!-- 电子轨道2 -->
        <div class="orbit orbit-2">
            <div class="electron"></div>
        </div>
        
        <!-- 电子轨道3 -->
        <div class="orbit orbit-3">
            <div class="electron"></div>
        </div>
    </div>
    
    <!-- 背景粒子 -->
    <div id="particles"></div>
    
 

    <script>
        // 创建背景粒子
        const particlesContainer = document.getElementById('particles');
        const particleCount = 50;
        
        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            
            // 随机位置
            const left = Math.random() * 100;
            const top = Math.random() * 100 + 100; // 从屏幕底部开始
            
            // 随机大小
            const size = Math.random() * 3 + 1;
            
            // 随机动画时间和延迟
            const duration = Math.random() * 20 + 10;
            const delay = Math.random() * 10;
            
            particle.style.left = `${left}%`;
            particle.style.top = `${top}%`;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.animationDuration = `${duration}s`;
            particle.style.animationDelay = `-${delay}s`;
            
            particlesContainer.appendChild(particle);
        }
    </script>
</body>
</html>

ziblog
关注
精选资源
纯CSS3旋转原子动画特效特效代码
03-20
在本案例中，我们关注的是一个基于CSS3的特定特效——"纯CSS3旋转原子动画特效"。这个特效为网页设计带来了生动且吸引人的动态视觉效果，它模拟了原子在空间中的旋转运动，使网页界面更具有科技感和创新性。 首先，...
css3原子旋转动画特效制作原理,CSS3原子动画
weixin_36230923的博客
08-03 291
csshtml, body {height: 100%;}body {background: linear-gradient(to right, #c0392b, #8e44ad);-webkit-transform: scale(1.2, 1.2);transform: scale(1.2, 1.2);overflow: hidden;}body > div {border-radius:...
css3原子旋转动画特效制作原理,CSS3 微观原子运动模拟
weixin_35063366的博客
08-03 364
CSS语言：CSSSCSS确定html,body {width: 100%;height: 100%;}body {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-fle...
CSS3实现橙色火焰燃烧动画特效实战
weixin_42515340的博客
10-07 308
keyframes用于描述动画过程中元素样式的阶段性变化，支持使用百分比（0%到100%）或关键词from（等价于0%）、to（等价于100%）来标记时间点：0% {opacity: 0;该示例实现了元素从上方淡入并下落至原始位置的效果。浏览器会自动补间中间帧（tweening），形成平滑过渡。外焰是火焰最外围的区域，特点是高温但低密度，视觉上表现为淡黄色至无色的渐变光晕。其实现关键在于：使用极低透明度的渐变背景；
css3图片旋转轮播_使用CSS和JavaScript构建3D旋转轮播
culh2177的博客
08-28 1496
A lot has been said on the use of traditional 2D carousels, for example this piece on Smashing Magazine covers this subject. There’s no simple yes or no answer to the ‘should I use a carousel?’ questi...
纯CSS3打造黑色炫酷开关按钮动画特效
weixin_32306683的博客
09-29 716
关键帧动画是CSS3中最强大的动画机制之一，它允许开发者精确控制元素在动画过程中的每一个阶段的表现形式。对于一个黑色炫酷风格的开关按钮而言，仅靠简单的状态切换无法满足高质感交互动画的需求；必须引入多阶段、分层渲染的动态效果，例如滑块移动时伴随光晕扩散、背景渐变流动、阴影增强等复合视觉反馈。这正是@keyframes的价值所在。
Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果
weixin_34088598的博客
05-28 926
如何画3D旋转效果或者卫星围绕旋转效果，当然这个也是工作中的一个任务，我在网上翻了一下，并没有找到类似的东西，所以写下来还是费了一番功夫，因此我把它拿出来记录一下，当然替换了一部分内容。好了，话不多说，进入正题。 我们都知道，浏览器是一个平面的视觉效果，如何在一个平面上看出立体的3D效果呢，其实就是一个视觉差的问题。那我们就从一个平面视觉效果一步一步画出立体的3D效果来。我还是先把效...
HTML + CSS3 基础入门与进阶
weixin_49809163的博客
04-06 3880
HTML + CSS3 基础入门与进阶简介一、HTML 入门与进阶二、CSS 入门与进阶1、CSS 基础入门（1）CSS3简介（2）CSS 的书写位置（3）CSS 的基本语法2、CSS 选择器（1）标签选择器（2）id 选择器（3）class 选择器（4）复合选择器（5）伪类（6）元素关系选择器（7）序号选择器（8）属性选择器（9）CSS3 新增的伪类（10）伪元素（11）层叠性和选择器权重计算3、文本与字体属性（1）常用文本样式属性（2）常用字体属性（3）段落和行相关属性（4）继承性4、CSS 盒模型（1
分享84个CSS3特效，总有一款适合您
weixin_47730343的博客
02-14 1059
css3珠子并排上下滚动loading加载动画特效。css3卡片式产品分类鼠标悬停高亮变色特效。4款创意loading加载css3动画特效。纯css3阶梯式loading加载动画特效。css3 svg卡片点击折叠打开动画特效。纯css3翻页加载loading动画特效。纯css3花朵样式loading加载特效。css3 svg鼠标经过按钮展开动画特效。css3海底冒泡和3D多角鱼群动画特效。css3半圆饼状图形百分比统计动画特效。css3 svg动态原子结构示意图特效。css3登录注册表单3D翻转切换特效。
好用的样式动画库集合（css、js）
失眠时间的博客
11-28 1806
好用的css动画。
纯CSS3旋转原子动画特效.zip
07-04
【纯CSS3旋转原子动画特效】是一个利用现代浏览器支持的CSS3特性实现的创新视觉效果。这个动画设计的核心是通过CSS3的transform属性来创建一个动态的、不断旋转的原子模型，无需JavaScript的介入，完全依赖于CSS的...
纯CSS3实现的旋转原子动画特效源码.zip
11-20
【标题】"纯CSS3实现的旋转原子动画特效源码.zip"揭示了这个压缩包包含的是一个使用纯CSS3技术创建的动态原子动画效果的源代码。CSS3是层叠样式表的第三版，它引入了许多新的特性和功能，使得网页设计更为丰富多彩，...
简单的CSS3旋转原子动画特效
06-11
在本文中，我们将深入探讨如何使用CSS3来创建一个简单的原子旋转动画特效。这个特效虽然在实际应用中可能并非必需，但它能帮助我们理解和掌握CSS3的一些核心特性，特别是动画和变换（transform）属性，这对于任何...
Canvas架构手记 08 CSS Transform | CSS 显示模型 | React.memo
最新发布
im_AMBER的博客
12-10 1233
React.memo是 React 提供的高阶组件（HOC），本质是浅比较的组件缓存工具它会 “记住” 组件上一次渲染的结果；当组件的props 没有发生浅变化时，直接复用上次渲染的 DOM / 虚拟 DOM，跳过重新渲染；仅当 props 发生浅变化（比如值类型改变、引用类型地址改变）时，才重新渲染组件。// 自定义比较：仅比较 angle，忽略 className/style// 带自定义比较的 memo 组件// ... 组件逻辑。
CSS基础详解(2)--Grid网格布局详解
Coding...
12-10 1053
网格布局是一种通过水平与垂直线构成的页面排版方式，由列(column)、行(row)和沟槽(gutter)组成。通过CSS的display: grid属性可创建网格容器，使用grid-template-columns定义列宽（支持px、fr等单位），grid-gap设置间隙。repeat()函数可简化重复轨道定义，minmax()函数能灵活控制行/列尺寸范围。网格分为显式（手动定义）和隐式（自动生成）两种，通过grid-auto-rows可控制隐式行高。网格布局能实现响应式、精确的元素排列，提升页面统一性。
CSS 文本描边最稳方案：多重 text-shadow 实现清晰黑描边
apple_70049717的博客
12-10 295
在前端页面中，当文字内容处于复杂背景（如视频画面、图片区域）之上时，白色字体很容易与背景混合导致不清晰。左上、右上、左下、右下 4 个角方向。描边厚度：由偏移量（如 2px）决定。无模糊：确保边缘硬朗，不会糊成光晕。是最有效的增强可读性的方法。上、下、左、右 4 个方向。
avue uploader图片预览拉伸变型的css处理方法
经验之谈，不做搬运工
12-10 276
摘要：针对avue uploader图片预览拉伸问题，可通过CSS覆盖解决。使用object-fit: cover属性可让图片覆盖容器并裁剪多余部分，保持比例不变。如需完整显示不裁剪，可改用object-fit: contain。示例代码展示了如何在el-upload组件中应用该样式。
【css】如何让 fixed 元素具有父节点同样的宽度？
纠缠AI的亮子
12-09 154
子元素（fixed）的宽度设为100%就可以，这也是错误的。有效的方法是通过javascript获取父级元素宽度，然后设置。认为是一样的，其实不是。还有不少人认为父级元素使用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值