cara membuat efek berkedip pada tulisan / text dengan css
Assalamualaikum wr.wb
Selamat malam semuanya,
kali ini saya akan memberikan sedikit tutorial bagaimana caranya membuat efek berkedip pada tulisan dengan css (casding style sheets)
oke sebelumnya saya akan menjelaskan sedikt tentang css.
CSS adalah kepanjangan dari Casding Style Sheets ya itu bahasa pemrograman web untuk memberi sentuhan gaya pada element atau struktur web yang di buat dengan HTML.
oke langsung ke tutorialnya ajh
Baca juga :rekomendasi-framework-css dan
cara-konfigurasi-router-pada-debian
pertama kalian siapkan file yang bernama index.html
lallu kalian isi dengan script di bawah ini.
save index.html
selanjutnya kalian bikin file kedua dengan nama style.css
save style.css
atau kalian bisa membuat html dan css nya dalam satu file.
save satufile.html
Selamat malam semuanya,
kali ini saya akan memberikan sedikit tutorial bagaimana caranya membuat efek berkedip pada tulisan dengan css (casding style sheets)
oke sebelumnya saya akan menjelaskan sedikt tentang css.
CSS adalah kepanjangan dari Casding Style Sheets ya itu bahasa pemrograman web untuk memberi sentuhan gaya pada element atau struktur web yang di buat dengan HTML.
oke langsung ke tutorialnya ajh
Baca juga :rekomendasi-framework-css dan
cara-konfigurasi-router-pada-debian
pertama kalian siapkan file yang bernama index.html
lallu kalian isi dengan script di bawah ini.
save index.html
<!DOCTYPE html>
<head>
<title>Berkedip</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<iframe width="0" height="0"
src="ini jika kalian mau tambahinl lagu" frameborder="0" allowfullscreen>
</iframe>
</body>
</html>
selanjutnya kalian bikin file kedua dengan nama style.css
save style.css
html {
background-color: black;
color: white;
text-shadow: 0 0 50px blue;
overflow: hidden;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: medium;
}
body:after {
content: 'www.ibrahim-id.zone.id';
font-family: Gill Sans;
font-size: 70px;
text-align: center;
width: 100%;
margin: auto;
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: white;
-webkit-animation: noise-1 .2s linear infinite;
animation: noise-1 .2s linear infinite;
}
body:before {
content: 'www.ibrahim-id.zone.id';
font-family: Gill Sans;
font-size: 70px;
text-align: center;
width: 100%;
margin: auto;
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: white;
-webkit-animation: noise-2 .2s linear infinite;
animation: noise-2 .2s linear infinite;
}
@-webkit-keyframes noise-1 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: 2px;
}
}
@keyframes noise-1 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: 2px;
}
}
@-webkit-keyframes noise-2 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: -2px;
}
}
@keyframes noise-2 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: 6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: -2px;
}
}
atau kalian bisa membuat html dan css nya dalam satu file.
save satufile.html
<!DOCTYPE html>
<head>
<title>Berkedip</title>
<link rel="stylesheet" href="style.css">
<link rel='shortcut icon' type='image/x-icon'
href='https://img.deusm.com/darkreading/bh-asia-facebook-profile.png'>
<style>
html {
background-color: black;
color: white;
text-shadow: 0 0 50px blue;
overflow: hidden;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: medium;
}
body:after {
content: 'www.ibrahim-id.zone.id';
font-family: Gill Sans;
font-size: 70px;
text-align: center;
width: 100%;
margin: auto;
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: white;
-webkit-animation: noise-1 .2s linear infinite;
animation: noise-1 .2s linear infinite;
}
body:before {
content: 'www.ibrahim-id.zone.id';
font-family: Gill Sans;
font-size: 70px;
text-align: center;
width: 100%;
margin: auto;
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: white;
-webkit-animation: noise-2 .2s linear infinite;
animation: noise-2 .2s linear infinite;
}
@-webkit-keyframes noise-1 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: 2px;
}
}
@keyframes noise-1 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: 2px;
}
}
@-webkit-keyframes noise-2 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: -2px;
}
}
@keyframes noise-2 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: 6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: -2px;
}
}
</style>
</head>
<body>
<iframe width="0" height="0" src="ini jika kalian mau tambahinl lagu"
frameborder="0" allowfullscreen></iframe>
</body>
</html>
sekian dari saya semoga bermanfaat
waalaikumsalam wr.wb
0 Response to "cara membuat efek berkedip pada tulisan / text dengan css"
Post a Comment