css3 漂亮的列表

CSS3 是建立在 CSS2 之上的一个新版本，它为网页设计师提供了更多的样式特效。在这些特效中，列表也不例外，有很多令人惊艳的效果。

下面，我们来看一些 CSS3 中漂亮的列表样式。

/* 1. 数字型列表样式 */ol {
    counter-reset: my-counter;
    list-style-type: none;
}
ol li:before {
    content: counter(my-counter) ". ";
    counter-increment: my-counter;
}
/* 2. 图标型列表样式 */ul.square {
    list-style: none;
}
ul.square li:before {
    content: "25AA";
    margin-right: 10px;
}
/* 3. 下拉菜单型列表样式 */ul.dropdown {
    list-style: none;
}
ul.dropdown li {
    position: relative;
}
ul.dropdown li:before {
    content: "25BC";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul.dropdown li:hover:before {
    color: #ff0000;
}
/* 4. 缩略图型列表样式 */ul.thumbnail {
    list-style: none;
}
ul.thumbnail li {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px;
    border: 1px solid #ccc;
    overflow: hidden;
}
ul.thumbnail li img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* 5. 圆点随机闪动型列表样式 */ul.blink {
    list-style: none;
}
ul.blink li {
    position: relative;
    margin: 10px;
}
ul.blink li:before {
    content: "2022";
    position: absolute;
    left: -25px;
    opacity: 0;
    animation: blink .6s infinite;
}
@keyframes blink {
from {
    left: -25px;
     opacity: 0;
}
to {
    left: 0;
     opacity: 1;
}
}
ul.blink li:nth-child(2n):before {
    animation-delay: .3s;
}
/* 6. 文本卡片型列表样式 */ul.card {
    list-style: none;
}
ul.card li {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 20px;
    background: #f8f8f8;
    border-radius: 5px;
    transition: all .3s;
}
ul.card li:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
}
ul.card li h3 {
    margin: 10px;
    font-size: 18px;
}
    

这些漂亮的列表样式只是 CSS3 中的一小部分，如果你想要更多的效果，可以去查阅相关资料。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！