炫酷的字体效果

Posted li1234567980

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了炫酷的字体效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>案例：炫酷的字体效果</title>
    </head>
    <style type="text/css">
        .{
            padding: 0;
            margin: 0;
        }
        body {
            width: 100vh;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #34495e;
        }
        div {
            font-size: 5em;
            font-weight: bold;
            text-transform: uppercase;
            color: #9b59b6;
        }
        div > span {
            position: relative;
            display: inline-block;
        }
        .color {
            animation-name: color;
            animation-duration: 1s;
            animation-iteration-count: 2;
            animation-timing-function: linear;
            animation-direction: alternate;
        }
        @keyframes color{
            50% {
                color: #f1c40f;
                transform: scale(2);
            }
            to{
                color: #e74c3c;
                transform: scale(0.5);
            }
        }
    </style>
    <body>
        <div>posserldm</div>
    </body>
    <script type="text/javascript">
        "use strict";
        const div = document.querySelector(‘div‘);
        [...div.textContent].reduce(function(pre, value, index) {
            pre === index && (div.innerText = ‘‘);
            let span = document.createElement(‘span‘);
            span.innerText = value;
            span.addEventListener(‘mouseover‘, function () {
                this.className = ‘color‘;
            });
            div.appendChild(span);
            span.addEventListener(‘animationend‘, function() {
                this.classList.remove(‘color‘);
                // this.className = ‘‘;
            });
        }, 0);
    </script>
</html>

 

以上是关于炫酷的字体效果的主要内容，如果未能解决你的问题，请参考以下文章

canvas - 炫酷的3D星空

一个炫酷的头像悬停效果

那些炫酷的CSS文字效果之诗词《兔》

Android 从无到有打造一个炫酷的进度条效果

炫酷的手风琴效果

使用CoordinatorLayout打造各种炫酷的效果