使用纯css完成行星图并且封装成组件

在这里插入代码片
<template><div class="box"><div class="circle-wrapper"><div class="circle-1"><div class="ball1"></div><div class="circle-2"><div class="ball2">www</div><div class="circle-3"><div class="ball3"></div><div class="circle-4"><div class="ball4"></div><div class="circle-5"><div class="circle-6"><div class="center_ball">center</div></div></div></div></div></div></div></div></div>
</template>
<style scoped>
.center_ball {width: 50%;height: 50%;background: yellow;border-radius: 50%;/* transform: rotatex(-90deg); */animation: ballrotate 20s linear 0s normal none infinite;
}
.box {position: absolute;width: 100%;height: 100%;background: black;
}
.circle-wrapper {position: absolute;left: 50%;/* transform: translatex(-50%); */border-radius: 50%;border: 1px solid #59b9f3;width: 5rem;height: 5rem;box-shadow: 0px 0px 30px 10px #59b9f3;transform: translatex(-50%) rotateX(60deg);transform-style: preserve-3d;animation: orbitrotates 20s linear 0s normal none infinite;
}
.circle-1,
.circle-2,
.circle-3,
.circle-4,
.circle-5,
.circle-6 {width: 80%;height: 80%;border: 2px solid #59b9f3;border-radius: 50%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;transform-style: preserve-3d;/* animation: fade 4s infinite; */box-shadow: 0px 0px 30px 10px #59b9f3;
}
.ball1,
.ball2,
.ball3,
.ball4 {width: 0.3rem;height: 0.3rem;background: #08d084;border-radius: 50%;transform: rotateX(0deg);animation: ballrotate 20s linear 0s normal none infinite;
}.ball2,
.ball4 {float: right;
}
@keyframes orbitrotates {0% {transform: translatex(-50%) rotateX(60deg) rotateZ(0deg);}100% {transform: translatex(-50%) rotateX(60deg) rotateZ(-360deg);}
}
@keyframes ballrotate {0% {transform: rotateX(-90deg) rotateY(0deg);}100% {transform: rotateX(-90deg) rotateY(-360deg);}
}
@keyframes up-hide {100% {/* top: -100%; *//* margin-top: -20%; *//* transform: rotateX(120deg); */transform: translateZ(100px) scale(0.8);}
}.circle-5,
.circle-6 {display: flex;align-items: center;justify-content: center;animation: up-hide 3.5s infinite;
}@keyframes fade {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}
}
</style>

使用纯css完成行星图并且封装成组件相关推荐

纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
php把数组函数封装,PHP删除Array数组里指定的key（完整版，已封装成函数，附测试代码）...
问题背景:array里一般是key---value的存储方式,我们有时候需要删除指定的key及对应的value.但是不知道为啥,那么多帖子都是在讲知道value,并删除该value的事情,差点误导我. ...
vue实现纯css直播点赞图标的动画效果组件
一.效果图直播点赞动画二.完整代码如下  <template> <ul class="g-wrap">< ...
微信小程序如何自定义一个可输入筛选的下拉弹出框，也封装成组件。
在开发过程中,经常会遇到下拉框,有些时候内容过多,找起来也不方便,给他增加一个输入框,相当于用户输入某些信息,然后再下拉,符合输入内容的数据将会被展示出来,大大方便了用户操作体验. 话不多说,让我们开 ...
小程序自定义导航封装成组件后如何监听滚动距离
我获取滚动的距离,主要是想做自定义导航吸顶效果之后对样式进行改变的效果思路:根据滚动距离的临界值,改变isActive的值第一步:曲线救国的方式,因为onPageScroll方法在组件中不生效(目 ...
vue商城项目开发：封装banner组件、组件参数传递
封装banner组件在Home组件中引入: components: 在template中使用: 组件参数传递轮播图可以封装成组件,但是每个页面要展示的图片内容可能不一样,所以要进行参数传递,你传什 ...
React封装一个纯CSS实现的水滴样式的盒子
背景刷B站刷到一个纯css实现的水滴效果的视频感觉真不错,决定封装一个具有水滴效果的盒子(DIV) 涉及知识点 CSS样式,核心是这个和box-shadow阴影,实现水滴boder和阴影效果. J ...
纯CSS菜单样式，及其Shadow DOM，Json接口实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识先放一张效果图 Part 1:纯CSS菜单样式先放样式代码 1 <sty ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...

使用纯css完成行星图并且封装成组件

使用纯css完成行星图并且封装成组件相关推荐

最新文章

热门文章