Cara Membuat Animasi Fitur Gambar dengan CSS3
Mungkin diantara kalian ada yang masih bingung dengan judul artikel diatas apa, tapi jangan khawatir dibawah ini akan saya contohkan seketika maksud dari Cara Membuat Animasi Fitur Gambar dengan CSS3. Panduan ini dapat jadi referensi bikin kalian yang ingin mencoba membangun sebuah animasi. Penasaran seperti apa hasilnya ? Simak strategi nya berikut ini.
Bagus seketika saja, kita akan bikin struktur nya terlebih dahulu dengan sintak HTML berikut ini.
<body>
<div class=card transition>
<h2 class=transition>Why do we use it?</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<div class=cta-container transition><a href=# class=cta>Learn More</a></div>
<div class=card_circle transition></div>
</div>
</body>
Kalian dapat isikan satu buah paragraf bebas, setelah struktur HTML telah dikerjakan langkah berikutnya kita akan desain tampilan dengan sintak CSS3 bagi membangun animasi fitur gambarnya.
@import url('https://fonts.googleapis.com/css?family=Handlee');
body {
background: -moz-linear-gradient(top, #659dce 1%, #f274e1 50%, #f951ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #659dce 1%,#f274e1 50%,#f951ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #659dce 1%,#f274e1 50%,#f951ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#659dce', endColorstr='#f951ff',GradientType=0 ); /* IE6-9 */ }
.transition { transition: .3s cubic-bezier(.3, 0, 0, 1.3) }
.card {
background-color: #fff;
bottom: 0;
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
height: 300px;
left: 0;
margin: auto;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 300px;
}
.card:hover {
height: 450px;
width: 300px;
}
.card:hover .cta-container {
display: inline;
margin-top: 380px;
}
.card:hover .card_circle {
background-size: cover;
border-radius: 0;
margin-top: -130px;
}
.card:hover h2 {
background: #3487f7;
color: #fff;
margin-top: 100px;
padding: 5px;
}
.card:hover h2 small { color: #fff }
.card:hover p { margin-top: 300px }
.card_circle {
background: url('https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg') no-repeat center bottom;
background-color: #3487f7;
background-size: cover;
border-radius: 50%;
height: 400px;
margin-left: -75px;
margin-top: -270px;
position: absolute;
width: 450px;
}
h2 {
color: #3487f7;
font-family: 'Handlee', cursive;
font-size: 24px;
font-weight: 200;
margin-top: 150px;
position: absolute;
text-align: center;
width: 100%;
z-index: 9999;
}
p {
color: rgba(0,0,0,.6);
font-family: 'Handlee', cursive;
font-size: 100%;
font-weight: normal;
margin-top: 200px;
position: absolute;
text-align: center;
z-index: 9999;
}
.cta-container {
display: none;
margin-top: 320px;
position: absolute;
text-align: center;
width: 100%;
z-index: 9999;
}
.cta {
-moz-border-radius: 2px;
-moz-transition: 0.2s ease-out;
-ms-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
-webkit-border-radius: 2px;
-webkit-transition: 0.2s ease-out;
background-clip: padding-box;
border: 2px solid #3487f7;
border-radius: 2px;
color: #3487f7;
display: inline-block;
font-family: 'Handlee', cursive;
font-size: 17px;
font-weight: 400;
height: 36px;
letter-spacing: 0.5px;
line-height: 36px;
margin-bottom: 15px;
padding: 0 2rem;
text-decoration: none;
text-transform: uppercase;
transition: 0.2s ease-out;
}
.cta:hover {
background-color: #3487f7;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #fff;
-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}Di bagian sintak dibawah ini, silahkan kalian isikan sebuah gambar bebas.
background: url('https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg') no-repeat center bottom;Setelah segala sintak diatas kalian ketikan, langkah terkahir simpan file kemudian coba buka di browser masing-masing dan lihat hasilnya. Selesai
Bagaimana, keren bukan animasi fitur gambar nya ? kini kalian telah tau maksud dari Cara Membuat Animasi Fitur Gambar dengan CSS3. silahkan kalian coba dan kalian modifikasi lagi agar terlihat lebih bagus lagi. Selamat mencoba 🙂
Sumber https://kursuswebsite.org
