标签：透明 dde dir 阴影 情况下 animation 效果 调用 过程
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{margin:0;padding:0;}
8 .box{
9 width:200px;
10 height:100px;
11 background:red;
12 margin:100px;
13 box-shadow:10px 10px 10px 10px pink;/*--盒子阴影--*/
14 -webkit-box-shadow:10px 10px 10px 10px pink;/*--谷歌 盒子阴影--*/
15 -mox-box-shadow:10px 10px 10px 10px pink;/*--火狐 盒子阴影--*/
16 -ms-box-shadow:10px 10px 10px 10px pink;/*-- ie盒子阴影--*/
17 -o-box-shadow:10px 10px 10px 10px pink;/*--欧朋盒子阴影--*/
18 background:-webkit-linear-gradient(left,red,yellow,pink);/*--单一方向线性渐变--*/
19 background:linear-gradient(to left,red,yellow,pink);/*--单一方向线性渐变--*/
20 background:-webkit-linear-gradient(left top,red,yellow,pink);/*--对角方向线性渐变--*/
21 background:linear-gradient(to left,red 10%,yellow 10%,pink 10%);/*--角度方向线性渐变--*/
22 background:linear-gradient(20deg,red,yellow,pink);/*--均分线性渐变--*/
23 background:-webkit-radial-gradient(red,yellow,pink);
24 background:-webkit-radial-gradient(left top,red,yellow,pink);
25 background:-webkit-radial-gradient(60px 30px,circle,red 10%,blue 20%);
26 }
27 </style>
28 </head>
29 <body>
30 <div class="box"></div>
31 </body>
32 </html>
33 <!--
34 bfc概念：
35
36 bfc:块级格式化上下文(有特殊功能的容器)
37
38 bfc区域的布局规矩
39 1：bfc区域中的元素垂直摆放，一个挨着一个
40 2：bfc区域中的元素间距有margin，同属于同一个bfc区域的元素margin会重叠
41 3：每个元素的左边距挨着父级元素的左边框
42 4：bfc区域不会与float元素重叠
43 5：bfc区域中的元素不会影响外面的元素
44 6：计算bfc元素高度时，浮动元素也参与计算
45
46 bfc区域的触发条件
47 1：html（根元素）是一个最大的bfc区域
48
49 2：position为
50 position："absolute";
51 position："fixed";
52
53 3：display为
54 inline-block
55 table-cell
56 table-caption
57 flex
58 inline-flex
59
60 4：overflow不为visible
61 overflow:hidden;可以 ，常用
62
63 5:float不为none
64
65 bfc的应用：
66 1：两列布局，三列布局
67 2：清除高度塌陷
68 3：是垂直方向的外边距不合并（父子关系）
69
70 bfc区域防止margin重叠
71 默认情况下，房父子关系的元素，垂直外边距将重叠
72
73 解决方法：添加overflow：hidden;
74
75
76 css属性：预览版，还没有正式的最终版，所以有很多的兼容性问题，浏览器不识别
77 浏览器为了使这些属性兼容，每个浏览器厂商都提供了一个属于自己的浏览器的语法规则，浏览器兼容前缀
78
79 主流浏览器：
80 谷歌、火狐、苹果、 欧朋、 ie
81
82 浏览器前缀：
83 -webkit- 谷歌浏览器
84 -moz- 火狐浏览器
85 -ms- ie浏览器
86 -o- 欧朋浏览器
87
88 box-shadow:0px 0px 0px 0px pink; 盒子阴影
89 (水平 、上下、 模糊度、大小、颜色)
90
91
92 渐变：
93 background:linear-gradient(left,red,yellow,pink); /*--线性渐变--*/
94 background:-wekit-linear-gradient(left,red,yellow,pink)
95
96 1：单一方向
97 left 从左开始
98 right
99 top
100 bottom
101 注意：需要添加兼容前缀
102
103 to left 到左（结束位置）
104 to right
105 to top
106 to bottom
107 注意：不需要添加兼容前缀
108
109 2：对角方向
110 left top 从左上开始
111 注意：需要添加兼容前缀
112
113 to left top 到左上
114 注意：不需要添加兼容前缀
115
116 3：角度的渐变
117 10deg 10度
118
119 4：默认情况下颜色趋于均分
120 可以指定颜色分别的百分比，让颜色按照百分比进行渐变
121 blue 10%，red 70%， 10%开始渐变，10%-70%渐变过程
122 blue 10px，red 70px，10px开始渐变，10-70px渐变过程
123
124 径向渐变(一定要加浏览器前缀)
125 从一个点到四周渐变
126 background:-webkit-radial-gradient(渐变位置，颜色，颜色)
127
128 渐变位置：默认从圆心开始
129 left 从左边开始
130
131 left top 左上开始
132
133 10px 30px 左边10px 上边30px开始
134
135 形状：
136 默认椭圆 ellipse
137 正圆 circle
138 注意：元素师正边型，则是正圆
139
140 大小：
141 size： 渐变的大小，即渐变到哪里结束，有四个值
142 closest-side: 最近边
143 farthest-side: 最远边
144 closest-corner: 最角边
145 farthest-corner: 最远角
146
147
148 渐变重复：repeating
149 线性渐变：
150 background:repeating-linear-gradient(left,red 10%,blue 10%);
151 background:-webkit-repeating-linear-gradient(left,red 10%,blue 10%);
152
153 径向渐变：
154 background:repeating-radial-gradient(left,red 10%,blue 10%);
155 background:-webkit-repeating-radial-gradient(left,red 10%,blue 10%);
156
157 补充：
158
159
160 过度：让元素的动画发生平滑的效果，而不是生硬直接的效果
161 1:什么属性在做动画 transition-property:属性1，属性2，属性3；
162 2:过度时间 transition-duration:2s;
163 3:等待时间 transition-delay:3s;
164 4:动画类型 transition-timing-function:linear;
165 linear 线性过度
166 ease 平滑过度
167 ease-in 由慢到快
168 ease-out 由快到慢
169 ease-in-out 由慢到快再到慢
170 step-start 马上跳到结束状态 steps(4)分4步
171 5:综合写法:
172 transition:属性 过渡时间 延迟时间 动画类型；
173 transition:width 0.5s 2s linear;
174
175 css3中的2d
176 二维的平面空间
177
178 css3 2d属性
179 变形属性 transition:；
180
181 2d变换：transform
182 位移 transform:translate(100px,50px)；
183 transform:translate(水平 ,垂直)；
184 transform:translate(水平)；
185 transform:translateX(水平)；
186 transform:translateY(垂直)；
187 默认情况：正值从上往下，从左往右
188
189 旋转 transform:rotate()；旋转是一个度数deg
190 默认中心点旋转 z轴
191 transform:rotateX(60deg)； x轴
192 transform:rotateY(60deg)； y轴
193 transform-origin：left top; 旋转基点
194 transform-origin：10px 10px;
195
196 缩放 transform:scale{100px，100px}；
197 transform:scale{水平垂直一起缩小}；
198 transform:scale{水平，垂直}；
199 transform:scaleX{水平}；
200 transform:scaleY{垂直}；
201 取值范围：0-0.999999 缩小
202 1 原来大小
203 >1 放大
204
205 倾斜 transform:skew(60deg 60deg);
206 transform:skewx(水平);
207 transform:skewy(垂直);
208 transform:skew(水平 垂直);
209
210 综合写法
211 transform:translate(100px) rotate(5deg) scale(2) skew(60deg);
212
213 选择器 :target{}
214
215 background:rgba(红,绿,蓝,透明度)
216 background:rgb(255,0,0); 背景颜色
217 background:rgba(255,0,0,0.5) 背景颜色透明 a取值0.5-1
218
219 css 景深（3D的空间）
220
221 观察物体的时候，近大远小，给父级添加
222 形成3D空间
223 transform-style:preserve-3d;
224 添加 景深
225 perspective:900px; 建议900-1200px
226
227 设置观察点
228 perspective-origin:left top; 左上角观察
229 :100px 100px;
230
231 3D功能函数：
232 3D的位移
233 transform：translateX(10xp);
234 translateY(10xp);
235 translateZ(10xp);
236 3D的旋转
237 transform：rotateX(10xp);
238 rotateY(10xp);
239 rotateZ(10xp);
240
241 旋转背面不可见
242 backface-visibility:hidden;
243
244
245 动画
246 transition:; 过度需要时间触发
247 animation 动画不需要事件触发，使用关键帧就可以执行
248 1: 定义动画 @keyframes mz{
249 from{}
250 to{}
251 }
252 from{} 起始位置
253 to{} 结束位置
254
255 2:调用动画
256 animation:;
257 综合写法：
258 animation:名字 时间 速度 延迟时间 次数…；
259 animation-name:mz; 动画名字 关键帧
260 animation-duration:1s; 时长
261 animation-delay:0s; 延迟时间
262 animation-iteration-count:2; 执行次数（默认1次）
263 animation-iteration-count:infinite; 无限循环
264 animation-direction:reverse; 反方向运动
265 animation-direction:alternate; 正开始，正反循环运动
266 animation-direction:alternate-reverse；反开始，正反循环运动
267 animation-timing-function:ease; 平滑过度，运动速度类型
268 animation-play-state:running; 运动
269 animation-play-state:paused; 暂停 需要结合hover
270
271 表单：
272
273
274
275
276
277
278
279
280
281
282 -->
标签：透明 dde dir 阴影 情况下 animation 效果 调用 过程
原文地址：https://www.cnblogs.com/tgs761578449/p/12676566.html
