前端html+css笔记（下）

斜切的导航

图示

    


    

        

            
首页
            
关于我们
            
联系方式
            
招聘信息
        
    

变形的列表

    


    

        

            

                
                

                
陌陌上市
            
            

                
测试文字
            
        
        

            

                
                

                
陌陌上市
            
            

                
测试文字
            
        
        

            

                
                

                
陌陌上市
            
            

                
测试文字
            
        
        

            

                
                

                
陌陌上市
            
            

                
测试文字
            
        
    

animation动画(上)

1. animation-name：设置动画的名字（自定义的）
2. animation-duration：动画的持续时间
3. animation-delay：动画的延迟时间
4. animation-iteration-count：动画的重复次数，默认值就是1，infinite无限次数
5. animation-timing-function：动画的运动形式

注：

1. 运动结束后，默认情况下会停留在起始位置.
2. @keyframes：from——0，to——100%

划入划出的小图标

loading加载动画效果

animation动画(下)

animation-fill-mode：规定动画之前或之后，其动画效果是否可见。

1. none（默认值）：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
2. backwards：在延迟的情况下，让0%在延迟前生效
3. forwards：在运动结束之后，停到结束位置
4. both：backwards和forwards同时生效

    

    
1
    
2
    
3
    
4

animatiom-direction：属性定义是否应该轮流反向播放动画。

1. alternate：一次正向（0%_{100%），一次反向（100%}0%）
2. reverse永远都是反向，从100%~0%
3. normal（默认值）：永远都是正向，从0%~100%

_animate.css动画库

一款强大的预设CSS3动画库

基本使用：

animated:基类（基础的样式，每个动画效果都需要加）
infinite：动画的无限次数

transform3D相关属性

transform:

1. rotateX():正值向上翻转
2. rotateY():正值向右翻转
3. translateZ():正值向前、负值向后
4. scaleZ():立体元素的厚度

3d写法：

1. scale3d：三个值 x y z
2. translate3d：三个值 x y z
3. rotate3d：四个值 0|1（x轴是否添加旋转角度） 0|1

perspective(景深)：离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin：景深-基点位置，观察元素的角度。(center center -50px),Z轴只能写数值，不能写单词
transform-origin：x y z
transform-style：3D空间（默认值2d：flat；3d：preserve-3d）
backface-visibility：背面隐藏（hidden；visiable（默认值））

实现3d立方体

    


    

        

            
1
            
2
            
3
            
4
            
5
            
6
        
    

立方体扩展

    

    

        

            
1
            
2
            
3
            
4
            
5
            
6
        
    

3D效果之旋转木马

_3D效果之翻转图片

背景尺寸位置裁切等

1. background-size:背景图的尺寸大小
   1. cover：覆盖
   2. cotain：包含
2. background-origin：背景图的填充位置
   1. padding-box（默认）
   2. border-box
   3. content-box
3. background-clip：背景图的裁切方式
   1. padding-box
   2. border-box（默认）
   3. content-box

线性渐变与径向渐变

1. 线性渐变->linear-gradient是值，需要添加到background-image属性上。

   注：渐变的0度是在页面的最下边，正值会按照顺时针旋转，负值按照逆时针旋转。

2. 径向渐变->radial-gradient

渐变的加载进度条

字体图标

阿里巴巴矢量图标库

font-face是CSS3中的一个模块，主要是把自己定义的web字体嵌入到网页中。

好处：

1. 可以非常方便地改变大小和颜色（font-size ；color）
2. 放大后不会失真
3. 减少请求次数和提高加载速度
4. 简化网页布局
5. 减少设计师和前端工程师的工作量
6. 可使用计算机没有提供的字体

使用：

@font-face语法

像.woff等文件都是做兼容平台处理的，mac，unix

    

    





    


    

_iconfont