css3动画实现八大行星

最新推荐文章于 2022-07-07 13:00:12 发布
最新推荐文章于 2022-07-07 13:00:12 发布
阅读量773 收藏 5
点赞数 3
分类专栏： css基础篇 文章标签： css3动画实现八大行星
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang031997/article/details/103101008
版权

css3动画实现八大行星

话不多说 上代码 看效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes rotate {
            from {
                transform: rotate(0);
            }

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

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .solarsys {
            width: 80%;
            height: 900px;
            background: #1f1e1e;
            margin: 0px auto;
            position: relative;
        }

        .solarsys div {
            position: absolute;
            border-radius: 50%;
        }

        .sun {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: #f05121;
            box-shadow: 1px 1px 19px 5px #d6452b;
            position: absolute;
            top: calc(50% - 75px);
            left: calc(50% - 75px);
        }

        .mercuryOrbit {
            width: 180px;
            height: 180px;
            border: 1px dotted #fff;
            border-radius: 50%;
            top: calc(50% - 90px);
            left: calc(50% - 90px);
        }

        .mercury {
            width: 10px;
            height: 10px;
            background: rgb(73, 146, 214);
            top: calc(50% - 5px);
            left: calc(50% - 95px);
            animation: rotate 3s infinite linear;
            transform-origin: 95px 5px;
            box-shadow: 1px 0px 5px 2px rgb(73, 146, 214);
        }

        .venusOrbit {
            width: 240px;
            height: 240px;
            border: 1px dotted #fff;
            top: calc(50% - 120px);
            left: calc(50% - 120px);
        }

        .venus {
            width: 20px;
            height: 20px;
            background: rgb(228, 231, 60);
            top: calc(50% - 10px);
            left: calc(50% - 130px);
            animation: rotate 6s infinite linear;
            transform-origin: 130px 10px;
            box-shadow: 1px 0px 5px 2px rgb(228, 231, 60);
        }

        .earthOrbit {
            width: 320px;
            height: 320px;
            border: 1px dotted #fff;
            top: calc(50% - 160px);
            left: calc(50% - 160px);
        }

        .earth {
            width: 16px;
            height: 16px;
            background: rgb(75, 177, 224);
            top: calc(50% - 8px);
            left: calc(50% - 168px);
            animation: rotate 11s infinite linear;
            transform-origin: 168px 6px;
            box-shadow: 1px 0px 5px 2px rgb(75, 177, 224);
            position: relative;
        }
        .earth::after{
            content: "";
            width: 80px;
            height: 80px;
            border: 1px dotted #fff;
            top: calc(50% - 40px);
            left: calc(50% - 40px);
            position: absolute;
            border-radius: 50%;
            box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.452);
        }
        .earth::before{
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            background: rgba(255, 255, 255);
            top: calc(50% - 5px);
            left: calc(50% - 45px);
            border-radius: 50%;
            animation: rotate 13s infinite linear;
            transform-origin: 45px 7
            px;
            box-shadow: 0px 0px 3px 2px rgba(255, 255, 255);
        }


        .marsOrbit {
            width: 390px;
            height: 390px;
            border: 1px dotted #fff;
            top: calc(50% - 195px);
            left: calc(50% - 195px);
        }

        .mars {
            width: 14px;
            height: 14px;
            background: rgb(219, 151, 24);
            top: calc(50% - 7px);
            left: calc(50% - 202px);
            animation: rotate 8.5s infinite linear;
            transform-origin: 202px 7px;
            box-shadow: 1px 0px 5px 2px rgb(219, 151, 24);
        }

        .jupiterOrbit {
            width: 500px;
            height: 500px;
            border: 1px dotted #fff;
            top: calc(50% - 250px);
            left: calc(50% - 250px);
        }

        .jupiter {
            width: 30px;
            height: 30px;
            background: rgba(204, 204, 204);
            top: calc(50% - 15px);
            left: calc(50% - 265px);
            animation: rotate 10s infinite linear;
            transform-origin: 265px 15px;
            box-shadow: 1px 0px 5px 2px rgba(204, 204, 204);
        }

        .saturnOrbit {
            width: 620px;
            height: 620px;
            border: 1px dotted #fff;
            top: calc(50% - 310px);
            left: calc(50% - 310px);
        }

        .saturn {
            width: 18px;
            height: 18px;
            background: rgb(118, 119, 44);
            top: calc(50% - 9px);
            left: calc(50% - 319px);
            animation: rotate 8.9s infinite linear;
            transform-origin: 319px 9px;
            box-shadow: 1px 0px 5px 2px rgb(118, 119, 44);
        }

        .uranusOrbit {
            width: 720px;
            height: 720px;
            border: 1px dotted #fff;
            top: calc(50% - 360px);
            left: calc(50% - 360px);
        }
        .uranus{
            width: 26px;
            height: 26px;
            background: rgb(44, 110, 119);
            top: calc(50% - 13px);
            left: calc(50% - 373px);
            animation: rotate 12s infinite linear;
            transform-origin: 373px 13px;
            box-shadow: 1px 0px 5px 2px rgb(44, 110, 119);
        }

        .neptuneOrbit{
            width: 800px;
            height: 800px;
            border: 1px dotted #fff;
            top: calc(50% - 400px);
            left: calc(50% - 400px);
        }
        .neptune{
            width: 22px;
            height: 22px;
            background: rgb(194, 190, 235);
            top: calc(50% - 11px);
            left: calc(50% - 411px);
            animation: rotate 16s infinite linear;
            transform-origin: 411px 11px;
            box-shadow:1px 0px 5px 2px rgb(194, 190, 235) ;
        }
    </style>
