Mungkin diantara kalian ada yang masih bingung dengan judul artikel diatas apa, tapi jangan khawatir dibawah ini akan saya contohkan langsung maksud dari Cara Membuat Animasi Fitur Gambar dengan CSS3. Tutorial ini bisa jadi referensi buat kalian yang ingin mencoba membuat sebuah animasi. Penasaran seperti apa hasilnya ? Simak langkah-langkah nya berikut ini.
Baik langsung saja, kita akan buat 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 bisa isikan satu buah paragraf bebas, setelah struktur HTML telah dibuat langkah selanjutnya kita akan desain tampilan dengan sintak CSS3 untuk membuat 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);
}
Pada 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 semua sintak diatas kalian ketikan, langkah terkahir simpan file kemudian coba buka pada browser masing-masing dan lihat hasilnya. Selesai
Bagaimana, keren bukan animasi fitur gambar nya ? sekarang kalian sudah tau maksud dari Cara Membuat Animasi Fitur Gambar dengan CSS3. silahkan kalian coba dan kalian modifikasi lagi agar terlihat lebih bagus lagi. Selamat mencoba 🙂