我猜您没有使用编译版本。在您提供的示例中，这不是普通的cssscss. SCSS是的文件类型SASS, 一种汇编CSS的程序。SASS为CSS添加了许多附加功能（变量、嵌套等），这使得CSS的编写速度更快。如果您对所有这些都是新手，那么在深入研究诸如sass/scss之类的内容之前，您应该先学习css基础知识。

但是，您仍然可以很容易地使用它，您只需编译它（中有一个按钮codepen.io 上面说"view compiled").

在主题末尾添加css（我在下面包含了编译后的css）style.css 文件您可以通过访问此链接找到此文件（将example.com更改为您的站点名称）：

http://www.example.me/wp-admin/theme-editor.php

一零

a.hovereffect {
    color: #e84b82;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    box-shadow: none!important;
}

a.hovereffect:hover span {
    background: #e84b82;
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

a.hovereffect span {
    display: block;
    position: relative;
    padding: 0 4px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

a.hovereffect span:after {
    content: attr(title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 4px;
    color: #fff;
    background: #e84b82;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}
 最后要注意的是，通过将css添加到wp_head. 要使用此方法，请将以下内容添加到functions.php.
function mytheme_load_hover_css_effect() {
    ?>
    <style>
    /* custom css goes here */

    </style>
    <?php
}
add_action(\'wp_head\'. \'mytheme_load_hover_css_effect\');
 希望这对学习wp有帮助，也有乐趣！
更新：我心情很好，准备了一个插件
https://github.com/bryanwillis/hovereffect-shortcode
只需下载并作为插件上传即可。
一scss一三您也可以使用[hovereffect] 它本身将链接到当前页面并使用页面标题。