CSS

wordpress字体样式——css炫酷的字体样式实现

Nick · 1月28日 · 2020年 · 本文9740字 · 阅读25分钟716

demo1:css实现颜色变化

效果如图所示
wordpress字体样式——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>Document</title>
    <style>
        body {
        background: #000;
    }
    .container {
        width: 600px;
        margin: 100px auto 0;
    }
    p {
        font-family: 'Audiowide';
        text-align: center;
        color: #00a67c;
        font-size: 7em;
        -webkit-transition: all 1.5s ease;
                transition: all 1.5s ease;
    }
    p:hover {
        color: #fff;
        -webkit-animation: Glow 1.5s ease infinite alternate;
                animation: Glow 1.5s ease infinite alternate;

    }
    @-webkit-keyframes Glow {
        from {
            text-shadow: 0 0 10px #fff,
                         0 0 20px #fff,
                         0 0 30px #fff,
                         0 0 40px #00a67c,
                         0 0 70px #00a67c,
                         0 0 80px #00a67c,
                         0 0 100px #00a67c,
                         0 0 150px #00a67c;
        }
        to {
            text-shadow: 0 0 5px #fff,
                         0 0 10px #fff,
                         0 0 15px #fff,
                         0 0 20px #00a67c,
                         0 0 35px #00a67c,
                         0 0 40px #00a67c,
                         0 0 50px #00a67c,
                         0 0 75px #00a67c;
        }
    }
    @keyframes Glow {
        from {
            text-shadow: 0 0 10px #fff,
                         0 0 20px #fff,
                         0 0 30px #fff,
                         0 0 40px #00a67c,
                         0 0 70px #00a67c,
                         0 0 80px #00a67c,
                         0 0 100px #00a67c,
                         0 0 150px #00a67c;
        }
        to {
            text-shadow: 0 0 5px #fff,
                         0 0 10px #fff,
                         0 0 15px #fff,
                         0 0 20px #00a67c,
                         0 0 35px #00a67c,
                         0 0 40px #00a67c,
                         0 0 50px #00a67c,
                         0 0 75px #00a67c;
        }
    }
    </style>
</head>
<body>
    <div class="container">
        <p>左眼会陪右眼哭の博客</p>
    </div>


</body>
</html>

demo2：css实现鼠标悬停炫酷效果

