底盘旋转
对于之前在CSS实现科技感旋转底盘
一文中看见的效果十分心动,但由于没有合适的图片素材,后面自己用纯css写了一下
//div部分
<div style="z-index: 999!important;background-color: #ffffff00;height: 540px;width:540px;left:100px;position: absolute">
<div class="ball"></div>
<div class="round"></div>
<div class="roundBig"> </div>
<div class="roundSmall" ></div>
</div>
//样式
//样式球
.ball{
position: absolute;
left: 50px;
height:50px;
width:50px;
z-index: 6;
background-image:linear-gradient(180deg, rgba(6,4,47,1) 0%, rgba(21,21,91,1) 20%, rgba(85,85,203,1) 64%, rgba(239,246,179,1) 100%);
border-radius:50%;//利用圆角,将div变成圆形
animation: cir 2s linear infinite alternate;
//动画:动画名(cir) 持续时间(2s) 动画方式(linear)动画迭代次数(infinite无限次)动画方向(alternate交替播放
}
//圆环样式
.round {
position: absolute;
left: 25px;
top:100px;
width: 100px;
height: 100px;
display: inline-block;
animation: move 2s infinite linear;
border-radius: 50%;
z-index: 1;
transform-style: preserve-3d;
//遮罩,有颜色部分显示原来内容,透明不显示
-webkit-mask:radial-gradient(circle at center center, #0000 35px, red 0);
background: conic-gradient(#0000 0% 5%,#B9C1F8 5% 25%,#0000 26% 30%,#5979EF 31%,#B9C1F8 100%);
}
.roundBig {
position: absolute;
top:100px;
left: 0;
width: 150px;
height: 150px;
display: inline-block;
animation: move 3s infinite linear;
z-index: 2;
border-radius: 50%;
-webkit-mask:radial-gradient(circle at center center, #0000 70px, red 0);
background: conic-gradient(#B9C1F8 0%,#0000 26% 30%,#5979EF 31%,#0000 46% 51%,#B9C1F8 100%);
}
.roundSmall {
position: absolute;
top:100px;
left: 10px;
width: 110px;
height: 110px;
display: inline-block;
animation: move 5s infinite linear;
border:10px dashed #B9C1F8;
border-radius: 50%;
z-index: 1;
}
@keyframes move {
from {
transform: rotateX(75deg) rotateZ(0);
}
to {
transform: rotateX(75deg) rotateZ(360deg);
}
}
@keyframes cir{
from{margin-top:0px}
to{margin-top:105px}
}
星空闪烁
vue组件中,页面具体引入和背景颜色什么的就不贴了,星星图片可以自己百度一张,也可以在css的背景里面直接设置成圆角底色
<template>
<div id="star1" ref="star1">
<div class="startInti" v-for="(item, index) in 200" :key="index" ref="startInti"></div>
</div>
</template>
<script>
export default {
name: "StarBackground2",
mounted() {
this.initstart()
},
data(){
return {
b:false
}
},
methods:{
initstart(){
let star = this.$refs.startInti
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;
star.forEach(item=>{
var x = parseInt(Math.random() * screenW);
var y = parseInt(Math.random() * screenH);
item.style.left=x+'px'
item.style.top=y+'px'
// 随机缩放
var scale = Math.random() * 1.5;
item.style.transform = 'scale(' + scale +')';
// 闪烁推迟
var rate = Math.random() * 1.5;
item.style.animationDelay = rate + 's';
})
}
}
}
</script>
<style lang="scss" scoped>
#star1{
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
.startInti{
display: block;
width: 10px;
height: 10px;
position: absolute;
//border: 5px saddlebrown solid ;
background: url(../assets/start.png) center center / 10px 10px !important;
//background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
animation: flash 1s alternate infinite;
}
.startInti:hover{
transform: scale(2) rotate(180deg) !important;
transition: all 1s;
}
}
@keyframes flash{
0%{ opacity: 0; scale: 0.5;}
100%{ opacity: 1; scale: 1;}
}
</style>
效果图(这里把两个放到了一个页面):
效果图