新增第161个小实例：环形文字动画特效

2022-06-05 17:24:51 +08:00 · 2022-06-05 17:24:51 +08:00 · a40a30bef4
parent 483dfd41a7
commit a40a30bef4
4 changed files with 92 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -167,4 +167,5 @@
 157. HTML5+CSS3小实例：小球爬楼梯loading加载动画
 158. HTML5+CSS3+JS小实例：快捷菜单图标按钮交互特效
 159. HTML5+CSS3+JS小实例：翻滚吧乔巴自定义滑块控件
-160. HTML5+CSS3小实例：带标题的3D多米诺人物卡片
+160. HTML5+CSS3小实例：带标题的3D多米诺人物卡片
+161. HTML5+CSS3+JS小实例：环形文字动画特效
--- a/code/161/161.css
+++ b/code/161/161.css
@ -0,0 +1,51 @@
+/* 引入字体 */
+@import url('https://fonts.font.im/css?family=Righteous');
+
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f9f7e8;
+    /* 溢出隐藏 */
+    overflow: hidden;
+    /* 禁止选取 */
+    user-select: none;
+}
+.circle{
+    width: 50vh;
+    height: 50vh;
+    border-radius: 50%;
+    color: #62bfad;
+    font-size: 6vh;
+    font-weight: bold;
+    /* 转大写 */
+    text-transform: uppercase;
+    /* 使用引入的字体 */
+    font-family: 'Righteous';
+    text-align: center;
+    /* 执行动画：动画名 时长 线性 无限次播放 */
+    animation: spin 20s linear infinite;
+}
+.circle span{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/* 定义动画 */
+@keyframes spin {
+    0%{
+        transform: rotate(360deg);
+    }
+    100%{
+        transform: rotate(0);
+    }
+}
--- a/code/161/161.html
+++ b/code/161/161.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>环形文字动画特效</title>
+    <link rel="stylesheet" href="161.css">
+</head>
+
+<body>
+    <div class="circle">
+        helloworldhelloworld
+    </div>
+</body>
+
+</html>
+
+<script src="161.js"></script>
--- a/code/161/161.js
+++ b/code/161/161.js
@ -0,0 +1,19 @@
+// 要操作的元素
+const circle=document.querySelector('.circle');
+const text=circle.innerText;
+// 先清空原有文本
+circle.innerText='';
+
+for(let i=0;i<text.length;i++){
+    // 循环文本，取出单字
+    let letter=text[i];
+    // 创建span元素，并把单字赋给span
+    let span=document.createElement('span');
+    span.innerText=letter;
+    // 计算每一个字的旋转角度
+    let r=(360/text.length)*i;
+    // 设置span的旋转角度
+    span.style.transform='rotate('+r+'deg)';
+    // 追加span
+    circle.appendChild(span);
+}