章节
问答
笔记
评论
占位
占位

制作3D旋转视频展示区

根据前面所学,制作下图效果

案例在线展示地址:http://codepen.io/airen/pen/eAztg

任务

任务一、制作多背景

       提示:上层有一个径向渐变,渐变图像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去掉图片阴影效果

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?