css实现超级玛里奥时间线效果代码-html代码-BFW代码库

css实现超级玛里奥时间线效果代码

代码语言：html

所属分类：其他

代码描述：css实现超级玛里奥时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: grid;
                grid-template-columns: repeat(3, 220px);
                justify-content: center;
        }
        li {
                grid-column: span 2;
                text-align: center;
                border-radius: 65px;
                color: #fff;
                font-weight: bold;
                font-size: 25px;
                line-height: 1.5em;
                font-family: sans-serif;
                position: relative;
                padding: 20px;
                border: 20px solid #0000;
                background: linear-gradient(#e71e07 0 0) content-box,
                        linear-gradient(var(--c, #fcd000) 0 0) padding-box,
                        linear-gradient(var(--d, 90deg), #0000 75%, #42b132 0) border-box;
        }
        li:nth-child(even) {
                grid-column-end: -1;
                --d: -90deg;
                --c: #009cda;
        }
        li:not(:last-child) {
                margin-bottom: -20px;
        }
        li:before,
        li:after {
                content: "";
                display: block;
                height: 0.6em;
        }
        
        time {
                position: absolute;
                font-size: 0.65em;
                left: calc(100% + 50px);
                top: 50%;
                transform: translateY(-50%);
                white-space: nowrap;
        }
        li:nth-child(even) time {
                left: auto;
                color: #000;
                right: calc(100% + 50px);
        }
        time:before {
                content: "";
                position: absolute;
                height: 10px;
                top: calc(50% - 5px);
                right: calc(100% + 5px);
                width: 65px;
                background: repeating-linear-gradient(-90deg, #fcd000 0 5px, #0000 0 10px) 50%/100%
                        2px n.........完整代码请登录后点击上方下载按钮下载查看