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

FransicZhang

于 2020-04-21 15:17:11 发布

阅读量576

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/FransicZhang/article/details/105658665

版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

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