利用css实现环形文字展示

小麦子 发表于 2024-12-7 11:12:44

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>环形文字</title>
<style>
   .container {
         position: relative;
   }

   .emblem span {
         position: absolute;
         display: inline-block;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
         font-size: 18px;
         color: #37474f;
         font-weight: 900;
         transition: all 0.5s cubic-bezier(0, 0, 0, 1);
   }

   .emblem {
         position: absolute;
         left: 80px;
         top: 80px;
         width: 240px;
         height: 240px;
         border-radius: 50%;
         color: #7D970B;
         text-align: center;
         overflow: hidden;
         border: 5px solid red;
   }

   .rightConent {
         /*width: 300px;*/
         margin-left: 450px;
         margin-top: 30px;
   }

   .btns {
         display: flex;
         margin: auto;
   }

   .btns > div {
         border: 1px solid #7D970B;
         border-radius: 10px;
         padding: 20px;
         margin: 10px;
   }

   .btns > div > div {
         text-align: center;
         border: coral 2px solid;
         border-radius: 10px;
         margin: 10px auto;
         padding: 8px 20px;
cursor: pointer;
   }
.btns > div > div:hover {
         background-color: #FFC790
   }

   .inputBox {
         display: flex;
         align-items: center;
   }

   input {
         outline: none;
         display: block;
         width: 300px;
         height: 40px;
         border: 2px solid orange;
         border-radius: 10px;
         color: #666;
         text-indent: 20px;
   }

   .changeBtn {
         width: 100px;
         height: 40px;
         border-radius: 8px;
         background: #666666;
         color: #ffffff;
         text-align: center;
         line-height: 40px;
         margin-left: 10px;
   }
</style>
</head>
<body>
<div class="container">
<div id="emblem" class="emblem"></div>
</div>
<div class="rightConent">
<div class="inputBox">
   <input class="company" type="text" value="" placeholder="请输入名称">
   <div class="changeBtn">提交变更</div>
</div>
<h2>调整角度</h2>
<div class="btns">
   <div>
         <div>-1</div>
         <div>-1</div>
         <div>-20</div>
   </div>
   <div>
         <div>+1</div>
         <div>+1</div>
         <div>+20</div>
   </div>
</div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
let startData = '我是武则天'
let emblemText = startData.split('')
circleText('.emblem')

function changeCompany() {
   let _p = document.getElementById('emblem')
   _p.innerHTML = ''
   let val = $('.company').val() ? $('.company').val() : '我是秦始皇'
   emblemText = val.split('')
   console.log(emblemText)
   circleText('.emblem')
}

function circleText(el, str) {
   let element = document.querySelector(el);
   emblemText.forEach((v, i) => {
         let span = document.createElement('span');
         span.innerHTML = `<pre>${emblemText}</pre>`
         let deg = (i + 1) * 30 - 15;
         span.style.transform = `rotateZ(${deg}deg)`
         element.appendChild(span);
   })
}

let arr = []

function emblemDeg(deg) {
   arr.push(deg)
   let emblem = document.getElementById('emblem');
   emblem.style.transform = `rotateZ(${sum(arr)}deg)`
}

function sum(arr) {
   let len = arr.length;
   if (len == 0) {
         return 0;
   } else if (len == 1) {
         return arr;
   } else {
         return arr + sum(arr.slice(1));
   }
}

</script>
</body>
</html>

mm6688 发表于 2024-12-21 23:06:10

好好学习天天向上

1633328963 发表于 2024-12-24 06:17:03

这个板子不错谢谢分享，支持牛牛论坛

页: [1]

牛牛论坛's Archiver

利用css实现环形文字展示