1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>css3</title>
6 圆角边框：
7 border-radius属性：
8 border-radius：水平值 垂直值 两个值一样时，写一个
9 border-top-left-ridius：左上角的形状
10 border-top-right-ridius：右上角的形状
11 border-bottom-left-ridius：左下角的形状
12 border-bottom-right-ridius：右下角的形状
13 如果画圆形，水平值=垂直值=1/2正方形边长
14 阴影：
15 box-shadow属性：
16 box-shadow：inset/outset 水平偏移 垂直偏移 模糊距离 阴影颜色
17 inset：可选，内部阴影
18 outset：默认值，外部阴影
19 水平偏移、垂直偏移都为正数，则阴影向右下角偏移；都为负数，则阴影都向左上角偏移
20
21 文本与文字：
22 text-shadow属性：设置文本阴影属性，可以设置字体效果
23 text-shadow：水平偏移 垂直偏移 阴影大小 阴影颜色； 阴影大小可以省略
24 水平偏移、垂直偏移都为正数，则阴影向右下角偏移；都为负数，则阴影都向左上角偏移
25 word-wrap属性：设置长文本换行属性，允许长单词、url强制换行
26 normal:正常显示，默认不拆分
27 break-word:拆分成若干行
28 @font-face规则：定义网页字体即web字体,放在服务器上，需要时下载使用
29 字体格式文件后缀：.TTF、.OTF、.EOT、.SVG、.WOFF；支持不同的浏览器
30 生成其他格式字体网站：https://www.fontsquirrel.com/tools/webfont;提供一种字体，转换成其他格式，下载使用
31 使用@font-face规则，引用的字体名称font-family的值要相同,如下:P{font-family:FontName;}
32
33 2D转换方法：对元素进行平面上旋转、缩放、移动、拉伸
34 transform属性：
35 rotate():旋转函数，单位为deg，值可以是正负值，如：transform:rotate(xx deg);
36 正值顺时针旋转，负值逆时针旋转
37 scale():缩放函数，如：transfrom:scale(x,y);
38 x-水平方向缩放的倍数，y-垂直方向缩放的倍数，y若省略，值同x；
39 0-1：缩小；>1:放大
40
41 过度：从一种状态过度都另一种状态，两种状态之间的变化
42 transition属性：将元素的某个属性从“一个值”在指定的时间内过度到“另一个值”
43 transition: 属性名 持续时间 过度方法 延迟时间
44 transition-property属性：属性名/all；多个属性名用逗号隔开； 对哪个属性进行变化
45 transition-duration属性：持续时间
46 transition-timing-function属性：过度使用的方法（函数）；过度的效果
47 属性取值：
48 linear：匀速
49 ease：慢快慢
50 ease-in：慢快
51 ease-out：快慢
52 ease-in-out：慢快慢
53 transition-delay属性:延迟开始播放时间
54
55 动画：一个元素通过animation属性来完成若干种状态之间的一个转换
56 动画规则：@keyframes:关键帧
57 @keyframes mycolor{定义动画名称；播放图片可以设置：50%{background: url(image/image-05.jpg);}
58 0% {background-color: red;} 定义每个动画状态名称，0%表示开始状态
59 30% {background-color: blue;} 30%表示动画进行到30%状态
60 60% {background-color: yellow;} 60%表示动画进行到60%状态
61 100% {background-color: green;} 100%表示动画结束状态
62 }
63 animation属性：
64 #anima:hover{
65 animation: mycolor 5s linear;
66 简写方式：mycolor表示调用动画规则的名称，5s表示动画（0%-100%）完成的时间，linear表示动画播放的方法
67 animation-name：引用@keyframes动画的名称
68 animation-duration：动画完成的时间
69 animation-timing-function：动画的播放方式，规定动画的速度曲线，默认是ease
70 animation-play-state：running/paused，表示动画播放中或者结束状态，可以设置鼠标悬停时播放或者结束
71 }
72
73 3D变换
74 3D：transfrom-style：perserve-3d,声明这是个3D变换,要使用3d变换，必须设置3d声明
75 旋转：
76 transform属性：空间上的旋转角度XYZ deg，沿着XYZ轴旋转，z轴垂直于XY轴
77 rotateX(n deg)：沿着X轴旋转,n为旋转角度，deg为单位
78 rotateY(n deg)：沿着Y轴旋转
79 rotateZ(n deg)：沿着Z轴旋转
80 transfrom:rotateX(60deg);表示沿X轴旋转60度
81 透视：perspective属性: 近大远小，表示视线的距离，值越大则越不明显，值越小则越明显
82 perspective：100px;视线的距离为100px；
83
84 <style type="text/css">
85 #box{
86 text-align: center;
87 height: 100px;
88 width: 150px;
89 border: 1px solid blue;
90 border-top-left-radius: 40px 20px;
91 border-bottom-right-radius: 20px;
92 box-shadow: 20px 20px 10px #888
93 }
94 #text{
95 margin: 100px auto;
96 height: 100px;
97 width: 200px;
98 border: 1px solid blue;
99 text-shadow: 2px 2px 1px #FF0000;
100 }
101 p.wrap{
102 width: 8em;
103 border: 1px solid #333;
104 word-wrap: break-word;
105 }
106 @font-face{
107 font-family: FontName；
108 src:url('fonts/kastler.ttf'),
109 url('fonts/kastler.eot'),
110 url('fonts/kastler.woff'),
111 url('fonts/kastler.svg');
112 }
113 p{
114 font-family: FontName;
115 }
116 div{
117 width: 100px;
118 height: 75px;
119 background-color: #ccc;
120 border: 1px solid black;
121 }
122 #rotateDiv{
123 transform: rotate(30deg);
124 }
125 #box1{
126 margin: 100px auto;
127 }
128 #box1:hover{
129 transform: scale(1.2);
130 }
131 #trsf{
132 margin: 100px auto;
133 height: 30px;
134 width: 150px;
135 border-radius: 5px;
136 color: #000;
137 background-color: silver;
138 transition: all 3s linear 3s;
139 }
140 #trsf:hover{
141 color: white;
142 background-color: #45B823;
143 }
144 @keyframes mycolor{
145 0% {background-color: red;}
146 30% {background-color: blue;}
147 60% {background-color: yellow;}
148 100% {background-color: green;}
149 }
150 @keyframes img{
151 0%{background: url(image/image-03.jpg);}
152 50%{background: url(image/image-05.jpg);}
153 100%{background: url(image/image-06.jpg);}
154 }
155 #anima:hover{
156 animation: img 5s linear 2s;
157 }
158 #anima{
159 margin: 100px auto;
160 }
161 #stage{
162 width: 306px;
163 height: 101PX;
164 margin: 100px auto;
165 perspective: 100px;
166 }
167 .box3{
168 width: 100px;
169 height: 100px;
170 float: left;
171 transition: 1s linear 5s;
172 transform-style: preserve-3d;
173 }
174 img{
175 width: 100px;
176 height: 100px;
177 }
178 .x:hover{
179 transform: rotateX(60deg);
180 }
181 .y:hover{
182 transform: rotateY(60deg);
183 }
184 .z:hover{
185 transform: rotateZ(60deg);
186 }
187
188
189 </style>
190 </head>
191 <body>
192 <h1></h1>
193 <p class="wrap">ASDFGHJKLZXCVBNMQWERTYUIOP</p>
194 <div id="box">圆角边框及阴影</div>
195 <div id="text">文本阴影</div>
196 <div id="container">
197 <div>正常角度</div>
198 <div id="rotateDiv">旋转角度</div>
199 </div>
200 <div id="box1">鼠标悬停放大缩小效果</div>
201 <div id="trsf">鼠标悬停过度效果</div>
202 <div id="anima">鼠标悬停动画播放效果</div>
203 <div id="stage">
204 <div class="box3 x">
205 <img src="image/image-03.jpg">
206 </div>
207 <div class="box3 y">
208 <img src="image/image-05.jpg">
209 </div>
210 <div class="box3 z">
211 <img src="image/image-06.jpg">
212 </div>
213
214 </div>
215 <br/>
216 <br/>
217 <br/>
218 </body>
219 </html>
