Примеры создания hover-эффектов для текста. Все превращения созданы с помощью CSS свойств text-shadow или box-shadow.
Демо
HTML
<h2 id="zoom-fade">Постепенное исчезновение</h2> <h2 id="glow">Свечение</h2> <h2 id="slide-up">Скольжение вверх</h2> <h2 id="slide-right">Скольжение вправо</h2> <h2 id="diag-topLeft">Диагонально сверху-влево</h2> <h2 id="flood-right">Заливание вправо</h2>
CSS
* { font-family: helvetica neue, helvetica, arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } h1, h2, p { text-align: center; display: block; width: 500px; margin: 50px auto; } @media all and (max-width: 500px) { h1, h2, p { width: 100%; } } h1 { font-weight: 200; } h2 { cursor: pointer; font-weight: 900; } p { font-weight: 200; } #zoom-fade { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; -webkit-text-shadow: 0 0 50px transparent; -moz-text-shadow: 0 0 50px transparent; -ms-text-shadow: 0 0 50px transparent; -o-text-shadow: 0 0 50px transparent; text-shadow: 0 0 50px transparent; color: rgba(0, 0, 0, 0.1); overflow: visible; } #zoom-fade:hover { -webkit-text-shadow: 0 0 0px black; -moz-text-shadow: 0 0 0px black; -ms-text-shadow: 0 0 0px black; -o-text-shadow: 0 0 0px black; text-shadow: 0 0 0px black; } #glow { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; -webkit-text-shadow: 0 0 0 transparent, 0 0 0 transparent; -moz-text-shadow: 0 0 0 transparent, 0 0 0 transparent; -ms-text-shadow: 0 0 0 transparent, 0 0 0 transparent; -o-text-shadow: 0 0 0 transparent, 0 0 0 transparent; text-shadow: 0 0 0 transparent, 0 0 0 transparent; color: rgba(0, 0, 0, 0.1); overflow: visible; } #glow:hover { color: white; -webkit-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a; -moz-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a; -ms-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a; -o-text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a; text-shadow: 0 0 10px #ff401a, 0 0 50px #ff9b1a; } #slide-up { -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; -webkit-text-shadow: 0 30px 0px transparent; -moz-text-shadow: 0 30px 0px transparent; -ms-text-shadow: 0 30px 0px transparent; -o-text-shadow: 0 30px 0px transparent; text-shadow: 0 30px 0px transparent; color: rgba(0, 0, 0, 0.1); overflow: visible; } #slide-up:hover { -webkit-text-shadow: 0 0px 0px black; -moz-text-shadow: 0 0px 0px black; -ms-text-shadow: 0 0px 0px black; -o-text-shadow: 0 0px 0px black; text-shadow: 0 0px 0px black; } #slide-right { -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; -webkit-text-shadow: -200px 0 0px transparent; -moz-text-shadow: -200px 0 0px transparent; -ms-text-shadow: -200px 0 0px transparent; -o-text-shadow: -200px 0 0px transparent; text-shadow: -200px 0 0px transparent; color: rgba(0, 0, 0, 0.1); overflow: visible; } #slide-right:hover { -webkit-text-shadow: 0px 0 0px black; -moz-text-shadow: 0px 0 0px black; -ms-text-shadow: 0px 0 0px black; -o-text-shadow: 0px 0 0px black; text-shadow: 0px 0 0px black; } #diag-topLeft { -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; -webkit-text-shadow: -30px -30px 0px transparent; -moz-text-shadow: -30px -30px 0px transparent; -ms-text-shadow: -30px -30px 0px transparent; -o-text-shadow: -30px -30px 0px transparent; text-shadow: -30px -30px 0px transparent; color: rgba(0, 0, 0, 0.1); overflow: visible; } #diag-topLeft:hover { -webkit-text-shadow: 0px 0 0px black; -moz-text-shadow: 0px 0 0px black; -ms-text-shadow: 0px 0 0px black; -o-text-shadow: 0px 0 0px black; text-shadow: 0px 0 0px black; } #flood-right { -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; -webkit-box-shadow: inset 0px 0 0 0 #ff401a; -moz-box-shadow: inset 0px 0 0 0 #ff401a; -ms-box-shadow: inset 0px 0 0 0 #ff401a; -o-box-shadow: inset 0px 0 0 0 #ff401a; box-shadow: inset 0px 0 0 0 #ff401a; color: rgba(0, 0, 0, 0.1); overflow: hidden; } #flood-right:hover { color: white; -webkit-box-shadow: inset 500px 0 0 0 #ff401a; -moz-box-shadow: inset 500px 0 0 0 #ff401a; -ms-box-shadow: inset 500px 0 0 0 #ff401a; -o-box-shadow: inset 500px 0 0 0 #ff401a; box-shadow: inset 500px 0 0 0 #ff401a; }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
я только начинаю изучать вордпресс, но от Вашего сайта я в восторге — мне, чайнику без особых знаний языков программирования, все понятно! СПАСИБО!!!!!!!!!!!!!!!
Хоть вписывайте подключение jquery и его версию, а то получается только половина примера, и взяв чужой пример донесите его до конечного потребителя в надлежащем виде.