資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚課程
法律課程如何使用 CSS 為列表中的專案符號製作動畫效果？
要設定無序列表中專案符號的樣式，可以使用列表樣式屬性。我們將看到有關如何為有序和無序列表製作動畫效果的示例。
語法
CSS li-style 屬性的語法如下 −
li {
list-style: /*value*/
}
無序列表的樣式和動畫
以下示例說明了如何使用 CSS 列表樣式屬性設定無序列表（即 <ul>）中列表項的樣式。為了製作動畫效果，我們使用 :hover 選擇器設定了 hover 時的樣式 −
li:hover {
box-shadow: -10px 2px 4px 0 blue!important;
font-size
}
示例
我們來看一個示例，瞭解如何在網頁上設定無序列表的樣式並製作動畫效果 −
<!DOCTYPE html>
<html>
<head>
<style>
li {
margin: 3px 0;
padding: 2%;
width: 28%;
line-height: 1.2%;
list-style: none;
border-radius: 5% 0 0 5%;
box-shadow: -10px 2px 4px 0 chartreuse;
color: cornflowerblue;
}
li:hover {
box-shadow: -10px 2px 4px 0 blue!important;
font-size: 1.4em;
}
</style>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</body>
</html>
有序列表的樣式和動畫
以下示例說明了如何使用 CSS 列表樣式屬性設定有序列表（即 <ol>）中列表項的樣式。為了製作動畫效果，我們使用 :hover 選擇器設定了 hover 時的樣式 −
li:hover {
box-shadow: inset 6px 14px 10px lightgreen!important;
font-size: 1.4em;
}
示例
我們來看一個示例，瞭解如何在網頁上設定有序列表的樣式並製作動畫效果 −
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: none;
counter-reset: li;
overflow: hidden;
}
li {
margin-right: 10%;
padding: 2%;
width: 15%;
float: left;
line-height: 1.2%;
font-weight: bold;
counter-increment: li;
box-shadow: inset 2px 14px 10px lightblue;
}
li:hover {
box-shadow: inset 6px 14px 10px lightgreen!important;
font-size: 1.4em;
}
li::before {
content: counter(li);
color: seagreen;
display: inline-block;
width: 40%;
margin-left: -2em;
}
</style>
</head>
<body>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</body>
</html>
更新於: 15-11-2023
567 次瀏覽
廣告