陈表达学html-动态星球-新手练习案例

Excel_VBA创维大表格จุ๊บ

于 2022-12-12 09:16:52 发布

阅读量77

点赞数

分类专栏： HTML+css+js+vue 网页网站设计文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44681501/article/details/128281906

版权

HTML+css+js+vue 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

网页网站设计

3 篇文章 0 订阅

订阅专栏

直接复制使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    /*补全代码*/
    *{margin: 0;padding: 0px}
    body{position: relative;background-color: #2f366e}
    div{height:100px;width:100px;border-radius:50px;border:1px solid black;top: 200px;left: 50%;position: absolute;}
    .星球{background: linear-gradient(45deg,black,red);
        box-shadow:0px 0px 162px 62px fuchsia;}
    .倒影1{transform: skewX(45deg);border: 2px solid brown;
        box-shadow: inset 5px 1px 1px 2px,
                    0px 0px 162px 62px gold;
        animation: zd1 53s linear infinite;
        transition: 1s;
    }
    .倒影2{transform: skewX(45deg);border: 2px solid brown;
        box-shadow: inset 5px 1px 1px 2px,
        0px 0px 162px 62px gold;
        animation: zd2 53s linear infinite;
        transition: 1s;
    }


    @keyframes zd1 {
        to{transform: skewX(1turn)}
    }
    @keyframes zd2 {
        to{transform: skewY(1turn)}
    }
</style>
<body>

    <div class="星球"></div>
    <div class="倒影1"></div>
    <div class="倒影2"></div>
</body>
</html>