Домой / Рецепты CSS / Эффект размытия (blur effect) для оповещения о спойлере
Эффект размытия (blur effect) для оповещения о спойлере

Эффект размытия (blur effect) для оповещения о спойлере

Крутая идея оповещения о спойлере в тексте, которая реализована благодаря эффекту размытия.

Текст будет оставаться размыт до тех пор, пока пользователь не наведет мышкой на тект оповещения о спойлере. Эффект размытия текста реализован с помощью CSS.

Демо

HTML

<p>
 Big spoilers below! Hover to reveal...
</p>
<p class="spoiler">
 Turns out he was dead the whole time. That guy is totally his father and the princess is his sister. They're all allergic to water and everything happens for a reason. He's the chosen one now, but he wasn't the first. What he thought was an alien planet was actually Earth. They turn the humans against each other to make the invasion easier. What you thought were flashbacks actually take place in the future. They simulations were real.
</p>
<p>
 End spoilers. Now you know everything.
</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Arimo|Fjalla+One);

*, *::before, *::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

body {
 padding: 0 10%;
 font: 24px/1.5 'Arimo', sans-serif;
 color: #55657a;
 background-color: #fff;
}

p {
 text-align: justify;
}

.spoiler {
 position: relative;
 color: transparent;
 text-shadow: 0 0 20px #55657a;
 cursor: help;
}

.spoiler::before, .spoiler::after {
 display: block;
 position: absolute;
 line-height: 1;
 font-family: 'Fjalla One', sans-serif;
 color: #872e27;
 text-align: center;
 text-shadow: none;
}

.spoiler::before {
 top: 36px;
 left: 0;
 right: 0;
 font-size: 72px;
 content: 'SPOILER ALERT';
}

.spoiler::after {
 opacity: 0;
 top: 84px;
 left: -webkit-calc(50% - 36px);
 left: calc(50% - 36px);
 width: 60px;
 font-size: 60px;
 line-height: 72px;
 text-align: center;
 clip: rect(0, 72px, 72px, 0);
 content: '3 2 1';
}

.spoiler:hover {
 color: #55657a;
 text-shadow: 0 0 0 transparent;
 -webkit-transition: all 1s;
 transition: all 1s;
 -webkit-transition-delay: 4s;
 transition-delay: 4s;
}

.spoiler:hover::before {
 -webkit-animation: countdown-before 5s forwards;
 animation: countdown-before 5s forwards;
}

.spoiler:hover::after {
 -webkit-animation: countdown-after 5s forwards;
 animation: countdown-after 5s forwards;
}

@-webkit-keyframes countdown-before {
 25% {
 -webkit-transform: translateY(-24px);
 transform: translateY(-24px);
 }
 75% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 -webkit-transform: translateY(-24px);
 transform: translateY(-24px);
 }
}

@keyframes countdown-before {
 25% {
 -webkit-transform: translateY(-24px);
 transform: translateY(-24px);
 }
 75% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 -webkit-transform: translateY(-24px);
 transform: translateY(-24px);
 }
}

@-webkit-keyframes countdown-after {
 25% {
 opacity: 1;
 clip: rect(0, 72px, 72px, 0);
 -webkit-transform: translateY(0);
 transform: translateY(0);
 -webkit-animation-timing-function: steps(1, start);
 animation-timing-function: steps(1, start);
 }
 50% {
 clip: rect(72px, 72px, 144px, 0);
 -webkit-transform: translateY(-72px);
 transform: translateY(-72px);
 -webkit-animation-timing-function: steps(1, start);
 animation-timing-function: steps(1, start);
 }
 75% {
 opacity: 1;
 clip: rect(144px, 72px, 216px, 0);
 -webkit-transform: translateY(-144px);
 transform: translateY(-144px);
 }
 100% {
 opacity: 0;
 clip: rect(144px, 72px, 216px, 0);
 -webkit-transform: translateY(-144px);
 transform: translateY(-144px);
 }
}

@keyframes countdown-after {
 25% {
 opacity: 1;
 clip: rect(0, 72px, 72px, 0);
 -webkit-transform: translateY(0);
 transform: translateY(0);
 -webkit-animation-timing-function: steps(1, start);
 animation-timing-function: steps(1, start);
 }
 50% {
 clip: rect(72px, 72px, 144px, 0);
 -webkit-transform: translateY(-72px);
 transform: translateY(-72px);
 -webkit-animation-timing-function: steps(1, start);
 animation-timing-function: steps(1, start);
 }
 75% {
 opacity: 1;
 clip: rect(144px, 72px, 216px, 0);
 -webkit-transform: translateY(-144px);
 transform: translateY(-144px);
 }
 100% {
 opacity: 0;
 clip: rect(144px, 72px, 216px, 0);
 -webkit-transform: translateY(-144px);
 transform: translateY(-144px);
 }
}

Крутая идея оповещения о спойлере в тексте, которая реализована благодаря эффекту размытия. Текст будет оставаться размыт до тех пор, пока пользователь не наведет мышкой на тект оповещения о спойлере. Эффект размытия текста реализован с помощью CSS. HTML &lt;p&gt; Big spoilers below! Hover to reveal... &lt;/p&gt; &lt;p class=&quot;spoiler&quot;&gt; Turns out he was dead the whole time. That guy is totally his father and the princess is his sister. They're all allergic to water and everything happens for a reason. He's the chosen one now, but he wasn't the first. What he thought was an alien&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 2 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*