CSS3非常炫酷的3D动画
2017-09-21 20:35
330 查看
CSS3非常炫酷的3D动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } ul{ width: 200px; height: 200px; position: relative; margin: 300px auto; /*转换成3D*/ transform-style: preserve-3d; /*动画属性绑定向一个选择器*/ animation: run 3s infinite linear; } li{ list-style: none; width: 200px; height: 200px; /*透明度*/ opacity: 0.5; position: absolute; left: 0px; top: 0px; } li:first-child{ background: #3be637; /*平移动画*/ transform: translateZ(-100px); } li:nth-child(2){ background: red; transform:translateX(-100px) rotateY(90deg); } li:nth-child(3){ background: darkblue; transform:translateY(-100px) rotateX(90deg); } li:nth-child(4){ background:#0d1426; /*缩放动画*/ transform:translateX(100px) rotateY(90deg); } li:nth-child(5){ background: pink; transform:translateY(100px) rotateX(90deg); } li:nth-child(6){ background: peru; /*位移*/ transform: translateZ(100px); } /*关键帧*/ @keyframes run { /*旋转*/ 0%{transform: rotateX(0deg) rotateY(0deg)} 100%{transform: rotateX(180deg) rotateY(180deg)} } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
相关文章推荐
- 6种非常炫酷的CSS3按钮边框动画特效
- CSS3和js炫酷点击按钮3D翻转动画特效
- CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
- 纯CSS3炫酷3D折叠面板动画特效
- CSS3和js炫酷点击按钮3D翻转动画特效
- Android基于Facebook Rebound的动画效果框架Backboard demo (非常炫酷)
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
- css3-3d转换和3D动画
- CSS3之 3D变换、3D动画
- 非常炫酷的CSS3垂直手风琴菜单
- CSS3动画 3DBOX
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
- CSS3动画功能 --- transition、transform、3D场景
- 10个非常炫酷的jQuery相册动画赏析
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- css3实现3d旋转动画特效
- CYC-非常炫酷的UIView动画-02
- CSS3 3D旋转动画代码实例
- css3 3D变换和动画
- css3图书3D动画