前端练习4-立方体翻转效果
2024-04-23 01:53:00
html代码为：
<div id= "slideShow" class ="slides-wrapper">
<section class ="slide">
<img src ="1.jpg" />
</section >
<section class ="slide">
<img src ="2.jpg" />
</section >
<section class ="slide">
<img src ="3.jpg" />
</section >
</div >
css代码为：
body {
font-size: 24px ;
font-family: 'Roboto Condensed', sans-serif;
overflow: hidden ;
min-height: 500px ;/*高度最小值为500px*/
min-width: 300px ;/*宽度最小值为300px*/
background: url(http://subtlepatterns.com/patterns/diagmonds.png) ;/*背景图片*/
position: absolute ;
width: 100% ;
height: 100% ;
}
a {
color: #666 ;
text-decoration: none ;
transition: all 0.5s;
}
/*当鼠标滑过链接时，改变链接的背景颜色*/
a:hover {
color: #999 ;
}
/*当图片到达尽头时，链接消失*/
.hidden {
display: none ;
}
.slides-wrapper {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 700px;
-webkit-perspective-origin: 50% 100px;
-webkit-transform: translateZ(0);
transform-style: preserve-3d ;
perspective: 700px ;
perspective-origin: 50% 100px;
/*
prespective属性定义3D元素距视图的距离，以像素计。
用法：prespective：number|none
number 元素距离视图的距离，以像素计。
none 默认值；与0相同，不设置透视。
注：当元素定义prespective属性时，其子元素会获得透视元素，而不是元素本身。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。
用法：perspective-origin: x-axis y-axis;
x-axis 定义该视图在 x 轴上的位置。默认值：50%（left，center，right，length，%）
y-axis 定义该视图在 x 轴上的位置。默认值：50%（left，center，right，length，%）
*/
transform: translateZ(0) ;
position: absolute ;
width: 40% ;
height: 40% ;
top: 25% ;
left: 30% ;
z-index: 2 ;
}
.slide {
width: 100% ;
min-height: 100% ;
max-height: 120% ;
line-height: 1.5 ;
position: absolute ;
opacity: 0 ;
font-size: 1em ;
color: #eee ;
left: 0 ;
-webkit-transition: 0.7s all cubic-bezier(0.260, 0.860, 0.440, 0.985) ;
transition: 0.7s all cubic-bezier(0.260, 0.860, 0.440, 0.985);
-webkit-transform: translateZ(0);
transform: translateZ(0) ;
background: rgba(0,0,0,0.5) ;
border-radius: 3px ;
box-shadow: 0 0 20px 10px #000 ;
box-sizing: border-box ;
overflow: hidden ;
}
.slide.current {
opacity: 1 ;
-webkit-transform: translate3d(0, 0, 125px);
transform: translate3d(0, 0, 125px);
}
.slide.next {
opacity: 0 ;
-webkit-transform: rotateY(90deg) translate3d(-20%, 0, 155px);
-webkit-transform-origin: top left;
transform: rotateY(90deg) translate3d(0, 0, 125px);
transform-origin: top left;
left: 80% ;
}
.slide.prev {
-webkit-transform: rotateY(-90deg) translate3d(20%, 0, 155px);
-webkit-transform-origin: top right;
transform: rotateY(-90deg) translate3d(0, 0, 125px);
transform-origin: top right;
opacity: 0 ;
left: -80% ;
}
.slide ul, .slide ol {
margin: 1em 0;
}
.slide li {
list-style-position: inside;
}
.nav-button {
position: fixed ;
z-index: 10 ;
min-width: 150px ;
width: 5% ;
height: 100% ;
border: none ;
background-color: transparent ;
background-position: center;
background-repeat: no-repeat;
text-indent: -99999px ;
cursor: pointer ;
}
.nav-button:focus {
outline: none ;
}
.nav-button:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.nav-button:active {
background-color: rgba(20, 20, 20, 0.3);
}
/*左边箭头*/
.nav-button.prev {
background-image: url(http://i.imgur.com/y6ZypnW.png?1?5201) ;
left: 0 ;
}
/*右边箭头*/
.nav-button.next {
background-image: url(http://i.imgur.com/dH1KsfM.png?1) ;
right: 0 ;
}
@media all and (max-width: 1280px) {
body {
font-size: 14px ;
}
.nav-button {
background-size: 60% ;
min-width: 100px ;
}
}
前端练习4-立方体翻转效果相关推荐
- Android 立方体翻转效果
今天我们来看看如何实现一个立方体翻转的效果,如图 看上去很麻烦,实际上实现起来还是蛮轻松的. 这里我们使用到的有两个类. android.graphic.Camera 这是在图像学概念里的摄像机,这是 ...
- css3 transition cube(立方体翻转效果)
一.构建页面 <div class="container perspective"><div class="transition effect1 car ...
- 前端vue实现卡片翻转效果【css3实现】
有志者事竟成,破釜沉舟百二秦关终属楚 苦心人天不负,卧薪尝胆三千越甲可吞吴.
- web前端进阶＜7＞：3d图像翻转效果
这几天又闲着无聊,自己学的东西又有一点不牢固了,需要写一个小程序来巩固一下,相信大家也时有同感吧!那么这一期就给大家带来一个炫酷的相册3d翻转效果,如果搭上炫酷的文字和动画那肯定是高端.霸气上档次的: ...
- html和css3 js 3D 相框动画翻转效果id1084-网页前端设计
html和css3 js 3D 相框动画翻转效果id1084-网页前端设计 源码下载地址 在新演示地址 <!DOCTYPE html> <html lang="en&quo ...
- css3 页面翻转效果.
css3 页面翻转效果. 从事手机前端开发也有段时间了,最近重习了css3,html5...做了些小例子. 演示示例在这里 源码如下: 1: <html> 2: <head> ...
- 前端|3D立体视频翻转动画
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 基本介绍 HTML ...
- html立方体翻转,jQuery 3D立方体翻转插件
这是一款jQuery 3D立方体翻转插件.该插件可以创建水平或垂直的3d立方体效果,可以控制立方体的翻转速度,定义触发立方体旋转的事件等. 使用方法 在页面中引入jquery和jquery.flipb ...
- jQuery实现3D立方体翻转插件
下载地址https://yy123.ink/frontDetail/8156一款jQuery实现的3D立方体翻转插件.该插件可以创建水平或垂直的3d立方体效果,可以控制立方体的翻转速度,定义触发立方体 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 co ...
最新文章
- PHP中Session的使用
- 六类布线六大注意事项
- Eclipse导出可执行Jar文件（包含第三方Jar包）
- 【Android测试】【第二节】Monkey工具
- C和C++数组的用法
- c语言斐波那契数列_视频丨神奇的斐波那契数列科学性与艺术性
- SQL里的SWITCH分支语句
- 二层交换机、三层交换机和路由器的基本工作原理和三者之间的主要区别
- leetcode700. 二叉搜索树中的搜索
- centos7 修改默认yum源为国内的阿里云
- 技术沙龙|赋能企业数字化转型，移动云云原生应用架构实践
- pycharm 快捷键设置为eclipse一样
- doapk java环境_关于有的Apk无法反编译的探究
- 在线制作ico矢量图标
- Java+PDFBox将PDF转成图片
- chm转换html,chm无法用浏览器打开，Windows下如何把chm转换为html？
- App Tamer for Mac(CPU优化电池管理工具)
- vivado使用方法(初级）
- 运动无线蓝牙耳机推荐、运动健身必备的运动耳机
- 吕国强计算机二级考试,考试科目代码表.doc