效果如图所示（有动画效果）
wordpress字体样式——css炫酷的字体样式实现-左眼会陪右眼哭の博客
代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            .but{
                border: 2px solid #f35626;
                padding: 1.5rem;
                color: #f35626;
                -webkit-animation: hue 1s infinite linear;
                background-color: transparent;
                -webkit-appearance:none;
                border-radius: 10px;
            }
            @-webkit-keyframes hue {
              from {
                -webkit-filter: hue-rotate(0deg);
              }

              to {
                -webkit-filter: hue-rotate(-360deg);
              }
            }

            .title{
                color: #f35626;
                /*font-size: 6rem;*/
                background-image:-webkit-linear-gradient(92deg,#f35626,#feab3a);
                -webkit-animation: hue 2s infinite linear;
                -webkit-text-fill-color: transparent;
                -webkit-background-clip:text;
            }


        </style>
    </head>
    <body>
        <h4 class="title">animate css</h4>
        <button type="button" class="but">左眼会陪右眼哭の博客</button>
    </body>
</html>

demo3霓虹特效（加旋转特效）

效果如图所示
wordpress字体样式——css炫酷的字体样式实现-左眼会陪右眼哭の博客
实现代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {

            background-color: #000000;
        }

        #logo {
            position: absolute;
            top: 200px;
            left: 40%;
            font-weight: 600;
            font-size: 50px;
            font-family: "华文行楷";
            color: #8c888b;
            background: -webkit-linear-gradient(45deg,red,green,blue,pink,orange, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
            color: transparent;
            /*设置字体颜色透明*/
            -webkit-background-clip: text;
            /*背景裁剪为文本形式*/
            animation: ran 3s linear infinite;
            /*动态10s展示*/
        }

        #logo:hover {
            animation-play-state: paused;
            animation: 1s 0.1s normal 1 running spin;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }

        @-webkit-keyframes spin {
            0% {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes ran {
            from {
                backgroud-position: 0 0;
            }

            to {
                background-position: 2000px 0;
            }
        }
    </style>
</head>

<body>
    <a class="navbar-brand" id="logo" href="#" rel="nofollow noopener" >左眼会陪右眼哭の博客  </a>
</body>

</html>

demo4抖动特效

wordpress字体样式——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>Document</title>
    <style>
        .shaky {
            display: inline-block;

            padding: 1px;
            font-size: 25px;
            color: chartreuse;
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation-name: shaky-slow;
            -ms-animation-name: shaky-slow;
            animation-name: shaky-slow;
            -webkit-animation-duration: 4s;
            -ms-animation-duration: 4s;
            animation-duration: 4s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-delay: 0s;
            -ms-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-play-state: running;
            -ms-animation-play-state: running;
            animation-play-state: running;

        }

        @-webkit-keyframes shaky-slow {
            0% {
                -webkit-transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg)
            }

            4% {
                -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)
            }

            6% {
                -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)
            }

            8% {
                -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)
            }

            10% {
                -webkit-transform: translate(1.4px, 0px) rotate(-2deg)
            }

            12% {
                -webkit-transform: translate(-1.3px, -1px) rotate(-2deg)
            }

            14% {
                -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)
            }

            16% {
                -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)
            }

            18% {
                -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)
            }

            20% {
                -webkit-transform: translate(1px, 1px) rotate(-0.5deg)
            }

            22% {
                -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)
            }

            24% {
                -webkit-transform: translate(-1.4px, -1px) rotate(2deg)
            }

            26% {
                -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)
            }

            28% {
                -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)
            }

            30% {
                -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
            }

            32% {
                -webkit-transform: translate(-1px, 0px) rotate(2deg)
            }

            34% {
                -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)
            }

            36% {
                -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)
            }

            38% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)
            }

            40% {
                -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)
            }

            42% {
                -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
            }

            44% {
                -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)
            }

            46% {
                -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
            }

            48% {
                -webkit-transform: translate(1px, 1.6px) rotate(1.5deg)
            }

            50% {
                -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)
            }

            52% {
                -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)
            }

            54% {
                -webkit-transform: translate(1.6px, -1px) rotate(-2deg)
            }

            56% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)
            }

            58% {
                -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)
            }

            60% {
                -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)
            }

            62% {
                -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
            }

            64% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            66% {
                -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)
            }

            68% {
                -webkit-transform: translate(0px, -1.6px) rotate(-2deg)
            }

            70% {
                -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)
            }

            72% {
                -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            74% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)
            }

            76% {
                -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)
            }

            78% {
                -webkit-transform: translate(-1px, 1.4px) rotate(2deg)
            }

            80% {
                -webkit-transform: translate(1.4px, 1.6px) rotate(2deg)
            }

            82% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
            }

            84% {
                -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)
            }

            86% {
                -webkit-transform: translate(1px, 1.4px) rotate(-2deg)
            }

            88% {
                -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
            }

            90% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            92% {
                -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            94% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            96% {
                -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)
            }

            98% {
                -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)
            }
        }

        @keyframes shaky-slow {
            0% {
                transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                transform: translate(-1px, 1.5px) rotate(1.5deg)
            }

            4% {
                transform: translate(1.3px, 0px) rotate(-0.5deg)
            }

            6% {
                transform: translate(1.4px, 1.4px) rotate(-2deg)
            }

            8% {
                transform: translate(-1.3px, -1px) rotate(-1.5deg)
            }

            10% {
                transform: translate(1.4px, 0px) rotate(-2deg)
            }

            12% {
                transform: translate(-1.3px, -1px) rotate(-2deg)
            }

            14% {
                transform: translate(1.5px, 1.3px) rotate(1.5deg)
            }

            16% {
                transform: translate(1.5px, -1.5px) rotate(-1.5deg)
            }

            18% {
                transform: translate(1.3px, -1.3px) rotate(-2deg)
            }

            20% {
                transform: translate(1px, 1px) rotate(-0.5deg)
            }

            22% {
                transform: translate(1.3px, 1.5px) rotate(-2deg)
            }

            24% {
                transform: translate(-1.4px, -1px) rotate(2deg)
            }

            26% {
                transform: translate(1.3px, -1.3px) rotate(0.5deg)
            }

            28% {
                transform: translate(1.6px, -1.6px) rotate(-1.5deg)
            }

            30% {
                transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
            }

            32% {
                transform: translate(-1px, 0px) rotate(2deg)
            }

            34% {
                transform: translate(1.3px, 1.3px) rotate(-0.5deg)
            }

            36% {
                transform: translate(1.3px, 1.6px) rotate(1.5deg)
            }

            38% {
                transform: translate(1.3px, -1.6px) rotate(1.5deg)
            }

            40% {
                transform: translate(-1.4px, -1px) rotate(-0.5deg)
            }

            42% {
                transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
            }

            44% {
                transform: translate(-1.6px, 1.4px) rotate(0.5deg)
            }

            46% {
                transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
            }

            48% {
                transform: translate(1px, 1.6px) rotate(1.5deg)
            }

            50% {
                transform: translate(1.6px, 1.6px) rotate(1.5deg)
            }

            52% {
                transform: translate(-1.4px, 1.6px) rotate(0.5deg)
            }

            54% {
                transform: translate(1.6px, -1px) rotate(-2deg)
            }

            56% {
                transform: translate(1.3px, -1.6px) rotate(-2deg)
            }

            58% {
                transform: translate(-1.3px, -1.6px) rotate(0.5deg)
            }

            60% {
                transform: translate(1.3px, 1.6px) rotate(-0.5deg)
            }

            62% {
                transform: translate(0px, 0px) rotate(-1.5deg)
            }

            64% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            66% {
                transform: translate(1.6px, -1.6px) rotate(0.5deg)
            }

            68% {
                transform: translate(0px, -1.6px) rotate(-2deg)
            }

            70% {
                transform: translate(-1.6px, 1px) rotate(1.5deg)
            }

            72% {
                transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            74% {
                transform: translate(1.3px, -1.6px) rotate(-0.5deg)
            }

            76% {
                transform: translate(1.4px, 1px) rotate(-0.5deg)
            }

            78% {
                transform: translate(-1px, 1.4px) rotate(2deg)
            }

            80% {
                transform: translate(1.4px, 1.6px) rotate(2deg)
            }

            82% {
                transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
            }

            84% {
                transform: translate(-1.4px, 1.4px) rotate(-2deg)
            }

            86% {
                transform: translate(1px, 1.4px) rotate(-2deg)
            }

            88% {
                transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
            }

            90% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            92% {
                transform: translate(-1.4px, 1.6px) rotate(2deg)
            }

            94% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            96% {
                transform: translate(-1.4px, 1.3px) rotate(-2deg)
            }

            98% {
                transform: translate(1.3px, 1px) rotate(-0.5deg)
            }
        }
    </style>
</head>

<body>
    <span class="shaky">你在说什么( ,,´･ω･)ﾉ"(´っω･｀｡)</span>

</body>

</html>

小结

这些都是自己在使用wordpress时想要更选一点的样式效果，整理出来的css样式，虽然现在还看不太懂，因为css真的博大精深，但是能够看得懂，然后修改成自己想要实现的效果，那就OK了，至于学的话，慢慢来。嘻嘻嘻 ^~^ !
ps:这是自己使用css实现的博客效果图
wordpress字体样式——css炫酷的字体样式实现-左眼会陪右眼哭の博客

相关文章

wordpress优化经历（五）——添加微语说说模块

10月22日 · 2021年

wordpress优化经历（四）——一把伞的时间轴归档页模板

8月14日 · 2021年

wordpress优化经历（三）——自助友链申请实现

8月14日 · 2021年

wordpress优化经历（二）——七牛云加速

8月14日 · 2021年
0 条回应
©2021版权所有
在线人数：1人 来访统计
隐藏