Hoạt ảnh CSS cho phép chúng tôi hiển thị các phần tử ẩn.
Ví dụ sau đây cho thấy cách chúng tôi có thể hiển thị các phần tử bằng cách sử dụng hoạt ảnh CSS.
Ví dụ
<!DOCTYPE html>
<html>
<style>
.item {
position: relative;
perspective: 1000px;
}
.demo, .hidden-one {
background: lightgreen;
box-shadow: 0 5px 12px rgba(0,0,0,0.6);
}
.item:hover .hidden-one{
animation: yoyo 1.4s backwards ease;
}
.item:hover .demo {
animation-name: yo 1s ease;
}
.demo {
position: absolute;
height: 150px;
width: 150px;
background-color: firebrick;
border-radius: 50%;
left: 100px;
top: 50px;
z-index: 2;
}
.hidden-one {
background-color: #880;
border-radius: 3px;
height: 120px;
width: 55px;
position: absolute;
left: 280px;
top: 140px;
opacity: 0;
transition: opacity 0.8s;
}
@keyframes yoyo {
0% {
top: 140px;
opacity: 0;
left: 70px;
z-index: 1;
}
50% {
left: 12px;
opacity: 1;
z-index: 2;
top: 140px;
}
100% {
opacity: 1;
left: 150px;
z-index: 3;
}
}
@keyframes yo {
0% {
}
30% {
transform: rotate3D(-1,1,0.1,10deg) scale(1.05);
}
50% {
transform: rotate3D(1,-1,0.1,10deg) scale(1.05);
}
100% {
}
}
</style>
<body>
<div class="item">
<div class="hidden-one"></div>
<div class="demo"></div>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
