Контактна форма на чистому HTML та CSS з використанням анімації
- Останнє оновлення: 3 Листопада 2023 р.
- Перегляди: 57
- Автор: Адмін
Колеги всім привіт.
Сьогодні ми розберемо як створити контактну форму з анімацією на чистому html та css без використання javascript коду.
HTML Код:
<body>
<div class="contact-info">
<div class="card">
<i class="icon fas fa-envelope"></i>
<div class="card-content">
<h3>Email</h3>
<span>it-inzhener.com</span>
</div>
</div>
<div class="card">
<i class="icon fas fa-phone"></i>
<div class="card-content">
<h3>Phone</h3>
<span>+8888888888</span>
</div>
</div>
<div class="card">
<i class="icon fas fa-map-marker-alt"></i>
<div class="card-content">
<h3>Location</h3>
<span>Ukraine</span>
</div>
</div>
</div>
</body>
CSS Код:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans",sans-serif;
}
body{
height: 100vh;
background-size: cover;
display: flex;
align-items: center;
background-color: #D1D5D8;
}
.contact-info{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card{
position: relative;
flex: 1;
max-width: 250px;
height: 150px;
background-color: #444;
margin: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.icon{
font-size: 30px;
color: #3498DB;
transition: .2s linear;
}
.card:hover .icon{
transform: scale(4);
opacity: 0;
}
.card-content h3,
.card-content span{
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
opacity: 0;
}
.card-content h3{
top: 22px;
text-transform: uppercase;
color: #3498DB;
}
.card-content span{
bottom: 20px;
color: #D1D5D8;
font-weight: 500;
}
.card:hover h3{
opacity: 1;
top: 45px;
transition: .3s linear .3s;
}
.card:hover span{
opacity: 1;
bottom: 45px;
transition: .2s linear .2s;
}
Дякую всім, я сподіваюся що вам моя стаття хоч чимось допомогла.
