html5发光,css 发光
html5如何让边框发光
html5让边框发光,就是给那个边框加上一层外阴影,然后使用一个不同于边框的颜色就行了,通过box-shadow来设置,它的一些属性有:
创新互联公司服务项目包括建平网站建设、建平网站制作、建平网页制作以及建平网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,建平网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到建平省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色;
这里我写一些代码更容易理解:
html
head
style
#but{
width:200px;
height:200px;
box-shadow:-10px 0 10px red, /*左边阴影*/
}
/style
/head
body
div id='but'
p我是测试文字/p
/div
/body
/html
HTML5+CSS3小实例:鼠标悬停发光按钮
HTML5+CSS3做一组鼠标悬停发光的按钮,鼠标悬停,按钮边框延展开来,首尾相连时填充按钮,过程伴随发光、倒影效果,并通过hue-rotate实现每个按钮不同颜色。
效果:
源码:
HTML5 有哪些让你惊艳的 demo?
说起特效来,HTML5还是很值得称道的:
1、HTML5 Canvas发光Loading动画
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
2、jQuery球状放大镜特效插件
今天我们要来分享一款基于jQuery的放大镜特效插件,和其他放大镜不同的是,这款jQuery放大镜插件是球状的,看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时,即会出现很酷的球状放大镜,来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小,这就产生了立体感。
3、HTML5 Canvas粒子模拟效果
这是一款利用Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。
4、HTML5/CSS3带区域地图的联系表单
之前我们分享很多样式和功能各异的CSS3联系表单,比如HTML5/CSS3简易联系表单等等,都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单,它可以选中不同区域显示相应的地图,然后针对该区域填写联系表单。
5、CSS3 3D立方体Loading加载动画特效
之前我们分享过一些HTML5和CSS3的3D立方体特效,他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的,9个小立方体上下浮动,呈现波浪的效果,并且,这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。
希望你也可以学起来呀~
新闻标题:html5发光,css 发光
网站URL:http://ybzwz.com/article/dsedpgi.html