效果：

弧形菜單，文字按規則變形以及變換透明度

簡單的javascript，上手難度：簡單

學習筆記：

text-decoration:

最主要的功能就是給文字加上附著在文字底部，上方，或者中間的線(刪除線)。

默認。定義標準的文本。

underline

定義文本下的一條線。

overline

定義文本上的一條線。

line-through

定義穿過文本下的一條線。

inherit

規定應該從父元素繼承 text-decoration 屬性的值。

隱藏超出邊界的子元素：

該例子中有13個菜單項，但只顯示出12個，因為第1個和第13個超出了父元素的邊界，被隱藏了。

overflow: hidden;

漸入隱藏效果：

第2，3，11，12個雖然沒有被隱藏，但看起來很朦朧。這樣的效果首先是設置透明度，嗯，nth-child的用法

.item:nth-child(2), .item:nth-child(3), .item:nth-child(11), .item:nth-child(12) {

opacity: 0.2;

}

然后是鄰近頂部和底部的線性漸變，這樣看來菜單項似乎和背景融為一體了

web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻，PDF)

.top {

top: 0;

background: linear-gradient(to bottom, steelblue 0%, rgba(70, 130, 180, 0) 100%);

}

.bottom {

bottom: 0;

background: linear-gradient(to bottom, rgba(70, 130, 180, 0) 0%, steelblue 100%);

}

按鈕觸摸漸變：

下面這行代碼的效果時，當鼠標放上按鈕時，按鈕花3秒從白色漸變成黑色，離開時立馬從黑色變為白色。

.btn {

color: white;

}

.btn:hover {

color: black;

transition: color 3s;

}

如果我們想鼠標離開時也是黑色逐漸變為白色怎么辦？同樣加個transition：

.btn {

color: white;

transition: color 3s;

}

.btn:hover {

color: black;

transition: color 3s;

}

吐槽一下，這兒的上下按鈕是兩個特殊符號，見html。win10輸入法自帶許多特殊符號，夠弄出很多好玩的東西了

??

由于符號本身很小，于是用scale放大，為了防止用戶復制內容時不小心選中它，以及為了防止被用戶看出來是個符號，加上一個user-select：none，這樣用戶就選不中了。

.btn {

transform: scale(3, 1);

user-select: none;

}

javascript詳細解釋：

第一步：

初始話一波，把除按鈕之外的東西都定義好，就形成了一開始看到的界面

const srart_pos = 90.75;

const item_count = 13;

const s = 0.52 * Math.PI / 180; //計算位移角度

var pos = [];

var elem = document.getElementsByClassName('item');

function allocationItems() {

//首先設置第7個元素處于中間最大的位置

var i;

var pp = elem[6].getElementsByTagName('a')[0].getAttribute('data-img');

document.getElementById("pic").style.backgroundImage = "url('" + pp + "')";

document.getElementById("pic").className = "img-box";

//計算其它菜單項的位置

pos[0] = srart_pos;

for (i = 1; i < item_count; i++) {

pos[i] = pos[i - 1] - 0.2;

last_pos = pos[i];

}

for (i = 0; i < item_count + 1; i++) {

elem[i].style.left = 240 + 250 * Math.sin(pos[i]) + 'px';

elem[i].style.top = 240 + 250 * Math.cos(pos[i]) + 'px';

}

}

allocationItems();

注意下面這句,getAtrribute的名字要和html設定的屬性值一樣，看到data-img了嗎？不過這個名字隨便取就行了，叫”photo”之類的也可以，只要保證js和html一樣就行

var pp = elem[6].getElementsByTagName('a')[0].getAttribute('data-img');

Can I use... Support tables for HTML5, CSS3, etc

web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻，PDF)

第二步：

當按下按鈕時，執行animation()，傳個參數，1為向上，0為向上。現在看看animtaion函數里面有什么。首先是定義一些東西

var $ = {

radius: 250, //圓周半徑

speed: 10 // 速度單位

}

var e = elem;

document.getElementById("pic").className = "hide";

console.log(3);

然后執行函數animate()。不過這個執行函數把別的函數當成參數傳進去了，注意看。先不管當成參數傳的函數是什么，暫時用不上。

animate(function () {

console.log(1);

var i;

for (i = 0; i < item_count; i++) {

e[i].style.left = 240 + $.radius * Math.sin(pos[i]) + 'px';

e[i].style.top = 240 + $.radius * Math.cos(pos[i]) + 'px';

if (flag) {

pos[i] += s;

} else {

pos[i] -= s;

}

} /* callback function */

}, 400, function changeItems() {

console.log(2);

var list = document.getElementById('list');

var ch = flag ? list.firstElementChild : list.lastElementChild

ch.remove();

if (flag) {

list.appendChild(ch);

} else {

list.insertBefore(ch, list.firstChild);

}

allocationItems();

});

然后看看animate()函數的定義：

function animate(draw, duration, callback) {

console.log(4);

var start = performance.now();

requestAnimationFrame(function run(time) {

console.log(5);

// 自啟動來(按下按鈕)的時差

var timePassed = time - start;

console.log(time, start)

// 不能超過最大持續時間

if (timePassed > duration)

timePassed = duration;

//重新繪制菜單項的位置

draw();

console.log(6);

if (timePassed < duration) {

console.log(7);

requestAnimationFrame(run);

} else

{

console.log(8);

callback();

console.log(9);

}

});

}

先用performance.now()確定按下按鈕的時間，儲存在start中。然后用requestAnimationFrame執行run函數。至于run函數是什么，已經在requestAnimationFrame函數中定義好了。

注意requestAnimationFrame調用時會給其中的函數傳入DOMHighResTimeStamp參數，該參數與performance.now()的返回值相同，它表示requestAnimationFrame() 開始去執行其中函數的時刻。這就是為什么run函數的定義中會有個time參數了，其實就是目前的時刻。

每次執行run函數，都要執行一遍draw函數。draw我單獨放了出來，便于理解。仔細一看，這不就是更新菜單項的位置嗎？菜單項位置并不是一下就從原位置到了指定位置，而是慢慢地移過去的，所以看起來很流暢。注意這兒的$和jquery沒有關系，看看前面的定義即可。

web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻，PDF)

function draw() {

console.log(1);

var i;

for (i = 0; i < item_count; i++) {

e[i].style.left = 240 + $.radius * Math.sin(pos[i]) + 'px';

e[i].style.top = 240 + $.radius * Math.cos(pos[i]) + 'px';

if (flag) {

pos[i] += s;

} else {

pos[i] -= s;

}

}

}

返回run函數，如果現在播放時間還沒到規定的時間的話，再執行一遍run函數。如此反復下去。如果到了規定時間的話，就執行callback()。

但到底執行的函數是什么樣子？單獨放出來一看，注意按向上的按鈕時，flag = 1，否則flag = 0。假如按了向上的按鈕，所有菜單項逆時針向上轉，這時第一個菜單項需要接著第十三個菜單項后面，否則后面就空了。于是就把第一個菜單項取下來remove()，掉，于是原來的第二到第十三菜單項序號都變小一個，第八個變成了第七個，變成了最大的那個。然后再把取下的第一個當成第十三個接在最后面，又成了新的菜單排列。

按向下的按鈕也是一樣。

function changeItems() {

console.log(2);

var list = document.getElementById('list');

var ch = flag ? list.firstElementChild : list.lastElementChild

ch.remove();

if (flag) {

list.appendChild(ch);

} else {

list.insertBefore(ch, list.firstChild);

}

allocationItems();

}

總結

以上是生活随笔為你收集整理的html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。