CSS魔法

LiYajie: 2021-04-26 css

01. CSS loading...

<div class="loading">
    <div></div>
    <div></div>
    <div></div>
</div>

@keyframes loading-animate {
    to {
        opacity: 0.1;
    }
}
.loading {
    display: flex;
    justify-content: center;
}
.loading > div {
    width: 20px;
    height: 20px;
    margin: 0 10px;
    border-radius: 50%;
    background-color: #000;
    animation: loading-animate 0.6s infinite alternate;
}
.loading > div:nth-child(2) {
    animation-delay: 0.2s;
}
.loading > div:nth-child(3) {
    animation-delay: 0.3s;
}

02. 恒定宽高比

<div class="css-magic-constant"></div>

.css-magic-constant {
    background-color: #0094ff;
    width: 50%;
}
.css-magic-constant::before {
    content: '';
    padding-top:100%;
    float: left;
}
.css-magic-constant::after {
    content: '';
    display: block;
    clear: both;
}

03. :not选择器

要求横向布局, 且每个中间有分割线

<ul class="not-selector">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

<style>
.not-selector {
    display: flex;
}
.not-selector li {
    list-style: none;
    padding: 0 10px;
}
.not-selector li:not(:last-child) {
    border-right: 2px solid #ddd;
}
</style>

• one
• two
• three
• four

04. css实现switch组件

<input type="checkbox" class="switch" id="toggle"/><label for="toggle" class="toggle"></label>

<style>
.switch {
    position: absolute;
    left: -10000px;
}
.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(0,0,0,0.25);
    border-radius: 20px;
}
.toggle::after {
    position: absolute;
    content: '';
    left: 1px;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.3s;
}
.switch[type="checkbox"]:checked + .toggle::after {
    transform: translateX(20px);
}
.switch[type="checkbox"]:checked + .toggle {
    background-color: #0094ff;
}
</style>

05. 雕刻文字

.etched-text {
    text-shadow: 0px 2px #fff;
    font-size: 24px;
    font-weight: 700;
    background-color: #faf6fa;
    color: #b8bec5;
    padding: 15px;
}

I'm LiYajie

06. 自定义滚动条

.custom-scroll {
    height: 200px;
    background-color: #eee;
    overflow-y: scroll;
    padding: 10px;
    border-radius: 4px;
}
/* 获取到滚动条元素 */
.custom-scroll::-webkit-scrollbar {
    width: 10px;
}
/* 设置滚动条的滚动轨道 */
.custom-scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
/* 设置滚动条滑块 */
.custom-scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

我是内容

我是内容

我是内容

我是内容

我是内容

我是内容

我是内容

07. 环形loading

TIP

只需要让元素变成原型, 然后设置其中一个边框颜色高亮, 再使用动画animation使其无限循环即可

@keyframes cricleloading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.cricle-loading {
    width: 25px;
    height: 25px;
    border: 4px solid #ddd;
    border-radius: 50%;
    border-top-color: #0094ff;
    animation: cricleloading 1.2s linear infinite;
}