JavaScript + CSS3 实现的海报画廊特效

【JavaScript + CSS3 实现的海报画廊特效】的更多相关文章

JavaScript + CSS3 实现的海报画廊特效

原文:JavaScript + CSS3 实现的海报画廊特效这是慕课网上<CSS3+JS 实现超炫的散列画廊特效>的源代码,我修改了一些 bug 和调优了一些细节,并把学习过程中并不了解的知识点以及一些基本思路用注释写在了源码里供以后查阅,同时欢迎指正其中的问题. 源课程视频地址:http://www.imooc.com/learn/366 <!DOCTYPE html> <html> <head> <meta http-equiv="Co…

一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览源码下载简要教程这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件.第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮.第二个DEMO是第一个DEMO的升级版,它增加了图片标题.查看图片.键盘控制等其它功能. HTML结构这个3D画廊…

jQuery+CSS3实现404背景动画特效

效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&…

Carousel 旋转画廊特效的疑难杂症

疑难杂症该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美,但是实际在项目中使用时却发现了一个令人头疼的bug.如果图片只有三张,旋转过度时会出现如下的交叉紊乱(没发现的多试几次). See the Pen carousel by Zongbin Niu (@nzbin) on CodePen. 分析一下代码会发现,主要是第一个元素的 z-index 问题.…

纯CSS3实现动态火车行驶特效

上次开完飞机,这次开火车查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <t…

使用javascript生成的植物显示过程特效

查看效果:http://keleyi.com/keleyi/phtml/html5/33.htm .NET版本:http://keleyi.com/a/bjac/66mql4bc.htm 完整HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用javascript生成的植物显示过程特效 - 柯乐义</title&g…

纯css3 加载loading动画特效

最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading的动画效果,最终在我们前端工程师的帮助之下完成.所以记录在这里,如果感兴趣的朋友也可以看看,大家互相焦炉学习. 1.demo.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&…

基于css3的文字3D翻转特效

一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </d…

基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : 在线预览源码下载实现的代码. html代码: <div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box">…

jQuery/CSS3实现图片层叠展开特效

这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法,具体效果可以在在线演示中查看. 你也可以在这里查看在线DEMO演示说说实现的方法和代码吧,主要由HTML.CSS以及jQuery代码组成. HTML代码: <div id="page_wrap">  <div class=&q…