background-image虽然不支持CSS3 transition过渡,但是background-position支持啊,于是,通过控制背景位置,我们是可以实现渐变过渡效果的。
实现效果如下(鼠标hover):
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡,但是background-color支持啊,于是,通过控制背景颜色,和一个颜色呈现技巧,我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比:
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果,通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果:
相关代码如下:
扩展资料:mozilla 使用 CSS transitions
这几年设计圈比较流行高饱和度渐变色和弥散阴影效果,弥散阴影有一个特点就是投影的颜色和物体颜色保持一致,下面来介绍运用css3实现的弥散阴影幽灵按钮,效果如下图所示。
首先搭建结构。按钮整体用一个盒子div承载,设置类名为btns,每个按钮用a标签。弥散阴影和小箭头我们使用伪元素:before和:after去制作。
书写css样式,实体化a标签作为按钮,添加渐变背景色。
弥散阴影使用伪元素:before实体化定位制作,注意背景颜色继承父元素,层级设置为-1在按钮的下方,添加filter:blur(5px)滤镜属性设置投影为高斯模糊并且调整定位坐标向下。
样式书写完毕,按钮的静态效果已经实现,如下图所示。
添加鼠标移上小箭头出现移动效果。
小箭头我们使用伪元素:after去制作。设置小箭头默认透明度opacity:0,鼠标移上设置透明度为1,显示小箭头,注意添加transition过渡会有淡入显示视觉效果。
鼠标移上a设置:after添加animation动画控制水平位移transform:translateX()。
添加小箭头后,鼠标移上效果如下图。
添加线框滑动效果。这个效果需要在a标签内部添加四个span定位并实体化,背景颜色继承父元素,层级z-index设置为-1在按钮的下方,并且给线框设置四个不同方向的位移,把线框移动到按钮外面。
线框实体化后效果如下图。
设置线框初始不透明度为0,鼠标移上按钮a,把线框位移回原来的位置transform:translate(0,0),并且把不透明的设置为1,添加过渡效果transition。
最终效果如下图。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)