</head>

<body>
    <div class="solarsys">
        <!--太阳-->
        <div class='sun'></div>

        <!--水星轨道-->
        <div class='mercuryOrbit'></div>

        <!--水星-->
        <div class='mercury'></div>

        <!--金星轨道-->
        <div class='venusOrbit'></div>

        <!--金星-->
        <div class='venus'></div>

        <!--地球轨道-->
        <div class='earthOrbit'></div>

        <!--地球-->
        <div class='earth'></div>

        <!--火星轨道-->
        <div class='marsOrbit'></div>

        <!--火星-->
        <div class='mars'></div>

        <!--木星轨道-->
        <div class='jupiterOrbit'></div>

        <!--木星-->
        <div class='jupiter'></div>

        <!--土星轨道-->
        <div class='saturnOrbit'></div>

        <!--土星-->
        <div class='saturn'></div>

        <!--天王星轨道-->
        <div class='uranusOrbit'></div>

        <!--天王星-->
        <div class='uranus'></div>

        <!--海王星轨道-->
        <div class='neptuneOrbit'></div>

        <!--海王星-->
        <div class='neptune'></div>
    </div>
</body>

</html>

transform-orign: x y; 作用定义元素绕什么旋转
绕圆心旋转
x 表示轨道半径 + 球体半径
y 表示球体半径：
绕轴旋转
left right center x周转
top bottom center y 轴转
length z 轴

以下放效果图
在这里插入图片描述

