微信小程序优美界面之纯CSS星球

效果图

项目开源地址

帮忙点个星星哦

wxml

<view class="container "><!-- stars --><view class="star star-1"></view><view class="star star-2"></view><view class="star star-3"></view><!-- clouds --><view class="cloud-group-1"><view class="cloud cloud-1"></view><view class="cloud cloud-2"></view><view class="cloud cloud-3"></view><view class="cloud cloud-4"></view><view class="cloud cloud-5"></view><view class="cloud cloud-6"></view></view><view class="cloud-group-2"><view class="cloud cloud-1"></view><view class="cloud cloud-2"></view><view class="cloud cloud-3"></view><view class="cloud cloud-4"></view><view class="cloud cloud-5"></view><view class="cloud cloud-6"></view></view><view class="cloud-group-3"><view class="cloud cloud-1"></view><view class="cloud cloud-2"></view><view class="cloud cloud-3"></view><view class="cloud cloud-4"></view><view class="cloud cloud-5"></view><view class="cloud cloud-6"></view></view><!-- orbits --><view class="orbit orbit-1"></view><view class="orbit orbit-2"></view><view class="orbit orbit-3"></view><view class="orbit orbit-4"></view><view class="orbit orbit-5"></view><view class="orbit orbit-6"></view><!-- main planet --><view class="ring-before"></view><view class="ring-bigger-before"></view><view class="planet"></view><view class="ring-after"></view><view class="ring-bigger-after"></view><!-- sub planet --><view class="sub-planet"></view>
</view>

CSS

