CSS 最简洁hover事件的淡入淡出写法,且不占文档流位置!

html-css015

CSS 最简洁hover事件的淡入淡出写法,且不占文档流位置!,第1张

关于CSS的特效,大部分都是使用了hover事件,或者你再完成一些特殊要求的时候,你会使用mouseenter和mouseleave来代替hover,我就遇到过一种就是鼠标移开时,悬浮显示的元素依然占了文档流,而且你不能使用display:none来隐藏他,这样的话,过渡效果会受到影响!

最简单的hover写法,淡入淡出,关键在于pointer-events的使用,保证淡入淡出都有过渡效果的同时,子元素不会被父元素hover事件所影响!

上面的是CSS的属性。这个是css的滤镜效果。1.Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 透明度 起始透明度 结束时透明度样式“1.2.3”坐标。2.Glow(Color=#0000ff, Strength=5) 边缘发光颜色 大小3.BlendTrans(Duration=?) 淡入淡出方向4.Blur(Add=?, Direction=?, Strength=?) 模糊 是否模糊 方向 大小5.Chroma(Color=?) 透明颜色(只有透明图像gif可以用这个效果)6.DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 投影 颜色 坐标大小7.FlipH 水平反转8.FlipV 垂直反转9.Glow(Color=?, Strength=?) 边缘发光 颜色大小10.Gray 灰度11.Invert 负片(胶片)12.Light 亮度(变亮、波纹光影)13.Mask(Color=?) 遮罩 颜色 (凹陷效果)14.RevealTrans(Duration=?, Transition=?) 动态切换 (切换时间切换效果:1-23种切换方式)15.Shadow(Color=?, Direction=?)16.Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) 垂直扭曲17.Xray X光片效果我们的网名一样,所以我认真的回答了你的问题。有缘啊

如果帮助到您,请记得采纳为满意答案哈,谢谢!祝您生活愉快! vae.la