辰月初九
关注
专栏目录
行星介绍html页面布局,css3 html5实现太阳系行星公转动画实例
weixin_39790760的博客
06-03 845
本文我们分享用css3的animation画一个太阳系恒星公转的动画，如何实现画椭圆的运行轨迹，最后结合css3的clip-path做一些比较特别的动画。模拟太阳系行情公转动画最终的效果图如下：css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧设定的内容做过渡动画。animation一般结合transfor...
八大行星网页制作
05-27
关于八大行星的网页制作，包括html详细代码及css样式，比如说锚点的插入，div标签，和类选择器等的综合使用。
【CSS3】模拟太阳系八大行星运行轨迹
iuukai
07-30 1998
Tips Safari 浏览器需设置 -webkit- 前缀，Chrome 倒是都可以； -webkit- 的渐变角度进行需要换算： 90 - 原角度 = 需设角度：background-image: linear-gradient(135deg, red, yellow);background-image: -webkit-linear-gradient(-45deg, red, yellow); -webkit- 径向渐变属性为百分号，"shape size at position 不适用：backg
HTML5 canvas太阳系八大行星运行轨道图.zip
07-04
HTML5 canvas太阳系八大行星运行轨道图，鼠标经过目标行星显示行星名称。
仿soul 3d 星球
sunlight_01的博客
04-25 1200
<template> <div class="tagBall"> <a class="tag" target="_blank" rel="external nofollow" :style="getStyle(item)" v-for="(item, index) in nameList" :key="index" >{{item.wordName}}</a> </div> </template> <...
html+css3太阳系行星运转动画效果的实现代码
09-28
这个动画模拟了太阳系八大行星围绕太阳公转的场景，但不包括行星的卫星以及行星的自转动画。整个动画的实现主要分为两个部分：HTML结构的设计和CSS样式的编写。 首先，从HTML结构上来说，整个太阳系被包含在一个...
八大行星运行图，介绍，网页源代码
12-08
标题中的“八大行星运行图，介绍，网页源代码”揭示了我们要探讨的主题——一个关于太阳系八大行星运动的可视化展示，以及与之相关的网页源代码。这个项目可能是一个互动的、教育性的网页，旨在帮助用户理解和学习...
卡通星球行星CSS3图形特效
07-24
在"卡通星球行星CSS3图形特效"中，开发者可能使用了这些技术的组合，通过精心设计的CSS代码创造出八大行星的图形，甚至包括银河系的其他天体。每个行星可能有不同的颜色、纹理和动画效果，以体现其独特的天文特征。 ...
用CSS3 做的星体
lumot的博客
09-12 183
制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。 <!DOCTYPE html> <html> <head lang="en"> <...
css3地球行星导航动画特效特效代码
03-20
css3地球行星导航动画特效是一款css3绘制圆形的地球和行星运动旋转动画特效。
八大行星图标
05-19
八大行星图标
CSS3SVG绘制的悉尼歌剧院
11-07
CSS3 SVG绘制的悉尼歌剧院
【CSS】模拟太阳系行星的公转
漫磋嗟
09-21 2857
上一篇【中秋】纯CSS实现日地月的公转挖下了一个坑——模拟太阳系行星绕太阳的公转，今天我来填坑了。
CSS 绘制太阳系行星运行轨迹
屁桃恒的博客
11-19 710
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 动画</title> <style> div.ex1{ width: 100px; ...
月亮围着地球转动CSSjs特效
ICode联盟
07-07 138
下载地址CSS3属性实现的月亮围着地球转动特效dd:
css3边框交替动画_动画模拟太阳系行星公转详细分解实现过程附源码
weixin_35106463的博客
12-31 308
点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！先来看下效果这里面还可以加其它行星的运动轨迹，这里用地球运转的轨迹做实例来讲解一下实现过程。代码量很少。可以自己在扩展。一. 从DOM结构开始如下这个DOM结构所示，开始分解实现思路。1. 在轨道的最外层有一个白色的边框，背景是黑色，这个样式可以写在div.planet上，最外层。2. 将div.sun元素用一个太阳小图当背景，...
css3动画特效
weixin_34290096的博客
11-22 244
为什么80%的码农都做不了架构师？>>> ...
Html+css编写太阳星系
aoyi7834的博客
09-07 1531
我们都知道太阳系是以太阳为中心的，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星），而我用html和css所写的就是八大行星和太阳组成的星系，比较简易，代码如下： <!doctype html> <html> <head> <meta charset="u...
使用CSS3实现Google涂鸦动画教程
"本文将指导读者使用HTML5和CSS3技术来实现Google涂鸦风格的动画效果，特别关注CSS3的动画属性。虽然IE浏览器不完全支持CSS3动画，但仍然鼓励开发者学习并运用CSS3。文章通过示例代码详细解释了如何构建一个简单的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值