CSS文字效果

无知的小菜鸡

已于 2022-04-07 13:46:35 修改

阅读量2k

点赞数 2

分类专栏： HTML+CSS 文章标签： css 动画 css3

于 2021-11-03 23:16:48 首次发布

本文链接：https://blog.csdn.net/weixin_41897680/article/details/121132542

版权

HTML+CSS 专栏收录该内容

39 篇文章 11 订阅

订阅专栏

打字动画

来源： 传送门

效果

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0px;
            box-sizing: border-box;
            font-family: consolas;
        }

        body {
            /* 使用弹性布局，实现居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #121213;
        }

        .loader {
            position: relative;
            /* 文字的倒影效果 */
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0002)
        }

        .loader h2 {
            position: relative;
            color: aliceblue;
            letter-spacing: 5px;

            /* 文字动画 ，动画的步数就是字符的个数*/
            animation: typing 8s steps(10) infinite;
            /* 超出的文字隐藏 */
            overflow: hidden;
        }

        /* 光标 */
        .loader::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            background: aliceblue;
            /* 动画 ，steps将动画分步，动画从0到100%经过3步*/
            animation: blinkCursor 0.8s steps(3) infinite;
        }

        /* 实现光标的闪烁效果 */
        @keyframes blinkCursor {

            0%,
            75% {
                opacity: 1;
            }

            76%,
            100% {
                opacity: 0;
            }
        }

        @keyframes typing {

            0%,
            90%,
            100% {
                width: 0;
            }

            30%,
            60% {
                /* 宽度是文字的宽度，通过控制台看出来的 */
                width: 181.95px;
            }
        }
    </style>
</head>

<body>
    <div class="loader">
        <h2>Loading...</h2>
    </div>
</body>

</html>

代码的核心是文字宽度的改变，超出的部分隐藏

文字渐变

主要通过background-clip: text;和 linear-gradient 实现文字渐变效果
background-clip: text;意思是，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
linear-gradient：线性渐变，内容也挺多的自行百度

思路
首先：给外层div来一个渐变。
其次：用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪；
最后：把文字变透明：可以用rgba给文本填充透明颜色或者直接设置color: transparent;

效果
在这里插入图片描述
代码

 <div class="content">文字渐变</div>

.content{
    width: 100%;
    height: 100%;
    // 文字居中
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
     //设置背景色渐变 从左往右
    background: -webkit-linear-gradient(left ,red,orange,blue,green);
    //设置文字裁剪
	background-clip: text;
    //设置文字填充颜色为透明
	-webkit-text-fill-color: rgba(0,0,0,0);
}

备注： 加上浏览器标识，有些浏览器可能不兼容，造成效果不显示

在上面的基础上加上一点动画，效果可以更好

.content{
    width: 100%;
    height: 100%;
    // 文字居中
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
     //设置背景色渐变 从左往右
    background: -webkit-linear-gradient(left ,red,orange,blue,green);
    //设置文字裁剪
	background-clip: text;
    //设置文字填充颜色为透明
	-webkit-text-fill-color: rgba(0,0,0,0);

    //设置背景颜色的位置
    background-position: -300px 0px;
    //设置动画
    animation:loop 10s linear infinite;
}

// 背景颜色位置的动画
@keyframes loop{
     0%{background-position: -300px 0px;}
     100%{background-position: 0px 0px;}
}

效果如图
在这里插入图片描述
扩展
如果把渐变改成背景可以有下面的效果

文本展开效果

该效果的源地址：文字展开
在源代码的基础上封装成vue组件，与源代码有些不同，不过原理都是一样的

效果

在这里插入图片描述
代码

<template>
    <div class="wzzk">
        <div class="text">
            <template v-for="(word, index) in letterList">
                <div
                    v-for="(letter, j) in word"
                    :key="index + '_' + j"
                    :class="j == 0 ? 'first-letter' : 'hiddren'">
                    {{ letter }}
                </div>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: 'Hello World !'
        }
    },
    data() {
        return {
            // 所有字母
            letterList: []
        };
    },
    mounted() {
        this.handleLetter();
    },
    methods: {
    // 处理文字
        handleLetter() {
            // 拆分文字成单个单词
            let words = this.text.split(' '); // ['Hello','World']
            this.letters = [];
            // 拆分单词，将单词拆分成字母
            words.forEach((word) => {
                let letters = word.split('');
                this.letterList.push(letters);
            });
        }
    }
};
</script>

