Как я могу добавить этот конкретный эффект наведения на сайт WP?

Как я могу использовать этот эффект css на сайте WP?

Я пробовал все виды копий, но это никуда меня не достает.

Я немного новичок в WordPress и css, поэтому я почти не знаю, что делать.

благодаря

Изменить, чтобы задать вопросы, совместимые с Stackexchange:

Проблема заключалась в том, что я копировал и вставлял код в codepen.io в мою тему custom css.

Но, как указал Брайан ниже, я использовал неправильный тип css. Я просто вставил css, который он предоставил, и он работает отлично.

Спасибо вам всем.

Solutions Collecting From Web of "Как я могу добавить этот конкретный эффект наведения на сайт WP?"

Я предполагаю, что вы не использовали скомпилированную версию. Это не нормальный css в примере, который вы предоставили, это scss . SCSS – это тип файла для SASS , программа, которая собирает CSS. SASS добавляет множество дополнительных функциональных возможностей для CSS (переменные, вложенность и т. Д.), Что ускоряет запись CSS. Если вы новичок во всем этом, вам нужно изучить основы CSS, прежде чем погрузиться в нечто вроде sass / scss.

Тем не менее, вы все равно можете использовать его довольно просто, вам просто нужно его скомпилировать (есть кнопка в codepen.io которая говорит «скомпилированный вид» ).

Добавьте css (я включил скомпилированный css ниже) в конец вашего файла style.css . Вы сможете найти этот файл, посетив эту ссылку (сменив example.com на название вашего сайта):

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

Если по какой-то причине этот файл не загружается в вашу тему, вы можете установить его так же, как и выше. Есть генератор, который вы можете использовать, чтобы упростить добавление таблиц стилей, скриптов и т. Д.

Вот скомпилированный CSS:

 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

Просто скачайте и загрузите его как плагин.

Useage:

[hovereffect url="http://google.com" text="google"]

Вы также можете просто использовать [hovereffect] самостоятельно, который будет ссылаться на текущую страницу и использовать заголовок страницы.