2021-08-28

HTML与CSS设置一个鼠标悬停动画效果

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具：   DW                           

关键技术：   HTML+CSS                     

作者：晨疯

撰写时间：2021/02/28

1. 先看效果图（是视频就更加直观）；

2.这是我的html结构；

（1）①放两个span标签，作用是制造从两边收起来的错觉

（2）②设置图片的高度与宽度；高宽度与最大的盒子（.picBox）一致；

3.css样式

（1）③和④relative 相对定位；

          absolute 绝对定位：

         让子代元素以.picBox为基点的定位

（2）⑤ opacity是元素的透明度，span的透明度一般不超过0.6

（3）⑥让两个span倾斜平分.picBox，之后定位设置left值（一个在左上方，另一个在右下方），然后配合.picBox设置的 overflow：hidden span隐藏

（4）下面是.textBox的部分。

（5）⑨设置的opacity值要比⑤的opacity值大两个点以上，这样的效果个人感觉会好亿点；

（6）⑩transition 设置的位置，它设置在鼠标悬停（hover）后面的.textBox；

（7）例如像.textBox设置了鼠标悬停，所以transition设置在⑫的位置上；

好了，这次的东西很简单，还有很多类似效果做法

有想法的同僚们也可以发上来一起交流！！！