css 散點圓
阿新 • • 發佈：2022-05-25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <style> body{ height: calc(100vh); width: 100%; background: linear-gradient(171deg,rgba(6,11,40,0.74) 0%, rgba(10,14,35,0.71) 100%); } .circlePoint{ height: 100px; width: 100px; padding: 0; border-radius: 50%; margin: 100px auto; /*background: transparent;*/ position: relative; } .circlePoint>li{ list-style-type: none; height: 100px; width: 2px; background-color: #4FBD28; position: absolute; left: 50%; top: 50%; margin-left: -1px; margin-top: -50px; transform-origin: 50% 50%; } .circlePoint::after{ content: ''; position: absolute; left: 5%; top: 5%; height:90%; width: 90%; background-color: #4a4e61; border-radius: 50%; } </style> </head> <body> <div id="app"> <p>{{ message }}</p> <ul class="circlePoint"> <li v-for="(item,index) in 20" :key="index" :style="{transform: 'rotateZ('+9*(index+1)+'deg)'}"></li> </ul> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>