HTML5+CSS3 (2)

2D

transform

transform(转换)是css3新增的属性 可以实现元素的旋转 位移 缩放等效果

二维坐标系

2D转换是改变元素在二维平面上形状和位置的一种技术

translate(位移)

注意事项

• 所谓的位移 是沿着x轴和Y轴移动位置
• 不会影响到其它元素的位置
• 对行内元素无效

使用方法

• translate(x,y)
• translateX(n):针对X轴
• translateY(n):针对Y轴
• translate(50%,50%) 这里的百分比是根据自身宽度和高度进行移动

让盒子实现水平和垂直居中对齐

注意：盒子必须是块级元素和行内块元素。可以用tanslate实现，用定位和translate配合更佳

旋转

注意事项

• 旋转的单位为deg
• 正值为顺时针旋转 负值为逆时针旋转
• 旋转的中心点为元素的中心点

三角形案例

改变旋转中心点

transform-origin:x y

• x y之间用空格相隔开
• 默认的旋转中心点（50% 50%）
• 可以用像素或者方位名词表示

旋转案例

缩放

scale(x,y)

注意事项

• scale(1,1) 宽高及放大1倍
• scale(2,3) 宽放大2倍 高放大3倍
• scale(5) 宽高都放大5倍
  优点：可以设置旋转中心点，缩放的时候不会影响其它元素

图片放大案例

分页按钮案例

    
    
    
    



    

        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            

        
    

2D综合写法

注意事项

• CSS 2D的属性可以简写
• transform:translate(x,y) rolate(n) scale(n) 按照这个顺序来写，属性之间用空格相隔
• 位移放在最前面 切记不能改变顺序

动画

动画 相比于过渡 可以实现更多变化 更多控制 自动播放等

使用动画的步骤

• 先定义动画
• 再使用（调用）动画
• 定义动画使用@keyframes 0%是起始状态 100%是结束状态。
• 调用动画必须需要的两个属性 animation-name ainimation-duration(动画的持续时间)

动画的基本实现

注意事项

• form to等价于 0% 100%
• 实现更多细节可以用百分比来实现

动画属性

注意事项 规定动画结束后的状态与动画的播放次数和是否反向播放有冲突

动画的简写

热点图

思路：利用定位和动画可做出效果，必须确保向外扩散的波浪线位于中心位置，且用盒子阴影颜色替代背景色

注意：为什么不用scale呢，因为scale会把盒子的阴影放大，视觉会受到影响

速度曲线详解

打字机效果

    
    
    
    



    
大家好,我的名字叫做尧子陌

奔跑的小熊

注意：背景图片和小熊的奔跑，用的是背景图片