本文介绍了如何使用基础CSS创建鼠标移入显示效果。通过布局设置无序列表，结合图片和遮罩层，利用弹性盒模型或浮动布局实现图片排列。接着，通过CSS关键帧动画设置遮罩层的位置变化，当鼠标悬停在图片上时，遮罩层从边缘平滑移动到顶部。同时，还展示了中间图片的旋转效果，通过改变宽高并配合transform: rotate(360deg)实现360度旋转。
这是我的第一篇文章, 算是比较基础的css效果, 如果有什么写的不好的, 希望能让各位大佬给点意见或建议.
这是一个鼠标移入的显示效果, 效果图如下:
首先是布局:
我们使用无序列表(当然,一般在ul之外都会套一层div包裹住), 然后里面放图片(使用img标签)和遮罩(使用div标签), 具体如下:
接下来是css样式:
首先, 我们直接把全局的内外边距都清零, 并且清除ul默认的小圆点, 然后设置ul样式:
这里使用了弹性盒模型: display : flex; 来快速设置li的排列方式(不过由于css3的兼容性问题在某些浏览器可能有显示问题), (如果不使用弹性盒模型, 也可以使用浮动: float :left ,来做, 但是要记得清除浮动来防止父元素塌陷. ).
设置li样式:
给li 加相对定位, 使得里面的遮罩div能以li为参考对象进行定位.
设置img样式:
设置遮罩层:
接下来就是这个效果的重点--动画设置:
最低0.47元/天 解锁文章
扫一扫
2932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