<style scoped lang="scss">
.wzzk {
  // 让文字居中
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;

  //  字体样式
  color: white;
  font-size: 2em;
  font-weight: bold;
  font-family: Lato, sans-serif;
}

.text{
    display: flex;
}

//默认样式
div {
  text-decoration: none white;
  transition: all 1s ease-in-out;
}

//单词首字母显示的样式
.first-letter {
  text-decoration: underline;
}
//单词首字母后面字母的样式
.hiddren {
    max-width: 0em;
    overflow: hidden;
    opacity: 0px;
}


//字母鼠标悬浮样式
.text:hover {
  div {
    text-decoration: none;
    max-width: 2em;
    opacity: 1;
  }
  .first-letter{
    margin-left: 0.5em;
  }
}
</style>

思路

将文本先拆分成单词，再将单词拆分成一个个字母
将每一个字母都放在一个div里，通过循环渲染出来
只显示每个单词的首字母，其余的通过设置宽度和overflow属性隐藏掉
鼠标悬浮后，显示出所有文字

利用text-shadow实现发光文字效果

text-shadow 文本阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow		必需。水平阴影的位置。允许负值。
v-shadow	    必需。垂直阴影的位置。允许负值。
blur			可选。模糊的距离。
color	        可选。阴影的颜色。

注：文本阴影可以设置多组值

原文地址：传送门

<template>
    <div class="container">
        <div class="text">Hello World !</div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.text {
  color: #cce7f8;
  font-size: 2.5rem;
  font-family: "Pacifico", cursive;
  animation: shining 0.1s alternate infinite;
}
@keyframes shining {
  from {
    text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),
      0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),
      0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),
      0 0 54px rgba(15, 115, 223, 0.9);
  }
  to {
    text-shadow: 0 0 6px rgba(182, 211, 207, 1),
      0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),
      0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),
      0 0 60px rgba(15, 115, 223, 1);
  }
}
</style>

效果
在这里插入图片描述

线性渐变配合阴影实现条纹立体阴影条纹字

参考文章：线性渐变配合阴影实现条纹立体阴影条纹字

基础代码

.text {
  font-family: Times New Roman, "serif";
  position: relative;
  color: black;
  font-size: 50px;

  //给文字添加阴影
  text-shadow: 4px 4px 1px #333;
}

在这里插入图片描述
添加线性渐变

 //通过生成**白色->透明色**的多重线性渐变叠加在黑色之上来实现条纹效果
  &::before{
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);
      background-size: 6px 6px;
      //通过层级让条纹在文字上面
      z-index: 1;
  }

在这里插入图片描述
完整代码

<template>
    <div class="main">
        <div class="text">{{ text }}</div>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: 'Hello World'
        }
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  font-family: Times New Roman, "serif";
  position: relative;
  color: black;
  font-size: 60px;

  //给文字添加阴影
  text-shadow: 4px 4px 1px #333;

   //通过生成**白色->透明色**的多重线性渐变叠加在黑色之上来实现条纹效果
  &::before{
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);
      background-size: 6px 6px;
      //通过层级让条纹在文字上面
      z-index: 1;
  }
}
</style>

文字切换效果

代码来源：巧用滤镜实现高级感拉满的文字快闪切换效果

效果
在这里插入图片描述

代码

<div class="g-container">
     <div class="word">C</div>
     <div class="word">S</div>
     <div class="word">S</div>
     <div class="word">强得很！</div>
 </div>

$speed: 8s;
$wordCount: 4;

.g-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 50px;
    filter: contrast(15);

    //文字居中
    display: flex;
    justify-content: center;
    align-items: center;
}
.word {
    position: absolute;
    animation: change $speed infinite ease-in-out;

    @for $i from 0 to $wordCount {
        &:nth-child(#{$i + 1}) {
            animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
        }
    }
}

@keyframes change {
    0%,
    5%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }
    50%,
    80% {
        filter: blur(80px);
        opacity: 0;
    }
}