现在需要完成这样一个需求
在鼠标移入一个按钮时,需要有一个从下到上慢慢改变背景颜色以及字体颜色的动画效果,再鼠标移出的时候,也要有一个从上到下慢慢变回原来动画的过渡效果
因为不会截动态图,因此用每个步骤来代表每一帧的样子!!
上图为一开始的样式
上图为移入鼠标后的一个中途动画效果
上图为鼠标移入后的最后一帧动画
鼠标移出时回到第一张图的过程中也会有同样的一个返回的动画效果
源码在下面,可以自取看看是不是自己正好需要的那种动画效果的实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {position: absolute;top: 0;transition: top 0.5s;/* z-index: 99; */}.box1 {position: absolute;width: 300px;text-align: center;line-height: 100px;height: 100px;font-size: 20px;z-index: 99;}.box1:hover + .box {top: -100px;}.box1:hover {color: aqua;}</style></head><body><div><!-- 可视区域 --><divstyle="width: 300px;height: 100px;overflow: hidden;position: relative;"><!-- 滑块区域 --><div class="box1">内容</div><div class="box"><divstyle="width: 300px;height: 100px;background-color: rgb(58, 148, 228);"></div><divstyle="width: 300px;height: 100px;background-color: rgb(214, 42, 42);"></div></div></div></div></body></html>
