CSS3之传说中的幽灵按钮详解
资讯
2024-01-06
476
大家好,自CSS3诞生之日起,网页特效较之以往变得越来越简单,样式也越来越多,那么今天我们来分享下所谓幽灵按钮的实现方法,首先我们来看下效果:
幽灵按钮
1.结构分析
基本结构图解
由上图不难看出,该示例主要由三部分组成,每部分各包含一个图标(由背景图像生成)和一个按钮(由带边框的超链接生成),按钮中有一个右指向的箭头(也由背景图像生成),除此之外,在效果图中,当鼠标滑过按钮时有四条线从四个方向飞入与按钮边框重合,这个可以用四对标签生成,之后通过CSS设置效果。
综上可得html结构如下:
HTML结构
2.样式设置
基本样式:消除默认样式,给一个背景颜色,外围盒子设置一定的宽高并居中对齐。
基本样式
基本布局:通过浮动实现三列布局,设置相应的宽高和外边距。
基本布局
图标背景设置:给用于放置图标背景的设置inline-block,并给定相应的宽高,然后三个图标分别以背景图像的方式添加,并根据实际效果调整大小(要略小于父元素框,因为后面有放大的动画效果),居中放置。
背景图标设置
图标动画设置:设置鼠标滑过动画这里主要用到两个动画效果,一个是旋转rotate一个是缩放scale,这里要强调的一点是CSS3中很多动画效果都需要配合配合过渡属性transiton使用,否则过渡时长为0,就不会呈现动画效果,呈现的是动画后的最终状态。
图标动画
按钮样式设置:这里的按钮由一个超链接生成,首先将其display属性设置为block,给定适当的宽高,2个像素透明度为0.7的边框(设置透明度是为了后面边框飞入动画附带边框变亮效果),右指向箭头由背景图像生成,根据情况设置合适的大小放在靠右的位置,设置position和transition属性为后面定义动画做准备。
按钮样式
添加按钮动画:首先设置鼠标滑过时边框变亮,右指向箭头向右移动10个像素
述
接下来就是边框飞入效果,这里我们只以上边框为例,首先设置起始状态时的样式(也是公用部分),从效果图中可以看出,飞入的边框开始时在上边框的水平左侧但是看不见的,所以给background属性设为none宽度设为0,给一个2个像素的高度,与固有边框相同,position为绝对定位left:-100%(top给了一个-1px是根据实际效果调的)。
当鼠标滑过时开始出现,背景变为白色(开始显现),宽度逐渐变为180px与固有边框接近,位置最终向右移动到left:-1px的位置。
此处的原理是:开始时设置一个状态和位置,鼠标滑过时设置一个状态和位置,然后通过transition过渡属性使其慢慢呈现出来,产生动画效果。
公共部分
top
其余部分设置可根据上边框做相应变化得到,下面给出剩余代码:
bottom
left
right
声明:本人也是小白一枚,此文只为相互交流,未经修改,如有错误请多指正!
本站涵盖的内容、图片、视频等数据系网络收集,部分未能与原作者取得联系。若涉及版权问题,请联系我们删除!联系邮箱:ynstorm@foxmail.com 谢谢支持!
大家好,自CSS3诞生之日起,网页特效较之以往变得越来越简单,样式也越来越多,那么今天我们来分享下所谓幽灵按钮的实现方法,首先我们来看下效果:
幽灵按钮
1.结构分析
基本结构图解
由上图不难看出,该示例主要由三部分组成,每部分各包含一个图标(由背景图像生成)和一个按钮(由带边框的超链接生成),按钮中有一个右指向的箭头(也由背景图像生成),除此之外,在效果图中,当鼠标滑过按钮时有四条线从四个方向飞入与按钮边框重合,这个可以用四对标签生成,之后通过CSS设置效果。
综上可得html结构如下:
HTML结构
2.样式设置
基本样式:消除默认样式,给一个背景颜色,外围盒子设置一定的宽高并居中对齐。
基本样式
基本布局:通过浮动实现三列布局,设置相应的宽高和外边距。
基本布局
图标背景设置:给用于放置图标背景的设置inline-block,并给定相应的宽高,然后三个图标分别以背景图像的方式添加,并根据实际效果调整大小(要略小于父元素框,因为后面有放大的动画效果),居中放置。
背景图标设置
图标动画设置:设置鼠标滑过动画这里主要用到两个动画效果,一个是旋转rotate一个是缩放scale,这里要强调的一点是CSS3中很多动画效果都需要配合配合过渡属性transiton使用,否则过渡时长为0,就不会呈现动画效果,呈现的是动画后的最终状态。
图标动画
按钮样式设置:这里的按钮由一个超链接生成,首先将其display属性设置为block,给定适当的宽高,2个像素透明度为0.7的边框(设置透明度是为了后面边框飞入动画附带边框变亮效果),右指向箭头由背景图像生成,根据情况设置合适的大小放在靠右的位置,设置position和transition属性为后面定义动画做准备。
按钮样式
添加按钮动画:首先设置鼠标滑过时边框变亮,右指向箭头向右移动10个像素
述
接下来就是边框飞入效果,这里我们只以上边框为例,首先设置起始状态时的样式(也是公用部分),从效果图中可以看出,飞入的边框开始时在上边框的水平左侧但是看不见的,所以给background属性设为none宽度设为0,给一个2个像素的高度,与固有边框相同,position为绝对定位left:-100%(top给了一个-1px是根据实际效果调的)。
当鼠标滑过时开始出现,背景变为白色(开始显现),宽度逐渐变为180px与固有边框接近,位置最终向右移动到left:-1px的位置。
此处的原理是:开始时设置一个状态和位置,鼠标滑过时设置一个状态和位置,然后通过transition过渡属性使其慢慢呈现出来,产生动画效果。
公共部分
top
其余部分设置可根据上边框做相应变化得到,下面给出剩余代码:
bottom
left
right
声明:本人也是小白一枚,此文只为相互交流,未经修改,如有错误请多指正!
本站涵盖的内容、图片、视频等数据系网络收集,部分未能与原作者取得联系。若涉及版权问题,请联系我们删除!联系邮箱:ynstorm@foxmail.com 谢谢支持!