制作3D旋转视频展示区
来源:互联网 发布:js闭包坏处 编辑:程序博客网 时间:2024/04/28 09:24
任务
任务一、制作多背景
提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%),底层使用背景图片:http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg
任务二、控制背景图像尺寸
提示:使用background-size,让两层背景都是全屏显示
任务三、给每个列表项添加过渡动画效果
提示:使用transition属性,给每个列表项.item设置变形过渡效果。transition: -webkit-transform .6s;
任务四、悬浮状态改变每个列表项的transform效果
提示:通过transform属性,在列表悬浮状态设置 3D旋转效果:translateZ(-50px) rotateX(95deg);
任务五、设置列表项图片的圆角和阴影效果
提示:通过border-radius和box-shadow给图像设置圆角和阴影效果。
任务六、给底层显示文本的层级设置渐变效果
提示:使用CSS3渐变属性设置选项卡文本层的背景效果
任务七、列表项悬浮状态时,去掉图片的阴影效果
提示:通过box-shadow去掉图片阴影效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin-top: 5em;
text-align: center;
color: #414142;
background: rgb(246,241,232);
任务一、制作多背景
任务二、控制背景图像尺寸
}
h1, em, #information {
display: block;
font-size: 25px;
font-weight: normal;
margin: 2em auto;
}
a {
color: #414142;
font-style: normal;
text-decoration: none;
font-size: 20px;
}
a:hover {
text-decoration: underline;
}
#container {
margin: 0 auto;
width: 1024px;
}
.wrapper {
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item {
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
任务三、给每个列表项添加过渡动画效果
}
.item:hover {
任务四、悬浮状态改变每个列表项的transform效果
}
.itemimg {
display: block;
position: absolute;
top: 0;
任务五、设置列表项图片的圆角和阴影效果
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
width: 310px;
height: 100px;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 80px;
width: 290px;
text-align: left;
border-radius: 15px;
padding: 10px;
font-size: 12px;
text-shadow: 1px 1px1px rgba(255,255,255,0.5);
box-shadow: none;
background: rgb(236,241,244);
任务六、给底层显示文本的层级设置渐变效果
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
-ms-transform: rotateX(-90deg) translateZ(50px);
-o-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.information strong {
display: block;
margin: .2em 0 .5em 0;
font-size: 20px;
font-family: "Oleo Script";
}
.item:hover img {
任务七、列表项悬浮状态时,去掉图片的阴影效果
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
</style>
</head>
<body>
<div id="container">
<h1>CSS3 3D变形制作视频展示区</h1>
<div class="wrapper">
<div class="item">
<img src="http://www.dztcsd.com//545b1e900001db6d04630253.png" />
<span class="information">
<strong>澳门风云</strong>闻名中外,曾担任美国赌场保安总顾问的魔术手石一坚,终回流澳门退休,更宴请各方朋友到来庆祝生日宴.
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://www.lsqifu.com//545b1eb20001ed6a03360201.png" />
<span class="information">
<strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔,为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1eef0001c62903830217.png" />
<span class="information">
<strong>父子刑警</strong>本剧改编自雫井修介小说《Bitter Blood》。剧中,新晋刑警•佐原夏辉(佐藤健饰)被分配到银座警察
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1f4e0001f90c02850210.png" />
<span class="information">
<strong>果宝特攻3</strong>果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1f5500017d5603190214.png" />
<span class="information">
<strong>红眼</strong>1988年7月16日,从汉城始发的列车发生了一起严重的交通事故,造成100多人死亡。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://img.mukewang.com/545b1f620001874503500209.png" />
<span class="information">
<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故,一段笑料十足的误打误撞,将两个外表相似却内容各异的箱子调换。
</span>
</div>
</div>
</div>
</body>
</html>
- 制作3D旋转视频展示区
- CSS3制作3D旋转视频展示区
- 前端案例--CSS3 3D变形制作展示区
- 轻松制作开发3D在线展示
- threejs制作3d模型展示网页
- opengl 制作 3D 彩色旋转三角形
- unity制作一个3d旋转菜单
- 制作3D旋转导航综合练习题
- CSS3制作旋转的3D立方体
- Javascript控制图片围成3D模型旋转展示
- html+css实现3D旋转图片展示
- Android视频旋转并全屏展示
- Flash AS3.0 制作旋转图片3D效果
- Scalefrom 中制作3D旋转UI的方法
- Coco2dx制作一个3D旋转的效果
- CSS3:制作3D旋转导航综合练习题
- Swiper制作3d旋转木马轮播
- jquery 幻灯片插件 canvas 3D旋转木马 图片立体展示 图片有大到小一次顺序排列
- Linux关机命令
- Android setContentView的用法
- 【Android自定义View实战】之自定义评价打分控件RatingBar,可以自定义星星大小和间距
- C#简易访问sqlserver
- [Extjs6] 页面电话号码点击后进入打电话界面
- 制作3D旋转视频展示区
- MDX多维查询
- Mysql远程连接配置
- 凡人修真3D(2)神兵
- linux系统中安装ntopng的坎坷路
- js学习笔记:事件——事件流、事件处理程序、事件对象
- docker whenever部署时设置环境
- 导入时如何定制spring-boot依赖项的版本
- 使用WebView时的一些坑(图片拼接、不显示、shouldOverrideUrlLoading正确用法)