效果
相当于一个小小的卡片,鼠标移到上面去的时候,会显示一些详细信息,但是详细信息是依靠一个移动的动画效果实现的,下面来让我们看看这种效果具体是怎样实现的
实现
创建所有的动画的基本原理就是,将一套 CSS 样式逐渐变化为另一套CSS样式。
像上图这种简单的动画,首先就是在图片的位置加一个hover
hover里面添加
animation: slider 0.8s; //slider是我命名的动画名字 不是关键字 后面的时间是动画时间
具体animation在CSS中的语法是这样的
然后为slider这个动画名字 添加规则
@keyframes slider {
0% {
top: 100%;
opacity: 0;
background-color: #bedbf900;
height:194px;
}
20% {
top: 20%;
opacity: 0;
background-color: #bedbf900;
height:194px;
}
100% {
top: 0;
opacity: 1
}
}
@keyframes 在CSS中的语法是这样的