CSS 绘制太阳系行星运行轨迹

最新推荐文章于 2022-09-17 02:34:19 发布

屁桃恒

最新推荐文章于 2022-09-17 02:34:19 发布

阅读量710

点赞数

分类专栏： css3动画

本文链接：https://blog.csdn.net/weixin_45733398/article/details/103142866

版权

本文详细介绍了如何利用CSS的特性，结合HTML结构，创建一个动态展示太阳系行星运动轨迹的效果。通过设置动画和变换属性，使得行星沿着各自的椭圆轨道缓缓旋转，呈现宇宙的壮丽景象。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 动画</title>
    <style>
        div.ex1{
   
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst 5s;
            -webkit-transition: myfirst 5s;
        }

        @keyframes myfirst {
   
            from{
   background: red}
            to{
   background: yellow}

        }

        @-webkit-keyframes myfirst {
   
            from{
   background: red}
            to{
   background: yellow}
        }


        div.ex2{
   
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst2 5s;
            -webkit-transition: myfirst2 5s;
            -moz-animation: myfirst2 5s;
            -o-animation: myfirst2 5s;
        }

        @keyframes myfirst2 {
   
            0%{
   background: red;}
            25%{
   background: yellow;}
            50%{
   background: blue;}
            100%{
   background: green;}
        }

        @-webkit-keyframes myfirst2 {
   
            0%{
   background: red;}
            25%{
   background: yellow;}
            50%{
   background: blue;}
            100%{
   background: green;}
        }

        @-moz-keyframes myfirst2 {
   
            0%{
   background: red;}
            25%{
   background: yellow;}
            50%{
   background: blue;}
            100%{
   background: green;}
        }

        @-o-keyframes myfirst2 {
   
            0%{
   background: red;}
            25%{
   background: yellow;}
            50%{
   background: blue;}
            100%{
   background: green;}
        }

        div.ex3{
   
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst3 5s;
            -webkit-animation: myfirst3 5s;
        }


        @keyframes myfirst3 {
   
            0%{
   background: red; left: 0px;
                top: 0px;}
            25%{
   background: yellow; left: 200px;
                top: 0px;}
            50%{
   background: blue; left: 200px;
                top: 200px;}
            75%{
   background: green; left: 0px;
                top: 200px;}
            100%{
   background: red; left: 0px;
                top: 0px;}
        }

        @-webkit-keyframes myfirst3 {
   
            0%{
   background: red; left: 0px;
                top: 0px;}
            25%{
   background: yellow; left: 200px;
                top: 0px;}
            50%{
   background: blue; left: 200px;
                top: 200px;}
            75%{
   background: green; left: 0px;
                top: 200px;}
            100%{
   background: red; left: 0px;
                top: 0px;}
        }


        div.ex4{
   
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation-name: myfirst4;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;

最低0.47元/天解锁文章

屁桃恒

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS 绘制太阳系行星运行轨迹

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 动画</title> <style> div.ex1{ width: 100px; ...
复制链接

扫一扫

专栏目录