我不知道如何做到這一點。
uj5u.com熱心網友回復：
這里我們有一個簡單的例子來說明如何做到這一點
<style>
p{
display: block;
position: relative;
width: 136px;
}
.circle{
position: absolute;
height: 5px;
width: 5px;
background: #00ff00;
right: -20px;
border-radius: 20px;
top: 5px;
transition: ease-in-out .2s all;
z-index: -1;
}
.line{
position: absolute;
height: 2px;
width: 40px;
background: #00ff00;
right: -70px;
border-radius: 20px;
top: 5px;
transition: ease-in-out .2s all;
}
p:hover .circle{
height: 60px;
width: 60px;
background: red;
right: -30px;
border-radius: 38px;
margin: auto;
top: -20px;
}
p:hover .line{
width: 60px;
right: -90px;
}
p:hover .white-on-hover{
color: #fff;
transition: ease-in-out .2s all;
}
</style>
<script>
window.onload = function(){
//get cms string
var cmsText = document.getElementById('cmsText').innerHTML;
//separe words
cmsText = cmsText.split(' ');
//get last words
lastWord = cmsText[cmsText.length-1];
//separe letters
lastWord = lastWord.split('');
var newLastWord = '';
//concat all letters and add span with class "white-on-hover" before last 4 letters
for(let i = 0; i < lastWord.length; i ){
if(i == lastWord.length-4){
newLastWord ='<span >';
newLastWord = lastWord[i];
}else if(i == lastWord.length-1){
newLastWord = lastWord[i];
newLastWord ='</span>';
}else{
newLastWord = lastWord[i];
}
}
//concat all words adding the new last word
var newCmsText = '';
for(let i = 0; i < cmsText.length; i ){
if(i != cmsText.length-1){
newCmsText = cmsText[i];
newCmsText = ' ';
}else{
newCmsText = newLastWord;
}
}
//change the text for new text
document.getElementById('cmsText').innerHTML = newCmsText;
}
</script>
<p><span id="cmsText">title button advanced</span> <span class="circle"></span> <span class="line"></span> </p>
注 1：我使用了很多 html 標簽 span，這不是一個好的 HTML 語法。這是一個示例，如果您更改一些細節，這是一個很好的做法
注意 2：這個 JavaScript 不是最好的解決方案，它可以作業并且很容易理解
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/476583.html
標籤：javascript html jQuery 动画片 css3pie
上一篇：從頭開始行走影片壞了