【每日一练】163—CSS实现每日一练列表

每日一练11个月前发布 admin
1,620 0

写在前面

这个列表是采用<ol>标签实现的,虽然它在一般开发中使用频率不高,但是,我个人觉得好还是非常实用的。因为在有些时候,我们用<ol>标签比用<ul>标签更加快捷。

当然,最终选择那个标签,我们还是需要更加实际开发需求来,没有统一标准答案。

现在,我们就一起来看一下今天这个使用<ol>实现的最终效果:

【每日一练】163—CSS实现每日一练列表

 

HTML:

<!DOCTYPE html>
<html lang=”en” >
<head>
  <meta charset=”UTF-8″>
  <title>【每日一练】163—CSS实现每日一练列表</title>
  <link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>web前端开发每日一练案例源码列表</h1>
<ol class=”ol-days” style=”–month:’练习'”>
    <li>圆形水滴卡片UI的效果</li>
    <li>输入文本动画的效果</li>
    <li>炫酷卡片效果</li>
    <li>微交互菜单的实现</li>
    <li>实现动画循环进度</li>
    <li>加载动画效果</li>
    <li>圆形水滴卡片UI的效果</li>
    <li>炫酷卡片效果</li>
    <li>微交互菜单的实现</li>
    <li>圆形水滴卡片UI的效果</li>
    <li>炫酷卡片效果</li>
    <li>炫酷卡片效果</li>
    <li>输入文本动画的效果</li>
    <li>实现动画循环进度</li>
    <li>发光按钮Hover效果</li>
    <li>圆形水滴卡片UI的效果</li>
    <li>炫酷卡片效果</li>
    <li>微交互菜单的实现</li>
    <li>炫酷卡片效果</li>
    <li>炫酷卡片效果</li>
    <li>实现动画循环进度</li>
    <li>圆形水滴卡片UI的效果</li>
    <li>炫酷卡片效果</li>
    <li>微交互菜单的实现</li>
    <li>圆形水滴卡片UI的效果</li>
    <li>炫酷卡片效果</li>
    <li>输入文本动画的效果</li>
    <li>炫酷卡片效果</li>
    <li>实现动画循环进度</li>
    <li>发光按钮Hover效果</li>
</ol>
</body>
</html>

CSS:

body {
    font-family: “Oswald”, sans-serif;
    background-color: hsl(0, 0%, 90%);
    color: hsl(0, 0%, 10%);
}
h1 {
    text-align: center;
}
.ol-days,
.ol-days * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.ol-days {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    font-size: clamp(1rem, 5vw, 2rem);
    color: hsl(0, 0%, 90%);
    list-style: none;
    counter-reset: ol-days-counter;
}
.ol-days > li {
    counter-increment: ol-days-counter;
    padding-inline: 1em;
    display: grid;
    grid-template-columns: min-content min-content auto;
    align-items: center;
    background: linear-gradient(
            hsla(0 0% 100% / 0.2),
            transparent 50%,
            hsla(0 0% 0% / 0.3)
        ),
        var(–clr_bg);
    text-align: right;
    transition: transform 250ms ease;
    cursor: default;
}
.ol-days > li:hover {
    transform: scale(1.05);
}
.ol-days > li::before,
.ol-days > li::after {
    display: grid;
    align-items: center;
    grid-row: 1;
    text-align: left;
}
.ol-days > li::before {
    content: var(–month);
    grid-column: 1;
    padding-inline-end: 0.25em;
}
.ol-days > li::after {
    content: counter(ol-days-counter, decimal-leading-zero);
    grid-column: 2;
    width: 1.75em;
    height: 3.5em;
    background-image: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0) 25%
        ),
        radial-gradient(
            circle at 0.125em center,
            var(–clr_accent) 1.25em,
            transparent calc(1.25em + 1px)
        );
    padding-inline-start: 0.1em;
}
.ol-days > li:nth-child(even)::before {
    padding-inline-start: 1.25em;
}
.ol-days > li:nth-child(6n + 1) {
    –clr_bg: #2e2b3c;
    –clr_accent: #fb6767;
}
.ol-days > li:nth-child(6n + 2) {
    –clr_bg: #47505f;
    –clr_accent: #c14755;
}
.ol-days > li:nth-child(6n + 3) {
    –clr_bg: #37aa8d;
    –clr_accent: #a1cc6f;
}
.ol-days > li:nth-child(6n + 4) {
    –clr_bg: #8fb568;
    –clr_accent: #566574;
}
.ol-days > li:nth-child(6n + 5) {
    –clr_bg: #24b8b8;
    –clr_accent: #c4b36a;
}
.ol-days > li:nth-child(6n + 6) {
    –clr_bg: #fc6868;
    –clr_accent: #2e2b3c;
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...