CSS3 文字跳动 + 动画背景渐变

灵云JS

已于 2023-02-10 14:45:40 修改

阅读量336

点赞数

文章标签： css3 html 前端

于 2022-12-02 18:19:28 首次发布

本文链接：https://blog.csdn.net/weixin_68353232/article/details/128152421

版权

<!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>

body{

display: flex;

justify-content: center;

align-items: center;

height: 500px;

}

body div:nth-child(1) {

text-shadow: 0 0 10px #dfd8d8;

background: linear-gradient(135deg,#14ffe9,#ffeb3b,rgb(255, 0, 225),rgb(34, 0, 255),red),green;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: f 1s linear infinite;

}

body div:nth-child(2){

text-shadow: 0 0 10px #dfd8d8;

background: linear-gradient(135deg,#14ffe9,#ffeb3b,rgb(255, 0, 225),rgb(34, 0, 255),red),green;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: f 1.2s linear infinite;

}

body div:nth-child(3){

text-shadow: 0 0 10px #dfd8d8;

background: linear-gradient(135deg,#14ffe9,#ffeb3b,rgb(255, 0, 225),rgb(34, 0, 255),red),green;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: f 1.3s linear infinite;

}

    @keyframes f{

    0%{

        transform: translateY(0.9px);

    }

    40%{

        transform: translateY(2px);

    }

    55%{

        transform: translateY(2.2px);

    }

    700%{
        transform: translateY(3px);
    }
    }

</style>

</head>

<body>

<div>周</div>

<div>杰</div>

<div>伦</div>

</body>

</html>