平面转换、3D转换、动画
字体图标
- iconfont 阿里图标库
- 从图标库引用素材
平面转换
- transition: all 1s; 设置元素变换动画
- transform: translate(px, px); 移动指定像素
- transform: translate(x%, y%); 相对自身百分比移动
- transform: translateX(值) 或 translateY(值)
- transform: rotate(360deg); 可自定义旋转点
- transform: scale(1.2); 缩放倍数
- background-image: linear-gradient(颜色1,颜色2,颜色3);
平移应用
- 绝对定位中实现盒子居中
.box { position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; background-color: pink; transform: translate(-50%, -50%); }
- 实现双开门效果
鼠标悬浮海报时,海报左右分开,向两侧退去,显现主题内容。
利用CSS精灵图原理将海报左右分开。* { margin: 0; padding: 0; box-sizing: border-box; } .box { margin: 50px auto; height: 600px; width: 1000px; background-size: 1000px; background-image: url(images/pik_lightning.jpg); overflow: hidden; } .box::before, .box::after { content: ''; float: left; width: 50%; height: 600px; background-size: 1000px; background-image: url(images/pik_poster.jpg); transition: all 1s; } .box::after { background-position: right 0; } .box:hover::before { transform: translateX(-100%); } .box:hover::after { transform: translateX(100%); }
<body> <div class="box"> </div> </body>
旋转应用
- 车轮滚动:平移+旋转
.wheel { transform: translateX(100px) rotate(360deg); }
缩放应用
- 播放按钮缩放
transform: scale(5); opacity: 0;
渐变应用
- 使图片半遮罩,清晰显示文字。
background-image: linear-gradient(transparent,rgba(0,0,0,.6));
空间转换
- transform: translate3d(x,y,z);
- transform: translateZ(值);
- perspective: 人眼到屏幕的距离px; 实现透视
配合 transform: translateZ(值) - transform: rotateX(值);
- transform: rotateY(值);
- transform: rotateZ(值); 同rotate(值)
- transform: rotate3d(x,y,z,deg); 自定义轴
- transform: scaleZ(倍数);
3D旋转应用
-
立体呈现轮播图
添加 transform-style: preserve-3d;.cube { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 2s; transform-style: preserve-3d; } .cube div { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .front { background-color: orange; transform: translateZ(200px); } .back { background-color: green; } .cube:hover { transform: rotateY(180deg); }
<div class="cube"> <div class="front">前面</div> <div class="back">后面</div> </div>
-
3D导航栏(翻牌效果)
与上同理,只需摆放合适的空间立体位置即可。
动画
两个状态间的变化过程可以用过渡实现;多个状态间的变化过程用动画(重复播放、最终画面、是否暂停)
- 定义动画:
@keyframes { 0% {} 50% {} 110% {} }
- 使用动画 animation: 动画名称 动画时长 速度曲线 延迟时间 循环次数 动画方向 执行完毕时状态;
- 速度曲线:线性动画linear、分部动画steps()
- 循环次数:循环次数、无线循环infinite
- 动画方向:正反向alternate
- 执行完毕时状态:默认值backwards、forwards(需去掉 infinite alternate)
- animation-play-state: pause 暂停动画,配合:hover用。
- animation-timing-function: steps(N) 逐帧动画,制作精灵动画时。
- animation: 动画1, 动画2, 动画3; 调用多组动画
应用
- 精灵图动画
- 跑马灯展示