GitHub address, you can star it if you like it Plugin preview Using the tutorial code display Vue page usage <template> <view class="space"> <view class="planet"> <view class="planet_shadow"></view> <view class="crater1"></view> <view class="crater2"></view> <view class="crater3"></view> <view class="crater4"></view> </view> <view class="stars"> <view class="star"></view> <view class="star pink"></view> <view class="star blue"></view> <view class="star yellow"></view> </view> </view> </template> Style <style lang="scss"> .space { width: 100%; height: 100vh; background: #121212; } .planet { width: 150px; height: 150px; border-radius: 50%; background: #333; position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -75px; overflow: hidden; z-index: 2; } .planet_shadow { position: absolute; border-radius: 50%; height: 100%; width: 100%; top: -40%; right: -10%; border: 35px solid rgba(0, 0, 0, .15); } .crater1, .crater2, .crater3, .crater4 { position: absolute; border-radius: 50%; background: rgba(0, 0, 0, .3); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2); } .crater1 { width: 20px; height: 20px; left: 25%; top: 20%; } .crater2 { width: 10px; height: 10px; left: 50%; top: 60%; } .crater3 { width: 15px; height: 15px; left: 30%; top: 65%; } .crater4 { width: 15px; height: 15px; left: 60%; top: 35%; } .star { display: block; width: 5px; height: 5px; border-radius: 50%; background: #FFF; top: 100px; left: 400px; position: relative; transform-origin: 100% 0; animation: star-ani 6s infinite ease-out; box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3); opacity: 0; z-index: 2; } .star:after { content: ''; display: block; top: 0px; left: 4px; border: 0px solid #fff; border-width: 0px 90px 2px 90px; border-color: transparent transparent transparent rgba(255, 255, 255, .3); transform: rotate(-45deg) translate3d(1px, 3px, 0); box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1); transform-origin: 0% 100%; animation: shooting-ani 3s infinite ease-out; } .pink { top: 30px; left: 395px; background: #ff5a99; animation-delay: 5s; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; } .pink:after { border-color: transparent transparent transparent #ff5a99; animation-delay: 5s; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; } .blue { top: 35px; left: 432px; background: cyan; animation-delay: 7s; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; } .blue:after { border-color: 'transpareanimation-delay: 12s'; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; animation-delay: 7s; } .yellow { top: 50px; left: 600px; background: #ffcd5c; animation-delay: 5.8s; } .yellow:after { border-color: transparent transparent transparent #ffcd5c; animation-delay: 5.8s; } @keyframes star-ani { 0% { opacity: 0; transform: scale(0) rotate(0) translate3d(0, 0, 0); -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0); -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0); } 50% { opacity: 1; transform: scale(1) rotate(0) translate3d(-200px, 200px, 0); -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0); -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0); } 100% { opacity: 0; transform: scale(1) rotate(0) translate3d(-300px, 300px, 0); -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0); -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0); } } </style> compatibility All platform compatible The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Code to display the contents of a txt book on a web page
>>: MySQL foreign key setting method example
Tip: The following operations are all performed u...
Often when building a SPA, you will need to prote...
1. Download MySQL Archive (decompressed version) ...
Table of contents Problem Analysis Why encapsulat...
Table of contents Preface What are asynchronous i...
This article shares the specific code for JavaScr...
Web Services are concerned with application-to-ap...
1. Unzip MySQL 5.7 2. Create a new configuration ...
As a technical novice, I am recording the process...
Table of contents mysql master-slave replication ...
Table of contents 1. Overview 2. Use docker to de...
What are HTTP Headers HTTP is an abbreviation of ...
Table of contents Document Object Model (DOM) DOM...
Installation of Python 3 1. Install dependent env...
Copy code The code is as follows: <!DOCTYPE ht...