jquery插件和css3 怎么用在wordpress上面

html-css0134

jquery插件和css3 怎么用在wordpress上面,第1张

 jQuery和CSS3相结合往往能制作出令人意想不到的网页应用,比如可以给平淡无光的菜单添加3D效果,可以给不起眼的小按钮增加发光的动画特效。下面我们就来看看jQuery和CSS3的魅力,这几款应用有些还是比较实用的。

1、jQuery图片横向滚动插件

这是一款利用jQuery实现的图片横向滚动插件,我们可以设置任意数量的图片,然后点击左右箭头按钮即可分组浏览这些图片。这款jQuery图片插件的优势有两点,其一是可以定义每组图片的数量,其二是图片可循环播放,而且简单实用。

2、实时更新数据的jQuery highcharts图表插件

今天我们要来分享一款基于jQuery的highcharts实时图表插件,highcharts图表插件定义了每隔一秒钟更新数据,然后根据每个数据点绘制一条折线,随着数据的更新,折线也就会不停的向前移动,形成一个类似CPU实时监控的曲线图表。这款jQuery图表插件应用比较广泛,兼容所有浏览器。

3、jQuery UI滑杆插件 可Tooltip提示

今天我们再来介绍一款实用的jQuery插件,是基于jQuery UI的。这款jQuery滑杆插件非常漂亮,可以设置多种颜色,再加上CSS3上运用,可以让滑杆的游标变得有立体感,滑杆的Tooltip提示框也出现飞入飞出的动画效果。更多jQuery插件可以移步至jQuery插件栏目。

4、CSS3个性化价格表 自定义表格单元

这是一款基于CSS3的个性化表格应用,它从某网站的价格表,看起来表格设计非常新颖。演示中价格表的圆形、圆角等效果均通过CSS3实现,这款CSS3价格表外观非常清新,并且留有很自然的投影和变现处理效果。

5、HTML5Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果。

6、jQuery弹出登录表单窗口插件

这是一款基于jQuery的登录表单插件,有一点特别的是该登录表单是一个弹出层窗口,表单即嵌在这个窗口里面,并且弹出层还有一层遮罩将网页的其他部分遮盖住。表单在弹出的时候利用jQuery的动画特性将会出现淡入淡出的迷人效果。

7、CSS3个人博客菜单动画 简洁的菜单样式

这是一款基于纯CSS3的菜单导航,由于它简洁的外观样式,所以可以用来做个人博客的菜单导航。这款CSS3菜单采用的是黑色的背景,当鼠标滑过菜单项时,背景颜色就会变成渐变的蓝色,色彩搭配非常合理,并且在鼠标滑过是带有向上滑动的动画效果。

8、CSS3仿wordpress网站后台管理菜单导航

这次要分享的是一款CSS3仿wordpress后台管理菜单导航,用过wordpress的朋友应该比较熟悉,它后台管理的菜单是纵向的,并且菜单项都有小图标。这款菜单就用CSS3来实现了wordpress后台风格的菜单样式,适合在你的网站后台使用,非常实用。

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢。

从广义上来讲,css3动画可以分为两种。

过渡动画

第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。css过渡只能定义首和尾两个状态,所以是最简单的一种动画。

要想使一个元素产生过渡动画,首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有

transition-property:规定对哪个属性进行过渡

transition-duration:定义过渡的时间,默认是0

transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等,默认是 ease

transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0

为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition 属性上:

如果是使属性的默认值,则可以省略:

 相当于:

如果想要同时过渡多个属性,可以用逗号隔开,如:

使用transtion属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。

这样,当我们把鼠标移动到div上的时候,div的状态发生了变化,就能看到宽度从100到400,高度从100到400,背景颜色从黑到红的,过渡时间为3秒的过渡效果了。

除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js把类加到元素上面:

关键帧动画

第二种叫做关键帧(keyframes)动画。不同于第一种的过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧来说的话,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。

关键帧动画的定义方式也比较特殊,它使用了一个关键字 @keyframes 来定义动画。具体格式为:

@keyframes 动画名称{

时间点 {元素状态}

时间点 {元素状态}

}

例如:

这段代码定义了一个名为demo,且有5个关键帧的动画。0% ,10% 等这些表示的是时间点,是相对于整个动画的持续时间来说的,时间点之后的花括号里则是元素的状态属性集合,描述了这个元素在这个时间点的状态,动画发生时,就是从第一个状态到第二个状态进行过渡,然后从第二个状态到第三个状态进行过渡,直到最后一个状态。一般来说,0%和100%这两个关键帧是必须要定义的。

关键帧的书写方式很灵活,一行可以写多个关键帧。

甚至它们之间的空格也是可以不要的。

现在我们知道了怎么去定义一个关键帧动画了,那怎么去实现这个动画呢?其实很简单,只要把这个动画绑定到某个要进行动画的元素上就行了。

把动画绑定到元素上,我们可以使用animation属性。animation属性有以下这些:

像前面讲的transition属性一样,也可以把这些animation属性简写到一个animation中,使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中。

只要像这样把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。

--------------------------------------------------------------------------------------------------------------------

注意,为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀

animate.css的使用

animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画,可以先在本页看下演示效果,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了:

首先在head中引入下载的animate.css文件

然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。

假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake,所以代码是这样的:

这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。

至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就行了。

注意这些属性还要记得加上各浏览器的前缀。

总之是很灵活的,说到底不就是一个css文件吗,一看就懂的,你在里面想怎么整就怎么整,不想用它提供的类名,就在里面改掉就行了。如果你只想用里面的部分动画,也可以把那些要使用的动画分离出来,它的官网也提供了这样的功能。

简单的建站,你会的这些已经够用了,可以找些简单的虚拟主机,把静态的html、css等用ftp丢上去就可以了

如果你想要真正的学习其他的一些技术,建议你到国外弄个linux服务器(除了建站之外,还可以干点别的事情),从零开始,自己搭建整个站点架构

需要用到的技术可能有:

linux系统:常用命令、安装软件等

前端的技术:html、css、js等

后端的技术:PHP或Java等

服务器搭建技术:nginx或Apache或tomcat等

版本管理相关:git或svn等

处理故障的能力:如安全、网络方面的各种问题

这么下来,你肯定会学到很多东西