Skip to content

Commit

Permalink
Merge branch 'main' of github.com:squid-Xu/blog
Browse files Browse the repository at this point in the history
  • Loading branch information
@squid-Xu
squid-Xu committed Aug 29, 2024
2 parents 6bd0877 + 057674d commit d05e698
Show file tree
Hide file tree
Showing 4 changed files with 288 additions and 12 deletions.
5 changes: 4 additions & 1 deletion .vitepress/config.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,10 @@ export default defineConfig({
items: [{ text: '1、Array 支持从尾部查找', link: '/ecmascript/es14/No1' }],
},
],
'/case/': [{ text: '家族图谱', link: '/case/No1' }],
'/case/': [
{ text: '家族图谱', link: '/case/No1' },
{ text: 'css实现围绕中心进行圆形旋转', link: '/case/No2' },
],
'/summary/': [
{
text: '微信小程序',
Expand Down
103 changes: 103 additions & 0 deletions case/No2.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
# css实现围绕中心进行圆形旋转

<script lang="ts" setup>
import circleBall from './components/circle-ball.vue'
</script>

<circle-ball/>

## 代码实现

::: code-group
```html [template]
<template>
<div class="main">
<div class="circle full-50"></div>
<div class="circle full-100">
<div class="ball"></div>
</div>
<div class="circle full-200">
<div class="ball"></div>
</div>
<div class="circle full-300">
<div class="ball"></div>
</div>
<div class="circle full-400">
<div class="ball"></div>
</div>
</div>
</template>
```

```html [scss]
<style lang="scss" scoped>
.main {
margin: auto;
width: 500px;
height: 500px;
position: relative;
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.ball {
transform: translateY(-50%);
margin: 0 auto;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(128, 7, 209);
}
.full-50 {
width: 50px;
height: 50px;
background-color: aquamarine;
}
.full-100 {
width: 100px;
height: 100px;
border: solid 2px hotpink;
animation: spin 1s linear infinite;
}
.full-200 {
width: 200px;
height: 200px;
border: solid 2px khaki;
animation: spin 2s linear infinite;
}
.full-300 {
width: 300px;
height: 300px;
border: solid 2px teal;
animation: spin 4s linear infinite;
}
.full-400 {
width: 400px;
height: 400px;
border: solid 2px lawngreen;
animation: spin 6s linear infinite;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
}
</style>
```
:::
87 changes: 87 additions & 0 deletions case/components/circle-ball.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>
<div class="main">
<div class="circle full-50"></div>
<div class="circle full-100">
<div class="ball"></div>
</div>
<div class="circle full-200">
<div class="ball"></div>
</div>
<div class="circle full-300">
<div class="ball"></div>
</div>
<div class="circle full-400">
<div class="ball"></div>
</div>
</div>
</template>

<style lang="scss" scoped>
.main {
margin: auto;
width: 500px;
height: 500px;
position: relative;
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.ball {
transform: translateY(-50%);
margin: 0 auto;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(128, 7, 209);
}
.full-50 {
width: 50px;
height: 50px;
background-color: aquamarine;
}
.full-100 {
width: 100px;
height: 100px;
border: solid 2px hotpink;
animation: spin 1s linear infinite;
}
.full-200 {
width: 200px;
height: 200px;
border: solid 2px khaki;
animation: spin 2s linear infinite;
}
.full-300 {
width: 300px;
height: 300px;
border: solid 2px teal;
animation: spin 4s linear infinite;
}
.full-400 {
width: 400px;
height: 400px;
border: solid 2px lawngreen;
animation: spin 6s linear infinite;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
}
</style>
105 changes: 94 additions & 11 deletions demo/1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,101 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试</title>
<style>
.circle {
margin: auto;
width: 500px;
height: 500px;
border: solid 1px red;
position: relative;
}
.circle-1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: aquamarine;
}
.circle-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
border: solid 2px hotpink;
/* animation: spin 3s linear infinite; */
}
.ball {
transform: translateY(-50%);
margin: 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: hotpink;
}
.circle-3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
border: solid 2px khaki;
/* animation: spin 4s linear infinite; */
}
.circle-4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border-radius: 50%;
border: solid 2px teal;
/* animation: spin 5s linear infinite; */
}
.circle-5 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: solid 2px lawngreen;
/* animation: spin 6s linear infinite; */
}
@keyframes spin {
form {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<script>
const arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];

// find vs findLast
console.log(arr.find(n => n.value % 2 === 1)); // { value: 1 }
console.log(arr.findLast(n => n.value % 2 === 1)); // { value: 3 }

// findIndex vs findLastIndex
console.log(arr.findIndex(n => n.value % 2 === 1)); // 0
console.log(arr.findLastIndex(n => n.value % 2 === 1)); // 2
</script>
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2">
<div class="ball"></div>
</div>
<div class="circle-3">
<div class="ball"></div>
</div>
<div class="circle-4">
<div class="ball"></div>
</div>
<div class="circle-5">
<div class="ball"></div>
</div>
</div>
</body>
</html>

0 comments on commit d05e698

Please sign in to comment.