3D banner(CSS3+HTML5)
1.这是一篇 3Dbanner制作的简易流程,支持高版本的chrome和firefox浏览器,俩浏览器显示可能会有些差异
2.没有兼容性代码,因为仅仅只是熟悉流程,希望小伙伴们自己改善哈(>﹏<。)
3.代码中有注释,代码直接复制,粘贴成.html的文件,用浏览器打开即可
4.貌似不支持3D环境,所以没有效果,只能附图
代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="1的N次幂"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>3D banner</title> <style type="text/css"> *{ margin:0; padding:0; } body{ font-size:14px; overflow:hidden; } a{ text-decoration:none; font-size:14px; color:#fff; } ul li,ol{ list-style-type:none; } .bg_img{ width:100%; height:100%; } .bg_img img{ width:100%; height:100%; position:fixed; top:0; left:0; } .container{ margin-top:150px; width:100%; height:100%; } .container .banner{ margin:auto; width:640px; height:200px; perspective:800px;/*设置透明深度(类似于看电影选位置,选个好位置才能看得更清楚)*/ } .container .banner ul{ width:640px; height:200px; } .container .banner ul li{ width:160px; height:200px; position:relative; transform-style:preserve-3d;/*设置3d环境,必须设置之后才有3d效果*/ float:left; transition:all 2s ease; } .container .banner ul li div{ width:160px; height:200px; position:absolute; text-align:center; line-height:300px; } /*Start 设置背景图片、旋转角度和旋转轴*/ /* li div:nth-child(n):表示li下面可能有很多个div,但是我只选中了第n个div,n表示索引(该索引从1开始) transform:translateZ(150px);表示沿着Z轴正方向移动150px transform: rotateX(90deg);表示远着X轴旋转正的90度 */ .container .banner ul li div:nth-child(1){ top:-200px; transform:translateZ(100px) rotateX(90deg); transform-origin:bottom; background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_1.jpg") no-repeat center center; background-size:640px 200px; } .container .banner ul li div:nth-child(2){ top:200px; transform:translateZ(100px) rotateX(-90deg); transform-origin:top; background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_2.jpg") no-repeat center center; background-size:640px 200px; } .container .banner ul li div:nth-child(3){ transform:translateZ(100px); background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_3.jpg") no-repeat center center; background-size:640px 200px; } .container .banner ul li div:nth-child(4){ transform:translateZ(-100px) rotateX(180deg); background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_4.jpg") no-repeat center center; background-size:640px 200px; } /*Start 设置背景图片、旋转角度和旋转轴*/ /*左右两边的看不到,所以这部分代码不需要(仅仅做测试使用)*/ /* .container .banner ul li div:nth-child(5){ right:200px; width:300px; transform:translateZ(150px) rotateY(-90deg); transform-origin:right; } .container .banner ul li div:nth-child(6){ left:200px; width:300px; transform:translateZ(150px) rotateY(90deg); transform-origin:left; } */ /* Start 背景定位*/ /* ul li:nth-child(n) div:表示ul下面可能有很多个li,但是我只选中第n个li下面的所有div */ .container .banner ul li:nth-child(1) div{ background-position:0; } .container .banner ul li:nth-child(2) div{ background-position:-160px; } .container .banner ul li:nth-child(3) div{ background-position:-320px; } .container .banner ul li:nth-child(4) div{ background-position:-480px; } /* End 背景定位*/ /*Start 添加hover事件,让banner动起来*/ /* transition;表示一个时间过度或者是持续时间,它是一个过程。 transition:all 2s linear;表示全部的效果都用两秒钟去完成(过度),效果是linear,还有其他效果,可以参考手册,其他的我也没用过(>﹏<。)~呜呜呜…… */ .banner:hover ul li{ transform:rotateX(270deg); transition:all 2s linear; } /*End 添加hover事件,让banner动起来*/ </style> </head> <body> <!--设置一个背景图--> <div class="bg_img"> <img src="http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_bgs.jpg"/> </div> <!--start banner--> <div class="container"> <div class="banner"> <ul> <li> <div></div> <div></div> <div></div> <div></div> </li> <li> <div></div> <div></div> <div></div> <div></div> </li> <li> <div></div> <div></div> <div></div> <div></div> </li> <li style="z-index:-1;"> <div></div> <div></div> <div></div> <div></div> </li> </ul> </div> </div> <!--End banner--> </body> </html>
效果大概是这样的:附图
解释:事实上,我们把banner用4个li分成了4分,每份用4个div又分成了4分,li是将banner分成4个块,li里面的div用来背景定位的,为什么要这么做呢,是因为我们将做一个更炫酷的banner,我会在下一片博客中写到。分成四分效果图如下,
3D banner(CSS3+HTML5)的更多相关文章
- 超酷 CSS3/HTML5 3D 飘带菜单实现教程
今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...
- 8个3D视觉效果的HTML5动画欣赏
现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验.本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感 ...
- 3D Banner(jQuery)
1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer: 2.将代码黏贴成html文件,直接用浏览器打开即可: 3.layer属于弹窗提示类插件,可能需要 ...
- CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局
原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...
- CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- 学习笔记 第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1 使用结构标签 在制作网页时,不仅需要使用< ...
- 七夕节表白3d相册制作(html5+css3)
七夕节表白3d相册制作 涉及知识点 定位 阴影 3d转换 动画 主要思路: 通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果. 代码如下: &l ...
- 8款强大的CSS3/HTML5动画及应用源码
1.CSS3 jQuery UI控制滑杆插件 今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...
随机推荐
- Java基础-服务器的发送和接收
package hanqi.test; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWri ...
- Conditional Split component 用法
Conditional Split 用于将数据流按照条件进行拆分,每一个output 都有name和condition. 数据流逐行按照condition进行match,如果match,那么改行会进入 ...
- 《JS设计模式笔记》 3,观察者模式
<script type="text/javascript"> //挂插着模式又叫发布订阅模式应该是最常用的模式 //1,dom事件就是观察者模式,只要订阅了click ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表
显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据 目录 ASP.N ...
- 为 Neutron 准备物理基础设施(II) - 每天5分钟玩转 OpenStack(76)
本节将按照上一节的规划安装配置控制节点和计算节点. 控制节点 devstack-controller 步骤如下 安装 Ubuntu 14.04 此处省略 256 个字 配置网卡 编辑 /etc/net ...
- Quartz 在 Spring 中如何动态配置时间--转
原文地址:http://www.iteye.com/topic/399980 在项目中有一个需求,需要灵活配置调度任务时间,并能自由启动或停止调度. 有关调度的实现我就第一就想到了Quartz这个开源 ...
- 1Z0-053 争议题目解析486
1Z0-053 争议题目解析486 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 486.You execute the following Recovery Manager (R ...
- 【JavaScript】又一神器框架:linq.js
引言 前几天针对一个js数组交集的问题请教了下同事,他第一反应就是循环,这也是常规思路,因为我个人更倾向于js些,我便开玩笑,不知道js能不能像linq那样实现这些操作呢?果断百度了一把,果然有现成框 ...
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...
- git log命令全解析,打log还能这么随心所欲!
git log命令非常强大而好用,在复杂系统的版本管理中扮演着重要的角色,但默认的git log命令显示出的东西实在太丑,不好好打扮一下根本没法见人,打扮好了用alias命令拍个照片,就正式出道了! ...