【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;
}

---