web前端 5 CSS3

CSS3

CSS3

CSS3新特性 CSS3应用可以做文字阴影 盒子的圆角和阴影 鼠标放到图片时显示文字的效果
每个新的CSS3属性，不同核心浏览器要带上不同前缀

border-radius 圆角边框

border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
border-radius 水平值 垂直值 当只有一个值时表示水平值和垂直值是一样的正圆

box-shadow 阴影

box-shadow inset/outset 水平移动值 垂直移动值 模糊距离 颜色 水平移动值和垂直移动值是负数阴影在左上角

练习：圆角边框和阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            height: 50px;
            width: 1000px;
            border-radius:    25px; /*圆角边框*/
            border: 1px solid blue;
            background-color: #ccc;
            margin: 0 auto;
            box-shadow: 10px 10px 5px #888; /*阴影*/
        }
    </style>
</head>
<body>
    <div></div>    
</body>
</html>

效果图

text-shadow 文字阴影

text-shadow 水平移动值 垂直移动值 模糊距离 颜色

文字描边效果

文字浮雕效果

word-wrap 长文本折叠效果

他可以允许URL,长单词强行进行换行
break-word 自动换行 normal 默认不换行

@font-face规则

在CSS3之前如果要显示特殊字体用户需要自己下载字体到本地的C:\Windows\Fonts中或者把特殊字体做为图片显示，这样的缺点是图片加载慢和用户并不会去更新
在CSS3后把特殊字体放到服务器端的fonts目录下 并定义好通过@font-face规则定义为web字体的文字和源文件，这样用户就会自动下载该字体显示

web字体 通过@font-face规则定义的字体
为了适用于不同浏览器，一般web字体都要有.TTF .EOF .SVG .WOFF这四种不同格式的字体
https://www.fontsquirrel.com/tools/webfont-generator 可以通过这个网址提交一种字体格式来生成其他格式的字体

使用流程
1）在fonts目录下放入字体

2）定义web字体和应用它

2D转换

对元素进行旋转 缩放 移动 拉伸
transform:rotate(deg) 旋转 degree度数表示旋转度数 正为顺时针 负为逆时针

transform:scale(x,y) 缩放 x表示水平缩放比例 y表示垂直方向缩放比例，省略表示和x一样

鼠标悬停放大效果 可以参考这个网址 https://zurb.com/playground/css3-polaroids

练习：图片放大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            height: 50px;
            width: 50px;
            margin: 0 auto;
            
        }
        img{
            box-shadow: 10px 10px 5px #888; /*阴影*/
            transform: rotate(15deg); /*图片顺时针转15度*/
        }
        .box:hover{
            transform:scale(1.2); /*鼠标悬挂放大图片*/
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#"><img src="1.png" alt=""></a>
    </div>
</body>
</html>

效果图

transition 过渡

将元素的某个属性从“一个值”在指定时间过渡到“另一个值”
transition 属性名 持续时间 过渡方法
transition-property 属性名/all 多个属性使用逗号分开 表示对哪个属性进行变化
transition-duration 时间s 表示过渡的时间
transition-timing-function 过渡使用的方法 表示过渡快慢函数

练习：背景颜色和字体过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            height: 30px;
            width: 100px;
            margin: 0 auto;
            text-align: center;
            line-height: 30px;
            border-radius:5px;
            color:#000;
            background-color:silver;
            transition:all 1s linear; /*所有属性在1s内匀速过渡*/
        }
        div:hover{
            color:white;
            background-color:#45B823;  /*鼠标悬放时为过渡后的结果*/
        }
    </style>
</head>
<body>
    <div>web design</div>
</body>
</html>

效果图

animation 动画效果

transition属性是从一个状态过渡到另一个状态 如果有多个状态要进行过渡就是animation属性

animation 关键帧名字 持续时间 过渡方法
animation-name 引用@keyframes定义的名字 表示关键帧名字
animation-duration 时间s 表示动画执行的时间
animation-timing-function 过渡使用的方法 表示过渡快慢函数
animation-play-stat running/paused 表示动画运行的状态

使用@keyframes定义动画名 百分比是不同状态下的名字，再使用animation属性调用它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            height: 30px;
            width: 100px;
            margin: 0 auto;
            text-align: center;
            line-height: 30px;
        }
        @keyframes mycolor {  /*定义动画效果*/
                0% {background-color: red;}
                30% {background-color: blue;}
                60% {background-color: yellow;}
                100% {background-color: green;}
            }
        div:hover{
            animation: mycolor 5s linear;  /*鼠标悬放执行动画效果*/
        }
    </style>
