vue纯代码实现炫酷星空背景加动态内容

编程入门行业动态更新时间:2024-10-10 21:29:06

vue纯代码实现炫酷<a href=https://www.elefans.com/category/jswz/34/1755989.html style= 星空背景加动态内容"/>

vue纯代码实现炫酷星空背景加动态内容

1.创建ball.vue文件

<template><div class="container"><section class="stage stage-1"><figure class="ball bubble">内容</figure><div class="name">副标题副标题</div></section><section class="stage stage-2"><figure class="ball bubble">内容</figure><div class="name">副标题副标题</div></section><section class="stage stage-3"><figure class="ball bubble">内容</figure><div class="name">副标题副标题</div></section></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
.container{display: flex;justify-content: center;height: 250px;width: 100%;
}
.ball {display: inline-block;width: 100%;height: 100%;border-radius: 100%;position: relative;opacity: .8;background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); transform: translate(-50%,-50%);font-size: 36px;font-weight: bold;color: #f23340;display: flex;align-items: center;justify-content: center;
}.ball:before {content: "";position: absolute;top: 1%;left: 5%;width: 90%;height: 90%;border-radius: 100%;background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);-webkit-filter: blur(5px);filter: blur(5px);z-index: 2; }.ball:after {content: "";position: absolute;display: none;top: 5%;left: 10%;width: 80%;height: 80%;border-radius: 100%;-webkit-filter: blur(1px);filter: blur(1px);z-index: 2;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg); }.ball .shadow {position: absolute;width: 100%;height: 100%;background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);-webkit-transform: rotateX(90deg) translateZ(-160px);transform: rotateX(90deg) translateZ(-160px);z-index: 1; }.ball.plain {background: black; }.ball.plain:before, .ball.plain:after {display: none; }.ball.bubble {background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));-webkit-animation: bubble-anim 2s ease-out infinite;animation: bubble-anim 2s ease-out infinite; }.ball.bubble:before {-webkit-filter: blur(0);filter: blur(0);height: 80%;width: 40%;background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);-webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); }.ball.bubble:after {display: block;background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%); }.stage {width: 150px;height: 150px;display: inline-block;-webkit-perspective: 1200px;-moz-perspective: 1200px;-ms-perspective: 1200px;-o-perspective: 1200px;perspective: 1200px;-webkit-perspective-origin: 50% 50%;-moz-perspective-origin: 50% 50%;-ms-perspective-origin: 50% 50%;-o-perspective-origin: 50% 50%;perspective-origin: 50% 50%;.name{color: rgba($color: #fff, $alpha: .8);font-size: 16px;text-align: center;width: 100%;margin-left: 40px;}}.stage-2{margin: 0 60px;}.stage-3{margin-right: 80px;}body {width: 300px;margin: 20px auto;background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);background-repeat: no-repeat;}@-webkit-keyframes bubble-anim {0% {-webkit-transform: scale(1);transform: scale(1); }20% {-webkit-transform: scaleY(0.95) scaleX(1.05);transform: scaleY(0.95) scaleX(1.05); }48% {-webkit-transform: scaleY(1.1) scaleX(0.9);transform: scaleY(1.1) scaleX(0.9); }68% {-webkit-transform: scaleY(0.98) scaleX(1.02);transform: scaleY(0.98) scaleX(1.02); }80% {-webkit-transform: scaleY(1.02) scaleX(0.98);transform: scaleY(1.02) scaleX(0.98); }97%, 100% {-webkit-transform: scale(1);transform: scale(1); } }@keyframes bubble-anim {0% {-webkit-transform: scale(1);transform: scale(1); }20% {-webkit-transform: scaleY(0.95) scaleX(1.05);transform: scaleY(0.95) scaleX(1.05); }48% {-webkit-transform: scaleY(1.1) scaleX(0.9);transform: scaleY(1.1) scaleX(0.9); }68% {-webkit-transform: scaleY(0.98) scaleX(1.02);transform: scaleY(0.98) scaleX(1.02); }80% {-webkit-transform: scaleY(1.02) scaleX(0.98);transform: scaleY(1.02) scaleX(0.98); }97%, 100% {-webkit-transform: scale(1);transform: scale(1); } }
</style>

2.创建stars.vue文件

<template><div><div class="main"><div class="stars"><div class="star" v-for="(item,index) in starsCount" :key="index" ref="star"></div></div><div class="main-title">标题标题标题</div><div class="ad-info">介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容<br>介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍内容</div><ball></ball></div></div>
</template><script>
import ball from './ball.vue'export default {components:{ball},data() {return {starsCount:800,//数量distance:600,//间距}},mounted() {let starArr=this.$refs.starstarArr.forEach(item=>{var speed = 0.2+(Math.random()*1)var distance = this.distance+(Math.random()*300)item.style.transformOrigin=`0 0 ${distance}px`item.style.transform=`translate3d(0,0,-${distance}px) rotateY(${(Math.random()*360)}deg) rotateX(${(Math.random()*-50)}deg) scale(${speed},${speed})`})},
}
</script><style lang="scss" scoped>
.main{width: 100%;min-width: 1200px;height: 528px;background-color: #fff;background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);overflow: hidden;filter: drop-shadow(0 0 10px white);position: relative;.main-title{position: absolute;left: 50%;top: 70px;transform: translateX(-50%);font-size:30px;color:rgba(255,255,255,1);&::after{content: '';position: absolute;left: 50%;transform: translateX(-50%);bottom: -28px;width:28px;height:4px;background:rgba(244,54,63,1);border-radius:2px;}}.stars{transform: perspective(500px);transform-style: preserve-3d;position: absolute;perspective-origin: 50% 100%;left: 50%;animation: rotate 90s infinite linear;bottom: -256px;.star{width: 2px;height: 2px;background: #f7f7b8;position: absolute;top: 0;left: 0;backface-visibility: hidden;}@keyframes rotate {0%{transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);}100%{transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);}}}.ad-info{font-size: 15px;line-height: 24px;margin-top: 180px;color: rgba($color: #fff, $alpha: .8);text-align: center;}.dot-num{// position: relative;// height: 200px;// width: 100%;.dot{position: absolute;top: 0;display: inline-block;.dot-title {font-size: 40px;line-height: 37px;font-weight: bold;color: #f23340;}.dot-describe {margin-top: 10px;line-height: 20px;color: rgba($color: #fff, $alpha: .8);font-size: 14px;}}}
}
</style>