前端技术

前端技术:HTML CSS js/jQuery

  • 给网页图标字体 Font Awesome 添加动画效果

    给网页图标字体 Font Awesome 添加动画效果

    在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看《30个免费网页图标字体以及使用方法》一文,其中Font Awesome有较多用户使用。今天我们主要向大家介绍一个可以上Font Awesome动起来的CSS文件,现在交互越来越重视,给图标加上对应的动画可以增加一些用户体验,是很不错的。演示在线演示&下载地址:DEMO从演示文件中可以看出目前有10种CSS动...

  • CSS3圆圈动画放大缩小循环动画效果

    CSS3圆圈动画放大缩小循环动画效果

     今天在写一个zblog主题的时候,在无限下拉加载等待时间内,需要加一个动画循环效果,如上图!1、简单放大缩小循环!<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&qu...

    CSS学习 4天前 9 0 循环
  • CSS 横向菜单允许滚动(滑动)并隐藏滚动条(移动端)

    CSS 横向菜单允许滚动(滑动)并隐藏滚动条(移动端)

     今天写一个模板的时候,在手机端需要横线罗列菜单,为减少占用空间,采用了横向滚动(滑动)效果,并且隐藏滚动条!最后写的CSS还是不支持firefox,在firefox的浏览器上滚动条隐藏不掉。。。不管了,因为这个横向滚动是运用在手机端,不会出现firefox的问题!相关:1、纯CSS3 自定义滚动条样式设置方法大全(不兼容firefox)2、jQuery插件 - 滚动条样式-jQuery custom content scro...

    CSS学习 5天前 8 0 滚动条
  • CSS垂直翻转/水平翻转学习

    CSS垂直翻转/水平翻转学习

    一、CSS下兼容性的元素水平/垂直翻转实现随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下:/*水平翻转*/.flipx {     -moz-transform:scaleX(-1);     -webkit-transform:scaleX(-1); &nb...

  • CSS3 text-shadow 属性

    CSS3 text-shadow 属性

     基础的文本阴影效果: text-shadow:2px 2px 2px #fff X轴,Y轴,模糊程度(不可是负值),阴影颜色 效果一: text-shadow: 0 0 20px red; 效果二: text-shadow: 0 0 5px #fff, 0 0...

  • nowrap="nowrap"在html的td中的作用

    nowrap="nowrap"在html的td中的作用

    在写模板的时候,偶尔会在td中遇到nowrap="nowrap",可能很多人不明白什么意思,特开文章解释下:HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。但使用时要注意的是,td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。...

    html标签 2周前 19 0 nowrap
  • css table布局大法,解决你大部分居中、多列等高、左右布局的问题

    css table布局大法,解决你大部分居中、多列等高、左右布局的问题

    看了这篇文章,你可以了解到以下布局方法:table-cell定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最近开发遇到一些布局上的问题,由于不确定因素比较多,比如不定宽高、单行多行的情况需要显示的样式基本相同。这样的情况会比较复杂,后来找到display:table-cell这个布局神器,这些问题也就不...

  • jQuery插件 - theia-sticky-sidebar - 智能侧边栏跟随固定范围浮动的效果

    jQuery插件 - theia-sticky-sidebar - 智能侧边栏跟随固定范围浮动的效果

     之前发过一篇关于跟随浮动在限制区域内的jquery插件,《jquery 滚动跟随 到达底部时会停止跟随特效代码》,但兼容性不太好,包括chrome以及firefox都可能无效,今天写另一个zblog主题时发现急需这个功能,所以忙不迭的寻找其它类似jquery插件!今天就来介绍一款兼容性比较好的,jQuery插件 - Theia Sticky Sidebar,可以智能侧边栏跟随固定范围浮动的效果!首先,你的HTML结构应是这样...

    js/jQuery 2周前 20 0 滚动跟随
  • jQuery多行文字无缝滚动

    jQuery多行文字无缝滚动

     还是在写zblogPHP主题ydblack需要加入一个滚动特效,找到的方法!之前写过一篇关于jQuery单行文字滚动特效的三种样式!多行滚动HTML:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;&nbs...

    js/jQuery 3周前 25 0 滚动
  • 纯CSS3 自定义滚动条样式设置方法大全(不兼容firefox)

    纯CSS3 自定义滚动条样式设置方法大全(不兼容firefox)

     刚写过一篇使用jQuery滚动条插件jQuery custom content scroller,兼容所有浏览器,但缺点也非常明显,就是过大了,高达100K左右的JS+css,非常不友好。本文分享的是纯CSS方法,但缺点也明显,不兼容firefox,看过很多兼容firefox的方法,但因为firefox的更新很多都失效了,以后遇到再重点写下firefox的滚动条样式。/*滚动条*/ .widget_kuaixun ...

    CSS学习 3周前 23 0 滚动条