48种字体特效

qq1978366308

已于 2022-08-31 19:18:52 修改

阅读量367

点赞数

文章标签： html 前端

于 2022-08-31 19:11:35 首次发布

本文链接：https://blog.csdn.net/qq1978366308/article/details/126629850

版权

文字虚幻抖动, 抖音破坏风

<!DOCTYPE >
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>文字虚幻抖动</title>

</head>
<body style="background-color: #000">
<div id="Title2" style="color: gray; font: bold 50px arial; position: absolute; visibility:hidden; top:100px; left:300px;">
    <h1>思江南</h1>
    <p>
        昨日草枯今日青， <br/>
        羁人又动故乡情。<br/>
        夜来有梦登归路，<br/>
        不到桐庐已及明。
    </p>
</div>
<div id="Title1" style="color: white; font: bold 50px arial; position: absolute; visibility:hidden; top:100px; left:300px">
    <h1>思江南</h1>
    <p>
        昨日草枯今日青， <br/>
        羁人又动故乡情。<br/>
        夜来有梦登归路，<br/>
        不到桐庐已及明。
    </p>
</div>
<script>
     var Tle2 = "document.all.Title2.style";
    var Tle1 = "document.all.Title1.style";
    eval(Tle2).top = eval(Tle1).top = document.body.clientHeight / 2 - 250;
    eval(Tle2).left = eval(Tle1).left = document.body.clientWidth / 2 - 150;

    function Fade() {
        var BackX = Math.random() * 10;
        var BackY = Math.random() * 5;
        if (Math.random() < 0.5) {
            BackX = -BackX;
            BackY = -BackY;
        }
        eval(Tle1).visibility = eval(Tle2).visibility = "visible";
        eval(Tle2).left = parseInt(eval(Tle1).left) + BackX;
        eval(Tle2).top = parseInt(eval(Tle1).top) + BackY;
        var FadeID = setTimeout("Fade()", 50);
    }

    Fade();
</script>

</body>
</html>

HTML5炫酷光粒子動畫特效

HTML5确实非常强大，很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果，粒子动画在HTML5应用中也是比较消耗本地资源的，尤其是CPU，但是有些HTML5粒子效果确实能给用户带来不一样的惊艳用户体验。本文就是要分享11款效果惊艳的HTML5粒子动画特效，希望你可以喜欢。

文字自动滚屏

公众号排版中经常会使用一些特殊的样式，增加排版效果，增进跟用户之间的互动，那么文字段落滚动效果是怎么做出来的，下面就为大家带来教程。

使用SVG实现文字旋转的动画效果

CSS 3.0实现水纹晃动特效

纯CSS实现实现水纹晃动特效

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 3.0实现水纹晃动特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: '微软雅黑', sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #000;
        }

        .container {
            position: relative;
        }

        .container h2 {
            position: absolute;
            font-size: 20em;
            transform: translate(-50%, -50%);
        }

        .container h2:nth-child(1) {
            color: transparent;
            -webkit-text-stroke: 2px #03a9f4;
        }

        .container h2:nth-child(2) {
            color: #03a9f4;
            animation: animate 4s ease-in-out infinite;
        }

        @keyframes animate {
            0%,
            100% {
                clip-path: polygon(1% 65%, 32% 75%, 44% 75%, 69% 70%, 86% 62%, 97% 57%, 100% 54%, 100% 99%, 3% 100%, 1% 100%);
            }
            50% {
                clip-path: polygon(1% 73%, 24% 74%, 40% 74%, 66% 59%, 87% 50%, 97% 45%, 100% 43%, 100% 99%, 3% 100%, 1% 100%);
            }
        }
    </style>

</head>

<body>
<div class="container">
    <h2>Water</h2>
    <h2>Water</h2>
</div>
</body>

</html>

更多字体特效请看 ztf.net.cn