CSS常用效果

被猫吃的竹子

已于 2022-08-25 13:47:56 修改

阅读量810

点赞数

分类专栏： CSS 文章标签： css 前端 html

于 2022-08-17 15:16:29 首次发布

本文链接：https://blog.csdn.net/qq_18594435/article/details/126386566

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了CSS的一些常用效果，包括如何使用DIV绘制三角形，内容的居中布局（包括使用flex布局），创建进度条效果，以及制作流光和渐变文字特效。在实现渐变文字时遇到字数少导致动画异常的问题，通过调整背景图大小找到临时解决方案。

摘要由CSDN通过智能技术生成

1.DIV绘制三角形

<body>
    <div id="main"></div>
</body>
</html>

<style>
    #main{
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-left: 30px solid #C00;
        border-right: 30px solid transparent;;
        border-bottom: 30px solid transparent;
    }
</style>

2.内容居中

<body>
    <div id="main">
        <div id="son"></div>
    </div>
</body>
</html>

<style>
    #main{
        width: 400px;
        height: 400px;
        border: 1px solid #C00;
        position: relative;
    }
    #son{
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: aquamarine;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>

也可以使用 flex 布局实现。

3.进度条效果

<body>
    <div id="main">
        <div class="progress-box">
            <div class="progress"></div>
        </div>
    </div>
</body>
</html>

<style>
    #main{
        width: 400px;
        height: 300px;
        margin: 20px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .progress-box{
        width: 160px;
        height: 10px;
        border-radius: 100px;
        border: 1px solid #C00;
    }
    .progress{
        width: 0%;
        height: 10px;
        border-radius: 100px;
        background-color: aquamarine;

        transition: width 700ms;
    }
    #main:hover .progress{
        width: 100%;
    }
</style>

4. 流光文字效果

<body>
    <div class="coolTextBox">
        <!-- 文字层 -->
        <div class="text coolText">HelloWorld，你好世界</div>
        <!-- 流光背景 -->
        <div class="bgLight coolText">HelloWorld，你好世界</div>
    </div>
</body>
</html>
<style>
    body{
        background-color: black;
    }
    .coolText{
        font-size: 30px;
        font-weight: bold;
    }
    .coolTextBox{
        position: relative;
    }
    .coolTextBox .bgLight{
        display: inline-block;
        background-image: url(./lightBG.png);
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        animation-name: textAni;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        position: absolute;
        z-index: 10;
        top:0px;
    }
    .coolTextBox .text{
        color: rgba(255, 183, 143, 1);
    }
    @keyframes textAni{
        from{
            background-position-x: -300%;
        }
        to{
            background-position-x: 300%;
        }
    }
</style>

背景图只是一个白色的斜线。

5.渐变文字

在上面的基础上修改的，可以做到渐变且有流光的效果

<style>
    body{
        background-color: black;
    }
    .coolText{
        font-size: 30px;
        font-weight: bold;
    }
    .coolTextBox{
        position: relative;
    }
    .coolTextBox .bgLight{
        display: inline-block;
        background-image: url(./lightBG.png);
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        animation-name: textAni;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        position: absolute;
        z-index: 10;
        top:0px;
    }
    /* 将文字层设置为渐变文字 */
    .coolTextBox .text{
        color: rgba(0, 0, 0, 0);
        background: linear-gradient(133deg, #B97AFB 0%, #6886FF 100%);
        -webkit-background-clip: text;
    }
    @keyframes textAni{
        from{
            background-position-x: -300%;
        }
        to{
            background-position-x: 300%;
        }
    }
</style>