数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学使用 CSS 动画显示隐藏元素
CSS 动画允许我们显示隐藏元素。可以使用 opacity 属性设置元素为隐藏状态。将 opacity 设置为 0，元素将隐藏。要显示它，请设置 transition 属性以及 opacity 属性，并设置 transition duration 属性以使其看起来像淡入效果。
设置容器
设置容器 div。在其中，设置两个子 div：
<div class="item"> <div class="hidden-one"></div> <div class="demo"></div> </div>
隐藏子 div
将子 div 的 opacity 值设置为 0，使其在页面加载时不可见。此处为相同的 opacity 属性设置了 transition：
.hidden-one {
background-color: #880;
border-radius: 3px;
height: 120px;
width: 55px;
position: absolute;
left: 280px;
top: 140px;
opacity: 0;
transition: opacity 0.8s;
}
显示另一个 div
另一个 div 以圆圈的形式显示；
.demo {
position: absolute;
height: 150px;
width: 150px;
background-color: firebrick;
border-radius: 50%;
left: 100px;
top: 50px;
z-index: 2;
}
悬停 div 以显示隐藏的 div
当悬停在圆圈 div 上时，隐藏的 div 将使用 animation 属性显示动画。动画名称为 yo，持续时间为 1 秒。
animation 属性也用于动画：
animation-name: yo 1s ease;
上面设置了 animation 简写属性：
animation-name 设置为 yo。
animation duration 设置为 1s，即 1 秒
animation-timing-function 设置动画的速度曲线。ease 的起始速度较慢，然后加快，最后缓慢结束
这里是：
.item:hover .demo {
animation-name: yo 1s ease;
}
动画规则
使用 @keyframes 设置动画规则：
@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% {
}
}
示例
下面的示例显示了如何使用 CSS 动画显示元素。
<!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>
更新于：2023年12月26日
1K+ 次浏览
广告