CSS太阳地球月亮转圈圈loading

最新推荐文章于 2023-05-30 18:43:39 发布

北巷`

最新推荐文章于 2023-05-30 18:43:39 发布

阅读量376

点赞数

分类专栏： css 文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_44717486/article/details/113794648

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一个css例子

css太阳月亮地球转转转

知识点总结：

justify-content: center;
justify-content 用于设置或检索弹性盒子元
素在主轴（横轴）方向上的对齐方式。
box-shadow: offset-x offset-y blur spread color position;
offset-x用于声明阴影的水平偏移，offset-y用于声明阴影的垂直偏移。
blur表示阴影的模糊半径。效果与设计软件中使用的高斯模糊滤镜一样。值为0意味着阴影完全不模糊。blur值越大，边角越不锋利，阴影越朦胧。不允许负值，负值等同于0。
spread表示阴影的大小，当值为正数，阴影会向四周扩展。若值为负数，阴影会收缩。
color表示阴影的颜色。
position表示阴影的位置
- animation: roll 36.5s linear infinite;
linear:表示动画从头到尾的速度都是相同的。
infinite：设置动画无线循环播放。
}
- transform: scale(1.2);
scale缩放

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="demodatsem.css">
    <title>Document</title>
</head>
<body>
    <div class="sun">
        <div class="earth">
            <div class="moon">
            </div>
        </div>
    </div>
    <p>hello my boy</p>
</body>
</html>

css部分

*{
    margin:0;
    padding: 0;
}
body{
    background: black;
    height: 100vh;
    color: white;
    display: flex;/*将对象作为弹性伸缩盒显示*/
    justify-content: center;
    /*justify-content 用于设置或检索弹性盒子元
    素在主轴（横轴）方向上的对齐方式。*/
    align-items: center;
    --s:rgba(243,156,18,0.8);
    --e:rgba(26,188,156,0.8);
    --m:rgba(41,128,185,0.8);
}
.sun{
    position: absolute;
    background: var(--s);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--s),
    0 0 20px var(--s),
    0 0 40px var(--s),
    0 0 80px var(--s);
    /*box-shadow: offset-x offset-y blur spread color position;
    offset-x用于声明阴影的水平偏移，
　　offset-y用于声明阴影的垂直偏移，
　blur表示阴影的模糊半径。
效果与设计软件中使用的高斯模糊滤镜一样。值为0意味着阴影完全不模糊。blur值越大，
边角越不锋利，阴影越朦胧。不允许负值，负值等同于0。
spread表示阴影的大小。
当值为正数，阴影会向四周扩展。若值为负数，阴影会收缩，
color表示阴影的颜色。
position表示阴影的位置*/
    animation: roll 36.5s linear infinite;
    /*linear:表示动画从头到尾的速度都是相同的。
    infinite：设置动画无线循环播放。*/
}
@keyframes roll{
    100%{
        transform: rotateZ(360deg);
    }
}
.sun::after{
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    border:1px  solid white;
    /*1px的solid实线 白色边框*/
    border-radius: 50%;
    z-index: -1;
}
.earth{
   position: absolute;
   background: var(--e);
   width: 20px;
   height: 20px;
   left: 200px;
   border-radius: 50%;
   box-shadow: 0 0 10px var(--e),
   0 0 20px var(--e),
   0 0 30px var(--e),
   0 0 40px var(--e);
   animation: roll 3s linear infinite;
}
.earth::after{
    content: "";
    position: absolute;
    width: 84px;
    height: 80px;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    border:1px solid gray;
    border-radius: 50%;

}
.moon{
    position: absolute;
    background: var(--m);
    width: 10px;
    height: 8px;
    left: 50px;
    border-radius: 50%;
    box-shadow: 0 0 5px var(--m),
    0 0 10px var(--m),
    0 0 20px var(--m);
 }
 p{
     font-family: Arial, Helvetica, sans-serif;
     text-transform: uppercase;
     /*大写*/
     font-size: 30px;
     font-weight: bold;
     transition: 0.8s linear;
     /*匀速变换*/
     z-index: 99;

 }
p:hover{
transform: scale(1.2);
/*scale缩放*/
opacity: 0.4;
/*透明度*/
}

来源于B站的一个教学，+自己总结

北巷`

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS太阳地球月亮转圈圈loading

一个css例子 css太阳月亮地球转转转知识点总结：justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。box-shadow: offset-x offset-y blur spread color position;offset-x用于声明阴影的水平偏移，offset-y用于声明阴影
复制链接

扫一扫