.container {position: relative;width: 300px;height: 300px;margin: 100px auto;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: daylight 15s ease infinite;border-radius: 50%;border: 15rpx solid white;overflow: hidden;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), inset 0 0 0 15px rgba(0, 0, 0, 0.05), inset 0 0 0 30px rgba(0, 0, 0, 0.05), inset 0 0 0 45px rgba(0, 0, 0, 0.05), inset 0 0 0 60px rgba(0, 0, 0, 0.05), inset 0 0 0 75px rgba(0, 0, 0, 0.05), inset 0 0 0 90px rgba(0, 0, 0, 0.05);
}.planet {position: absolute;top: 50%;left: 50%;z-index: 2;width: 120px;height: 120px;background: linear-gradient(to bottom, #fecf4e 1%, #a62a44 50%, #310441 100%);border-radius: 50%;transform: rotate(-15deg) translate(-35%, -55%);
}@supports not (clip-path: inset(50% 0 0 0)) {.ring-before,.ring-after,.ring-bigger-before,.ring-bigger-after {display: none;}
}.ring-before,
.ring-after,
.ring-bigger-before,
.ring-bigger-after {content: "";width: 126px;height: 42px;border-radius: 50%;border: 3px solid rgba(248, 197, 77, 0.8);position: absolute;top: 125px;left: 84px;transform: skew(-54deg);
}.ring-bigger-before,
.ring-bigger-after {transform: skew(-54deg) scale(1.3);border-color: #d3bc68;
}.ring-before,
.ring-bigger-before {z-index: 3;clip-path: inset(50% 0 0 0);
}.ring-after,
.ring-bigger-after {z-index: 1;clip-path: inset(0 0 50% 0);
}.sub-planet {position: absolute;top: 24%;left: 75%;z-index: 4;width: 35px;height: 35px;background: linear-gradient(to bottom, #70a27d 1%, #4552a1 50%, #371a6a 100%);border-radius: 50%;transform: rotate(-15deg);
}.orbit {width: 2px;height: 2px;background: white;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9;
}.orbit-1 {animation: orbit-1 5s linear infinite;
}@keyframes orbit-1 {from {transform: rotate(0deg) translateX(65px) rotate(0deg);}to {transform: rotate(360deg) translateX(65px) rotate(-360deg);}
}.orbit-2 {animation: orbit-2 10s linear infinite;
}@keyframes orbit-2 {from {transform: rotate(0deg) translateX(80px) rotate(0deg);}to {transform: rotate(360deg) translateX(80px) rotate(-360deg);}
}.orbit-3 {animation: orbit-3 15s linear infinite;
}@keyframes orbit-3 {from {transform: rotate(0deg) translateX(95px) rotate(0deg);}to {transform: rotate(360deg) translateX(95px) rotate(-360deg);}
}.orbit-4 {animation: orbit-4 20s linear infinite;
}@keyframes orbit-4 {from {transform: rotate(0deg) translateX(110px) rotate(0deg);}to {transform: rotate(360deg) translateX(110px) rotate(-360deg);}
}.orbit-5 {animation: orbit-5 25s linear infinite;
}@keyframes orbit-5 {from {transform: rotate(0deg) translateX(125px) rotate(0deg);}to {transform: rotate(360deg) translateX(125px) rotate(-360deg);}
}.orbit-6 {animation: orbit-6 30s linear infinite;
}@keyframes orbit-6 {from {transform: rotate(0deg) translateX(140px) rotate(0deg);}to {transform: rotate(360deg) translateX(140px) rotate(-360deg);}
}.cloud {background: #f1f1f1;width: 100px;height: 30px;position: absolute;border-radius: 50%;bottom: -5px;box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}.cloud:before, .cloud:after {content: "";background: #f1f1f1;border-radius: 50%;position: absolute;
}.cloud:before {width: 50px;height: 50px;bottom: 2px;left: 5px;
}.cloud:after {width: 40px;height: 40px;bottom: 2px;right: 15px;
}.cloud-group-1,
.cloud-group-2,
.cloud-group-3 {position: absolute;bottom: 0;width: 211px;height: 100px;opacity: .2;
}.cloud-group-1 {bottom: -5px;
}.cloud-group-2 {transform: scale(2);bottom: 20px;left: -50px;
}.cloud-group-3 {transform: scale(3);bottom: 100px;left: -24px;
}.cloud-2 {left: 10px;
}.cloud-3 {right: 10px;
}.cloud-4 {right: 184px;bottom: 0;
}.cloud-5 {right: 24px;bottom: 12px;
}.cloud-6 {right: -45px;bottom: 9;
}.star {position: absolute;left: 0;top: 50px;width: 1px;height: 1px;background-color: white;animation: shooting 5s linear infinite;
}.star:before {content: "";position: absolute;width: 100px;height: 1px;right: 1px;top: 0;background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 100%);
}.star-2 {top: 100px;animation: shooting 8s 1s linear infinite;
}.star-3 {top: 250px;animation: shooting 3s 2s linear infinite;
}@keyframes daylight {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}@keyframes shooting {from {left: -100px;}to {left: calc(100% + 100px);}
}

微信小程序优美界面之纯CSS星球相关推荐

微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
微信小程序为什么不用HTML5、CSS，自己搞了个WXML、WXSS，很多框架用不了，好处一点不知道？
转 https://www.zhihu.com/question/51809406 微信小程序为什么不用HTML5.CSS,自己搞了个WXML.WXSS,很多框架用不了,好处一点不知道,以前项目根本没 ...
iphone微信小程序底部预留bar安全距离css
项目场景: 提示:这里简述项目相关背景: iphone微信小程序底部预留bar安全距离css 问题描述提示:这里描述项目中遇到的问题: iphone微信小程序底部预留bar安全距离css @Over ...
微信小程序实现背景色渐变（css实现）
参考链接: (1)微信小程序用CSS(.wxss)设置背景颜色渐变的方法 https://blog.csdn.net/qq15577969/article/details/102662424 (1)核 ...
软件测试面试题微信小程序-IT界的驾考宝典
软件测试面试题库微信小程序,IT界的驾考宝典.运行上线了. 从软件测试基础理论到自动化测试,接口测试,性能测试,功能测试,互联网大厂面试真题,HR面试小技巧,应有尽有上线运行一个月刷题人数已经达十五 ...
微信小程序js如何动态设置css
微信小程序中可以使用setData()方法动态设置CSS样式. 例如,我们可以在wxml文件中定义一个样式类: ``` <view class="my-class">H ...
微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...
animation 属性微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 定义和用法 animat ...
【微信小程序】——wxss引用外部CSS文件及iconfont
小程序引入外部文件的方式是:@import "*/*.wxss"; 因为业务需要,正在开发的小程序中需要使用iconfont,很容易想到了H5的引入方式: ```` @font-f ...
微信小程序拼团头像叠加css 【亲测有效】
其实就是在图片上加一个动态css样式, 普通的中间没有 - 的直接写法是 :style="{{background:red}}" 如果是transform:translateX( ...

微信小程序优美界面之纯CSS星球

效果图

项目开源地址

wxml

CSS

微信小程序优美界面之纯CSS星球相关推荐

最新文章

热门文章