---恢复内容开始---

大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧!

....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果:

<!DOCTYPE HTML>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D图片切换1</title>
<style>
/*设置一个关键帧*/
@-webkit-keyframes open {
0% {
-webkit-transform: rotateX(180deg);
opacity: 0;
}
57% {
-webkit-transform: rotateX(-16deg);
opacity: 1;
}
66% {
-webkit-transform: rotateX(14deg);
}
74% {
-webkit-transform: rotateX(-12deg);
}
81% {
-webkit-transform: rotateX(10deg);
}
87% {
-webkit-transform: rotateX(-8deg);
}
92% {
-webkit-transform: rotateX(6deg);
}
96% {
-webkit-transform: rotateX(-4deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
} @-webkit-keyframes clos {
0% {
-webkit-transform: rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: rotateX(-180deg);
opacity: 0;
}
} body {
background: #eee;
} .box {
width: 600px;
height: 400px;
position: relative;
margin: 30px auto;
} /*按钮*/ #prev,
#next {
width: 50px;
height: 50px;
background: #efefef;
border-radius: 25px;
position: absolute;
top: 100px;
box-shadow: 2px 2px 10px #666;
text-align: center;
font-size: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #fff;
-webkit-text-stroke: 2px #ccc;
} #prev {
left: -100px;
} #next {
right: -100px;
}
/*图片区*/
#imgs {
width: 600px;
height: 400px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000px;
}
/*图片*/
#imgs img {
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(-180deg);
opacity: 0;
}
/*设置显示和隐藏后的样式*/
#imgs .show {
-webkit-animation: open 1.2s ease-in;
-webkit-transform: rotateX(0deg);
opacity: 1;
} #imgs .hide {
-webkit-animation: clos 1s ease;
-webkit-transform: rotateX(-180deg);
opacity: 0;
}
</style>
<script> window.onload = function() {
//要用到的元素获取元素
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var aImg = document.getElementsByTagName("img");
var iNow = 0;
//上一页点击事件
oPrev.onclick = function() { aImg[iNow].className = "hide";
iNow--;
if(iNow < 0) {
//判断全局变量
iNow = aImg.length - 1;
}
aImg[iNow].className = "show";
};
//下一页点击事件
oNext.onclick = function() {
aImg[iNow].className = "hide";
iNow++;
if(iNow == aImg.length) {
// 如果全局变量和长度相等,就变回第一张,造成视觉循环的假象
iNow = 0;
}
aImg[iNow].className = "show";
};
}
</script>
</head> <body>
<div class="box">
<!--上一页-->
<a href="#" id="prev"><</a>
<div id="imgs">
<img src="img/img1.jpg" alt="" class="show" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
<img src="img/img4.jpg" alt="" />
<img src="img/img5.jpg" alt="" />
</div>
<!--下一页-->
<a href="#" id="next">></a>
</div>
</body>
</html>

  不知道你们学会了吗???很简单哦!

---恢复内容结束---

CSS3,3D效果轮播图的更多相关文章

  1. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  3. 带锁的3D切割轮播图

    3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. 使用Swiper快速实现3D效果轮播

    最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...

  7. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  8. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  9. CSS3 实现简单轮播图

    用css3动画实现图片切换效果,原理还是改变left值.只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换. html结构 <div id="con ...

随机推荐

  1. (STM32F4) Timer Compare mode 操作

    Timer 比較模式(compare) 具體會用在哪種狀況目前還沒有這種經驗,但Compare有配置功能pin想必有應用會用到這個模式 從Function Block來看比較模式比基本Timer多了比 ...

  2. 主流服务器虚拟化技术简单使用——KVM(二)

    通过Linux工具管理KVM 主流服务器虚拟化技术简单使用——KVM(一)部署了一台KVM主机,提到KVM可以通过命令行工具(virt-install.virsh)和GUI工具(virt-manage ...

  3. Hystrix - 踩坑回忆

    1.Unable to connect to Command Metric Stream 异常 Finchley版本使用Hystrix存在此问题.网上常规解决思路: @Bean public Serv ...

  4. Pytorch学习笔记(二)——Tensor

    一.对Tensor的操作 从接口的角度讲,对Tensor的操作可以分为两类: (1)torch.function (2)tensor.function 比如torch.sum(a, b)实际上和a.s ...

  5. Shiro源码解析-登录篇

    本文以循序渐进的方式解析Shiro整个login过程的处理,读者可以边阅读本文边自己看代码来思考体会,如有问题,欢迎评论区探讨! 笔者shiro的demo源码路径:https://github.com ...

  6. C++经典面试题汇总

    1. 下面代码输出什么?为什么?(初始化列表) #include<iostream> using namespace std; class Test { int m_i; int m_j; ...

  7. EXTJS文档地址

    文档地址:http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.form.field.Field-event-change

  8. 转 $.ajax()方法详解

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  9. 20164324王启元 Exp4恶意代码分析

    一.实验要求 1.系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分析该文件,综述一下分析结果. 安装配置sysinternals里的sys ...

  10. HBase数据快速导入之ImportTsv&Bulkload

    导入数据最快的方式,可以略过WAL直接生产底层HFile文件 (环境:centos6.5.Hadoop2.6.0.HBase0.98.9) 1.SHELL方式 1.1 ImportTsv直接导入 命令 ...