</head>
<body>
    <div>web design</div>
</body>
</html>

练习：实现鼠标悬放图片文字上移效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #container{
            width: 510px;
            margin: 0 auto;
        }
        .wrap{
            width: 170px;
            height: 190px;
            overflow: hidden; /*只显示图片盒子*/
            position: relative;
        }
        .text{
            width: 170px;
            height: 190px;
            text-align: center;
            position: absolute;
            top: 190px;         /*文字盒子开始在图片盒子下面看不到*/
            transition:all 0.5s ease-out;
        }
        p{
            line-height: 170px;
        }
        .wrap:hover .text{    /*文鼠标悬放在图片上文字盒子会移动上来*/
            top: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="wrap">
            <img src="1.png" alt="">
            <div class="text">
                <h1>正文</h1>
                <p>内容</p>
            </div>
        </div>
    </div>
</body>
</html>

效果图

3D变换

transform-style:preserve-3d 转换为3d效果 在父容器中设置
transform:rotateX(deg)/rotateY(deg)/rotateZ(deg) 安照x,y,z轴旋转 在父容器中设置
perspective: 值px 透视效果，物体会近大远小 值越小越明显 在舞台容器中设置

安照x,y,z轴旋转

3d变换的嵌套结构

练习：图片翻转显示文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #0d3462;
        }
        #stage{
            width: 760px;
            height: 220px;
            margin: 100px auto;
        }
        .box{
            float: left; /*父盒子divbox都排位一列*/
            width: 170px;
            height: 190px;
            margin: 10px;
            position: relative; /*父盒子divbox是相对定位*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;    
            transition: 1.5s; /*1.5s内完成变换*/
        }
        .box:hover{
            transform: rotateY(180deg); /*鼠标悬挂是沿Y轴旋转180度*/
        }
        .face{
            width: 170px;
            height: 190px;
            position: absolute; /*子盒子的是绝对定位 那位这层盒子就会失去原来的位置 图片层和文字层就会重叠*/
        }
        .front{
            border: 2px solid #4b2518;
        }
        .back{
            transform: rotateY(180deg); /*默认文字是相反的*/
            background-color: #4b2518;
            border: 2px solid #fff;
        }
        .back h3{
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="stage">
        <div class="box">
            <div class="face front"><img src="images/1.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>
        </div>
        <div class="box">
            <div class="face front"><img src="images/2.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>
        </div>
        <div class="box">
            <div class="face front"><img src="images/3.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>
        </div>
        <div class="box">
            <div class="face front"><img src="images/4.jpg" alt=""></div>
            <div class="face back"><h3>浓缩咖啡</h3></div>
        </div>
    </div>
</body>
</html>

效果图

练习：咖啡网页

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="container">
    <div id="header">
        <img src="images/banner.jpg" alt="">
        <div id="icon-list">
            <img src="images/1.bmp" alt="">
            <img src="images/2.bmp" alt="">
            <img src="images/3.bmp" alt="">
            <img src="images/4.bmp" alt="">
        </div>
    </div>
    <div id="nav">
        <a href="#">咖啡MENU</a>
        <a href="#">咖啡MENU</a>
        <a href="#">咖啡MENU</a>
        <a href="#">咖啡MENU</a>
        <a href="#">咖啡MENU</a>
    </div>
    <div id="main">
        <div id="aside">
              <h2>咖啡MENU</h2>
            <table >
              <tr>
                  <th ></th>
                <th >拿铁<br />Latte</th>
                <th >卡布奇诺<br />Cappuccino</th>
                <th >摩卡<br />Mocha</th>
                <th >浓缩咖啡<br />Espresso</th>
              </tr>
              <tr>
                <th scope="row"  >大杯</th>
                <td>35</td>
                <td>35</td>
                <td>35</td>
                <td>30</td>
              </tr>
              <tr>
                <th scope="row"  >中杯</th>
                <td>30</td>
                <td>30</td>
                <td>30</td>
                <td >25</td>
              </tr>
              <tr>
                <th scope="row"  >小杯</th>
                <td>25</td>
                <td>25</td>
                <td>25</td>
                <td>20</td>
              </tr>
            </table>
            <div id="imglist">
                <div class="pol rotate-left"><img src="images/Cappuccino.jpg" alt=""></div>
                <div class="pol rotate-right"><img src="images/Espresso.jpg" alt=""></div>
                <div class="pol rotate-left"><img src="images/Latte.jpg" alt=""></div>
                <div class="pol rotate-right"><img src="images/Mocha.jpg" alt=""></div>
            </div>
        </div>
        <div id="content">
            <div class="subcon">
                <img src="images/Cappuccino.jpg" alt="">
                <div class="subtext">
                    <h2>咖啡名</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eaque voluptate, enim odio soluta consequuntur asperiores accusantium quaerat, accusamus. Earum vel quod tenetur alias! Sed nisi placeat voluptas eum animi.</p>
                </div>
            </div>
            <div class="subcon">
                <img src="images/Espresso.jpg" alt="">
                <div class="subtext">
                    <h2>咖啡名</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quisquam at odio adipisci impedit, eveniet molestias ut nihil saepe magni. Aliquam non error velit quas, perferendis sint quisquam, molestiae tenetur.</p>
                </div>
            </div>
            <div class="subcon">
                <img src="images/Latte.jpg" alt="">
                <div class="subtext">
                    <h2>咖啡名</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores pariatur dolor voluptate ea iste voluptatem non possimus nobis, corporis porro quisquam nam sint ad delectus natus blanditiis, nostrum sed quos.</p>
                </div>
            </div>
            <div class="subcon">
                <img src="images/Mocha.jpg" alt="">
                <div class="subtext">
                    <h2>咖啡名</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique optio illo, facilis beatae magnam consequuntur provident culpa praesentium. Ipsa ipsam aspernatur, excepturi voluptates repudiandae sapiente nulla velit perferendis assumenda! Saepe.</p>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
    </div>
<div id="l-fix"><img src="images/Latte.jpg" alt=""></div>
</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
138
*{
    padding: 0;
    margin: 0;
}
body{
    font-size: 16px;
    color:#673929;
}
#container{
    width: 900px;
    margin: 0 auto;
}
#header{
    height: 220px;
    margin-bottom: 5px;
    position: relative;
    /*font-size: 0; 可以去除层定位中的img间的空隙*/
}
#icon-list{
    position: absolute; /*相对header层的层定位*/
    top:170px;
    right: 30px;
    width: 130px;
    height: 30px;
}
#nav{
    height: 30px;
    margin: 5px;
    line-height: 30px; /*30px表示行高 文字垂直居中*/
    background-color: #09c;
    font: 18px;
    color: white; /*字体颜色*/
    letter-spacing: 2px; /*字符边距*/
    text-align: center; /*文字水平居中*/
}
#nav a{
    text-decoration: none; /*链接没有下划线*/
}
a:link{
    color: white;
}
a:visite{
    color: white;
}
a:hover{
    color: yellow;
}
a:active{
    color: yellow;
}
#main{
    background-color: #000;
    /*height: 2050px; 有内容后去掉*/
}
#aside{
    float: left;
    width: 300px;
    height: 856px;
    background-color: #6cf;
    text-align: center;
    font-size: 14px;
}
#aside h2{
    margin: 20px auto;
}
#imglist{
    width: 130px;
    margin: 0 auto;
}
.pol{
    width: 85px;
    padding: 10px;
    background-color: #eee;
    box-shadow: 2px 2px 4px #aaa;
    border: 1px solid #bfbfbf;
    border-radius: 5px;
}
.pol img{
    height: 95px;
    width: 85px;
    margin: 0 auto;
}
/*使用基偶选择器来旋转图片*/
.pol:nth-child(odd){  
    transform: rotate(7deg);
}
.pol:nth-child(even){
    transform: rotate(-7deg);
}
/*使用类别旋转器来旋转图片也是可以*/
.rotate-left{
    transform: rotate(7deg);
}
.rotate-right{
    transform: rotate(-7deg);
}
#content{
    float: right;
    width: 595px;
    /*height: 2050px; 有内容后去掉*/
    background-color: #cff;
    margin-bottom: 5px;
}
.subcon{
    width: 570px;
    margin: 10px auto;
    clear: both;
}
.subcon img{
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px dashed #000;
}
.subcon .subtext{
    width: 60%;
    margin: 5px;
    float: left;
}
.subcon h2{
    margin: 5px;
}
.subcon p{
    font: 16px;
    line-height: 1em;
}
#footer{
    height: 60px;
    line-height: 60px;
    background-color: #6cf;
    text-align: center;
    clear: both; /*两侧没有定位会和main有空行*/
}
#l-fix{
    position: fixed; /*固定浏览器左上边的广告*/
    top: 20px;
    left: 5px;
}

效果图

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

欢迎光临<br><br>本博客是用来记录学习Linux Python Shell和Perl<br>谢谢大家