CSS侧重点

一、响应式布局media query

1、语法 @media not |only 设备类型 [ and 设备特性]

2、media query中设备类型表

例子：（注意中文空格，会导致代码异常，仔细排查）

<!--html-->
<div id="container">
    <div id="left">
        <h2>sdfkjksd</h2>
        1的开发搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到是大法官
    </div>
    <div id="main">
        <h2>sdfkjksd</h2>
        2的开发搭搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到
    </div>
    <div id="right">
        <h2>sdfkjksd</h2>
        3的开发搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到电饭锅
    </div>      
</div>

<!--css-->
* {
    padding: 0;
    margin: 0;
}

#container {
    text-align: center;
    margin: auto;
    width: 750px;
}

#container>div {
    border: 1px solid #aaf;
    text-align: left;
    box-sizing: border-box;
    border-radius: 12px 12px 0px 0px;
    padding: 5px;
}

div#left {
    width: 300px;
    height: 260px;
    float: left;
}

div#main {
    width: 450px;
    height: 260px;
    float: left;
    clear: right;
}

div#right {
    width: 750px;
    float: left;
}

@media screen and (min-width:1000px) {
    #container {
        text-align: center;
        margin: auto;
        width: 960px;
    }
    #container>div {
        border: 1px solid #aaf;
        box-sizing: border-box;
        border-radius: 12px 12px 0px 0px;
        padding: 5px;
    }
    div#left {
        width: 240px;
        height: 260px;
        float: left;
    }
    div#main {
        width: 460px;
        height: 260px;
        float: left;
        clear: none;
    }
    div#right {
        width: 260px;
        float: left;
        height: 260px;
    }
}

@media screen and (max-width:480px) {
    #container {
        text-align: center;
        margin: auto;
        width: 450px;
    }
    #container>div {
        border: 1px solid #aaf;
        box-sizing: border-box;
        border-radius: 12px 12px 0px 0px;
        padding: 5px;
    }
    div#left {
        width: 450px;
        height: 150px;
        float: left;
    }
    div#main {
        width: 460px;
        height: 260px;
        float: left;
        clear: both;
    }
    div#right {
        width: 450px;
        float: left;
        height: 170px;
    }
}

其实大部分不用自己写css进行处理，网络已有大量前端框架，比如layui ，其中有许多可以拿来现用。

二、变形与动画

1、变形相关属性

（1）、基本属性

（2）坐标实例（3维）

（3）变形可同时使用，变形之间需用空格隔开，而不是逗号

（4）变形中心试图行正中心可通过 transform-origin 属性改变变形中心点

（5）3D效果主要是近大远小的体现 3D透视效果必须设置perspective属性

注意： perspective值越小，3D效果越明显

（6）两个元素嵌套在一起，会有重叠，如果正常看到嵌套效果需要设置，transform-style属性。flat：不保留子元素3D位置 preserve-3d：保留子元素3d的位置

代码展示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>test1</title>
	<style>
		div{
			position:absolute;
			border:1px solid #000;
		}
		div#a{
			padding:60px;
			background:#eee;
			transform:rotateY(30deg);
			transform-style:preserve-3d;
		}
		div#b{
			padding:40px;
			background:#aaa;
			transform:rotateY(20deg);
		}
	</style>
</head>
<body>	
	<div id="a">
		<div id="b"></div>
	</div>
	
</body>
</html>

（7）3D背面当一个效果沿X或Y轴旋转超过90度会导致背面朝向我们可通过设置backface-visibility

2、animation动画相关属性

代码实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        @keyframes javags {
            0% {
                left: 100px;
                background-color: red;
            }
            50% {
                left: 200px;
                background-color: yellow;
            }
            70% {
                left: 150px;
                background-color: green;
            }
            100% {
                left: 75px;
                background-color: blue;
            }
        }
        
        div {
            background: red;
            width: 200px;
            height: 200px;
            margin: 200px;
            position: relative;
        }
        
        div:hover {
                animation-name: javags;
            animation-duration: 2s;
            animation-timing-function: ease;
            animation-iteration-count: 4;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

无限次循环动画

animation-iteration-count：infinite

Guess you like