css3特性简要概括

---恢复内容开始---

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

css3新增核心知识
    背景和边框
    文本效果
    2d/3d转换
    过渡和动画
    多列布局
    弹性盒模型
    媒体查询
    增强选择器
 
 css3浏览器兼容性
 
 css3在线工具
 css3generator
 http://css3generator.com/
 https://www.colorzilla.com/gradient-editor/
 https://css-tricks.com/examples/ButtonMaker/
 
 border-radius:15px 25px 35px 45px;
 
 左上角，右上角，右下角，左下角
 
 css3阴影：
    box-shadow:h-shadow v-shadow blur color 
 
设置背景图片：
    background-image(允许设置多个背景图片)
    clip
    origin
    size
 
    background-image:url(shixun.png),url(bg.png);
                position:right top,left top
                repeat:no-repeat,repeat
                origin
文本：
 
    text-shadow
    word-wrap:换行 break-word 强制换行
    text-overflow :设置文本内容溢出时控制规则
    word-break
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis
 
css3 选择器
    https://www.caniuse.com/
    新增选择器：
        属性选择器 [^:开头 $结尾 ~其中有一个]
        伪类选择器：first-child nth-child(1) first-of-type 匹配同类型中的第一个同级兄弟元素E
        伪元素选择器：:: 已经不局限使用样式选择器，对内容进行操作
 
 
    E::before 配合content使用
    E::after 配合content使用
    E::first-letter 第一个字母
    E::first-line 设置元素第一行的样式
    E::selection 设置元素被选中的样式
 
2019/7/17
css3 过渡：将元素从一种状态转变为另一种状态（简单的动画效果）
   
transition-property 设置过渡属性（效果）
transition-duration 设置过渡效果持续时间（n ms内完成）
transition-timing-function  设置过渡效果时间曲线
transition-delay 设置过渡效果开始时间（延迟）
 
transition:property duration timing-function delay
transition:width 2s linear 1
 
 
css3动画
 
利用@keyframes 创建高级动画效果
@keyframes 设置动画效果
animation 执行动画动作（简写形式）
animation-name 设置@keyframes动画的名称
animation-duration 设置动画完成一个周期所花费的毫秒
 
2019/7/18
 
css3 2d转换
transform 转换方法名称
 
transform:rotate(9deg);
-webkit-transform:rotate(9deg);
.....
 
transform:scale(2,0.5) 缩放
transfrom:translate(200px,50px);移动 //第一个参数left,二top
transform:skew(20deg,20deg);//第一个参数围绕x,第二个围绕y轴
 
css3 3d 转换
 
rotatex()
rotateY()
 
scalex()
scaley()
 
css3 媒体查询介绍---实现自适应布局
 
背景：针对不同的访问设备呈现不同的布局效果
 
在css3中利用媒体查询技术可以实现页面的“自适应布局”
 
响应式布局|| 自适应布局
 
响应式布局：
    一套布局适应不同设备
自适应布局：
    根据分辨率的不同，界面有会调整
 
查询实现的方法：
@media
第一种方式
@media 类型 and (条件1) and (条件2) {
    ...css样式定义
}
 
@media screen and (min-width：375px) and (max-width:980px) {
    body {
 
    }
}
 
第二种：@importt 导入制定css
 
/*当屏幕可视窗口尺寸 <=980 px 像素时导入default.css文件*/
@import url("default.css") screen and (max-width:980px);
 
 
第三种：在link标签中导入指定css
 
default.css
index.html
<link href="default.css" media="screen and (max-width:980px)"/>

　　1.过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width:200px;
            height:100px;
            background: #ccc;
            transition-property:width;
            transition-duration:2s;
            transition-timing-function:linear;
            transition-delay:1s;
        }
     
        div:hover {
            width:500px;
        }
 
    </style>
</head>
<body>
    <div>hello world!</div>
</body>
</html>

　　2.动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width:200px;
            height:100px;
            background: #ccc;
            animation-name: animation-1;
            animation-duration: 2s;
            animation-iteration-count: infinite; /*定义动画播放的次数*/
            animation-direction: alternate;
            animation-play-state: running;
        }
     
        @keyframes animation-1 {
            from {
                background:yellow;
            }
 
            to {
                background:blue;
            }
        }
 
    </style>
</head>
<body>
    <div>hello world!</div>
</body>
</html>

　　3.用media做的自适应布局

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div>
        <header>
            <ul>
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
            </ul>
        </header>
        <article>
            <section>内容1</section>
            <section>内容2</section>
            <section>内容3</section>
        </article>
        <footer class="footer">
            底部
        </footer>
    </div>
</body>
</html>

　　css:

100

101

102

103

* {
    margin: 0;
    padding: 0;
}
 
div {
    width:1200px;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    margin: 0 auto;
    color:#fff;
}
 
header {
    background: red;
    height:50px;
}
 
header ul {
    width:100%
}
 
header ul>li {
    width:20%;
    float: left;
    list-style: none;
    font-size:none;
    border-right:4px solid #fff;
    box-sizing: border-box;
}
 
article {
    width:100%;
    height:300px;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
     
}
section:first-child {
    width:20%;
    height:300px;
    border-right:5px solid #fff;
    background:red;
    float:left;
    box-sizing: border-box;
}
 
section:nth-child(2){
    width:60%;
    height:300px;
    border-right:5px solid #fff;
    background:green;
    float:left;
    box-sizing: border-box;
}
 
 
section:last-child {
    width:20%;
    height:300px;
    background:blue;
    float:left;
    box-sizing: border-box;
}
 
footer {
    width:100%;
    background: pink;
}
 
@media screen and (max-width:980px){
    section:last-child {
        display:none;
    }
 
    section:first-child {
        width:40%;
        box-sizing: border-box;
    }
 
    section:nth-child(2){
        width:60%;
        box-sizing: border-box;
        border:none;
    }
}
 
@media screen and (max-width:640px) {
    header,
    footer {
        display: none;
    }
    section:first-child,
    section:nth-child(2),
    section:last-child {
        width: 100%;
        display: block;
        float:none;
        border:none;
    }
 
}