CSSを使用してリスト内の弾丸をアニメーション化する方法
順序付けられていないリストで箇条書きのスタイルを設定するには、リストスタイルのporを使用できます
構文
CSSli-styleプロパティの構文は次のとおりです-
li {
list-style: /*value*/
} 例
次の例は、CSSのliスタイルのプロパティを示しています。
<!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> これにより、次の出力が得られます
例
<!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> これにより、次の出力が得られます
-
CSSでリストの箇条書きの色を変更するにはどうすればよいですか？
CSSを使用してリストの箇条書きの色を変更するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans
-
CSSクリップパスを使用して三角形を作成する方法
CSSのclip-pathプロパティを使用して三角形を作成できます。 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector { clip-path: /*value*/ } 例 次の例は、CSSのclip-pathプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {