纯html+css炫酷地球仪动画效果

最新推荐文章于 2023-10-06 22:21:27 发布
置顶 最新推荐文章于 2023-10-06 22:21:27 发布
阅读量9.6k 收藏 56
点赞数 15
分类专栏： 资源文件 文章标签： 纯html+css炫酷地球仪动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41496591/article/details/91355693
版权

纯html+css炫酷地球仪动画效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #000;
        }
        @keyframes runing {
            0% {
                transform: rotate(23.6deg) rotateX(-23.6deg) rotateY(0deg);
            }
            100% {
                transform: rotate(23.6deg) rotateX(-23.6deg) rotateY(360deg);
            }
        }
        .big {
            position: fixed;
            top: 50%;
            left: 50%;
            /*position: relative;*/
            width: 1000px;
            height: 1000px;
            transform: translate(-50%,-55%);
            /*background: seagreen;*/
        }
        .bigbox {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 600px;
            /*background: seagreen;*/
            transform: translate(-50%,-50%);
            perspective: 1200px;
        }
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            /*background: orangered;*/
            transform-style: preserve-3d;
            animation: runing 15s linear infinite;
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 50%;
        }

        .box div:nth-child(1) {

        }
        .box div:nth-child(2) {
            transform: rotateY(22.5deg);
        }
        .box div:nth-child(3) {
            transform: rotateY(45deg);
        }
        .box div:nth-child(4) {
            transform: rotateY(67.5deg);
        }
        .box div:nth-child(5) {
            transform: rotateY(90deg);
        }
        .box div:nth-child(6) {
            transform: rotateY(112.5deg);
        }
        .box div:nth-child(7) {
            transform: rotateY(135deg);
        }
        .box div:nth-child(8) {
            transform: rotateY(157.5deg);
        }
        .box div:nth-child(9) {
            transform: translateY(-300px) rotateX(90deg) scale(0);
        }
        .box div:nth-child(10) {
            transform: translateY(-225px) rotateX(90deg) scale(.66);
        }
        .box div:nth-child(11) {
            transform: translateY(-150px) rotateX(90deg) scale(.865);
        }
        .box div:nth-child(12) {
            transform: translateY(-75px) rotateX(90deg) scale(.97);
        }
        .box div:nth-child(13) {
            transform: translateY(0) rotateX(90deg) scale(1);
        }
        .box div:nth-child(14) {
            transform: translateY(75px) rotateX(90deg) scale(.97);
        }
        .box div:nth-child(15) {
            transform: translateY(150px) rotateX(90deg) scale(.865);
        }
        .box div:nth-child(16) {
            transform: translateY(225px) rotateX(90deg) scale(.66);
        }
        .box div:nth-child(17) {
            transform: translateY(300px) rotateX(90deg) scale(0);
        }
        .but {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 3px;
            height: 680px;
            background: #fff;
            border-radius: 0;
            transform: translate(-50%,-50%) rotate(23.6deg);
        }
        .fix {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 680px;
            height: 680px;
            z-index: 99;
            /*background: seagreen;*/
            /*opacity: .5;*/
            border-radius:50%;
            border-top: 20px solid #fff;
            border-right: 20px solid #fff;
            border-left: 20px solid transparent;
            border-bottom: 20px solid transparent;
            transform: translate(-52%,-51%) rotate(68.6deg);
        }
        .foot {
            position: absolute;
            top: 850px;
            left: 50%;
            transform: translate(-50%,0);
            z-index: 3;
            width: 30px;
            height: 60px;
            background: #fff;
        }
        .footer {
            position: absolute;
            top: 765px;
            left: 50%;
            width:300px;
            height:300px;
            border:solid 1px black;
            background: #fff;
            border-radius: 50%;
            transform: translate(-50%,0) rotateX(80deg);
        }
        .footer:after{
            content: '';
            display:inline-block;
            width:300px;
            height: 320px;
            position:relative;
            opacity: 0.8;
            background: #fff;
            top:50%;
            left:-0.5px;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            border-bottom-left-radius: 45%;
            border-bottom-right-radius: 45%;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="bigbox">
            <div class="box">

                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>

                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="but"></div>
        </div>
        <div class="fix"></div>
        <div class="foot"></div>
        <div class="footer"></div>
    </div>
</body>
</html>
蔡徐鲲
关注
  • 15
    点赞
  • 踩
  • 56
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
html地球仪代码,HTML5 旋转的变色球（地球仪）
weixin_32259855的博客
06-09 1427
CSS语言：CSSSCSS确定* {box-sizing: border-box;font-size: 0px;font-family: verdana;}.container {top: calc(40vh - 200px);font-size: 0px;position: relative;height: 200px;width: 400px;margin: 0 auto;perspectiv...
ECharts ThreeJS Earth - 跨平台的动态地球可视化神器
最新发布
gitblog_00081的博客
04-07 439
ECharts ThreeJS Earth - 跨平台的动态地球可视化神器 项目地址:https://gitcode.com/hujiulong/echarts-threejs-earth ECharts ThreeJS Earth 是一个基于ECharts和Three.js开发的开源项目，它为开发者提供了一个强大且灵活的工具，用于构建实时、交互式的全球地图和地球仪视觉效果。通过将ECharts的...
HTML+CSS+JS-旋转地球
记录和分享属于我的“IT”时光
05-10 1079
HTML+CSS+JS-旋转地球
css3 地球仪动画,3D CSS 地球仪
weixin_39866857的博客
08-04 499
cssbody {background: #1d1f20;overflow: hidden;}.wrapper {perspective: 800px;display: flex;justify-content: center;filter: blur(1.5px);}.container {transform: rotateX(40deg) rotateY(40deg) rotateZ(90de...
html地球仪代码,html – 在CSS中旋转地球仪
weixin_39724004的博客
06-09 971
我在CSS中创建一个旋转地球效果。我在CSS中创建了地球：body {background-color: #111;}#earth {width: 300px;height: 300px;background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;background-size...
你可以将类似于Google Earth的地球仪嵌入到自己的网站中
weixin_33693070的博客
01-08 641
Poly9公司的开发了一个叫FreeEarth的地球仪。它的功能类似于Google Earth和微软的Virtual Earth，但它是基于Flash的，所以可以让您只要稍微加几句代码就能把它嵌入到网站中。当然肯定也没有前两款软件这么精确了。不过还是很受网友们的欢迎，现在有很多的网站都加入了FreeEarth的应用。如Flickervision 3D和Twittervision 3D等。这里有Ja...
html5 3D酷炫世界地球仪动画特效.zip
01-05
html5 3D酷炫世界地球仪动画特效 整体旋转发光 有紫光特效 有位置标注（可自己修改代码添加新位置） 可鼠标拖动旋转查看 要是打开空白就是浏览器对跨域访问禁止了（可在IDE直接用浏览器打开查看或添加浏览器启动参数...
javascript 3D炫酷地球动画，基于echarts实现
05-10
在本项目中，我们探索了如何使用JavaScript和ECharts库创建一个3D炫酷的地球动画。ECharts是一个基于HTML5 Canvas技术的数据可视化库，它提供了丰富的图表类型和交互功能，使得开发人员能够轻松地构建出具有吸引力的...
css3炫酷页面加载动画特效代码.zip
11-17
在压缩包中的“css3炫酷页面加载动画特效代码”，可能包含了多个示例，每个示例都展示了不同的加载动画效果，比如旋转的地球、闪烁的星星、流动的线条等。开发者可以通过查看和学习这些代码，了解如何将CSS3的规则与...
css炫酷动画及文件图片
08-18
1：星空 2：流线 3：地球 4：loading 5：hover代码文件（十万行） 6：图片以及源码
一个简易的不断旋转的地球仪
09-05
使用CSS的transform和animation动画实现一个旋转的地球仪.
逼真的Canvas 3D css3地球旋转动画特效.zip
07-11
代码片段：  
html实现旋转地球特效
03-13
主要是用自定义动画和animation相结合，实现旋转地球特效。 两张图片并排排列，绝对定位，不断改变图片的left值，实现切换效果。 增加阴影。
动态3D地球图
11-25
利用glut库来实现3d地球形状的描绘和旋转
纯CSS3迪斯科旋转球动画特效
06-24
在本文中，我们将深入探讨如何使用纯CSS3创建一个炫酷的迪斯科旋转球动画特效。CSS3作为现代网页设计的重要工具，提供了丰富的样式控制和动态效果，使得无需JavaScript或者其他脚本语言即可实现复杂的动画效果。...
js+html实现滚动地球仪
愚人码头的博客
10-06 167
js+html实现滚动地球仪。
用css做一个旋转的地球仪
orq18810575870的博客
03-29 2733
html部分:&lt;body&gt; &lt;div class="hoder"&gt;&lt;/div&gt; &lt;div class="circle"&gt;&lt;/div&gt; &lt;div class="circle equator"&gt;&lt;/div&gt; &lt;di
用代码写一个炫酷的地球
Care0527的博客
12-15 6969
废话不多说，直接上效果图 效果如图，需要代码的宝宝，关注，私信我
html翻牌动画效果,js+css3翻牌动画效果
06-01
好的，下面我给您介绍一下 HTML+CSS3 和 JS 实现翻牌动画效果的方法。 HTML+CSS3 翻牌动画效果： HTML： ``` <div class="flip-container"> <div class="flipper"> <div class="front"> // 正面内容 </div> <div class="back"> // 反面内容 </div> </div> </div> ``` CSS： ``` .flip-container { perspective: 1000px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; } .back { transform: rotateY(180deg); } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } ``` JS+CSS3 翻牌动画效果： HTML： ``` <div class="flip-container"> <div class="flipper"> <div class="front"> // 正面内容 </div> <div class="back"> // 反面内容 </div> </div> </div> ``` CSS： ``` .flip-container { perspective: 1000px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; } .back { transform: rotateY(180deg); } .flip-container.hover .flipper { transform: rotateY(180deg); } ``` JS： ``` const flipContainer = document.querySelector('.flip-container'); flipContainer.addEventListener('mouseenter', function() { this.classList.add('hover'); }); flipContainer.addEventListener('mouseleave', function() { this.classList.remove('hover'); }); ``` 以上就是 HTML+CSS3 和 JS 实现翻牌动画效果的方法，希望对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值