【CSS】 CSS小技巧-按钮消失-首字放大下沉-无需JS点击滑动-CSS实现暗黑模式-文字渐变

1、按钮/文字 消失

button {
        animation: fade 1s ease forwards;
    }

@keyframes fade {
        from {
            opacity: 1;
            pointer-events: all;
        }

        to {
            opacity: 0;
            pointer-events: none;
        }
    }

---

2、文字首字放大下沉

p::first-letter {
        font-size: 3rem;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        float: left;
    }

---

 3、不需要JS实现界面点击滑动到指定位置

<a href="#bottom">bottom</a>
<section id='bottom'>
   <h1>Hello</h1>
</section>

section {
        height: 100vh;
}

html {
        scroll-behavior: smooth;
}

---

4、CSS实现暗黑模式

html {
        background: black;
        filter: invert(1) hue-rotate(180deg);
}

---

5、文字颜色渐变

section h1 {
        font-size: 4rem;
        background: linear-gradient(to left, rgb(112, 101, 214), rgb(230, 106, 213));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

---