Make Spoiler Alert with Waiting Time when Hover - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Spoiler Alert with Waiting Time when Hover, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Spoiler Alert with Waiting Time when Hover
link : Make Spoiler Alert with Waiting Time when Hover

Make Spoiler Alert with Waiting Time when Hover

Spoiler alert salah satu jenis gaya spoiler yang cukup unik. Mungkin agak-agak mirip dengan trik spoiler popbox spoiler with blurred effect. Full 100% menggunakan bahasa CSS. Jika pada pop-box spoiler teks terlihat blur dan akan jelas ketika melakukan klik. Kalau pada gaya spoiler-alert, teks blur tampak dan akan jelas ketika dilakukan hover!

Vyyavlyayetʹsya , vin buv mertvyy vesʹ tsey chas. Tsey khlopetsʹ povnistyu yoho batʹko i pryntsesa yoho sestra . Vony vse alerhiya na vodu i vse vidbuvayetʹsya z prychyny. Vin vybrav odyn zaraz , ale vin ne buv pershym. Shcho dumav , shcho vin chuzhiy planeti bulo naspravdi Zemlya. Vony zvertayutʹsya lyudy odyn proty odnoho , shchob zrobyty vtorhnennya prostishe. Te , shcho vy dumaly , buly spohady diysno mayutʹ mistse v maybutnʹomu. Modelyuvannya buly realʹnymy .

Apakah sobat tertarik memasang spoiler content full stylish di atas ke dalam blog kalian?

Kode CSS:

.spoiler {
cursor: wait;
position: relative;
color: transparent;
text-align: justify;
text-shadow: 0 0 19px #000;
}
.spoiler::before, .spoiler::after {
color: #000;
display: block;
line-height: 1;
text-align: center;
text-shadow: none;
position: absolute;
font-family: arial, sans-serif;
}
.spoiler::before {
top: 19px;
left: 0;
right: 0;
font-size: inherit;
content: 'Please hover n wait 3 seconds...';
}
.spoiler::after {
top: 0;
opacity: 0;
width: 25px;
font-size: 25px;
content: '3 2 1';
line-height: 72px;
text-align: center;
left: calc(50% - 36px);
clip: rect(0, 72px, 72px, 0);
}
.spoiler:hover {
color: #000;
transition: all 1s;
transition-delay: 3s;
text-shadow: 0 0 0 transparent;
}
.spoiler:hover::before {
animation: countdown-before 4s forwards;
}
.spoiler:hover::after {
animation: countdown-after 4s forwards;
}
@keyframes countdown-before {
25% {
transform: translateY(-24px);
}
75% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-24px);
}
}
@keyframes countdown-after {
25% {
opacity: 1;
clip: rect(0, 72px, 72px, 0);
transform: translateY(0);
animation-timing-function: steps(1, start);
}
50% {
clip: rect(72px, 72px, 144px, 0);
transform: translateY(-72px);
animation-timing-function: steps(1, start);
}
75% {
opacity: 1;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
100% {
opacity: 0;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
}

Planning HTML:<p class="spoiler">

--------- CONTENT HERE ---------

</p>Source by: codepen.io/lonekorean/details/kocrl

Happy spoiler \m/

Thus articles Make Spoiler Alert with Waiting Time when Hover

that is all articles Make Spoiler Alert with Waiting Time when Hover This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Spoiler Alert with Waiting Time when Hover with the link address https://autopostingblogspot.blogspot.com/2014/07/make-spoiler-alert-with-waiting-time.html