update: CSS 背景属性
This commit is contained in:
qianguyihao
parent
5414be9d2d
commit
96940fa4a5
@ -414,13 +414,9 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
}
|
||||
|
||||
.div1 {
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
background-size: cover;
|
||||
}
|
||||
.div3{
|
||||
.div2{
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
@ -430,7 +426,6 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
<section class="img_wrap">
|
||||
<div class="img div1"></div>
|
||||
<div class="img div2"></div>
|
||||
<div class="img div3"></div>
|
||||
|
||||
</section>
|
||||
</body>
|
||||
@ -442,6 +437,10 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
|
||||
|
||||
|
||||
在上方代码的基础之上，再加一个 `background-position: center`属性之后，图片就会在容器里**居中显示**：
|
||||
|
||||
|
||||
|
||||
## 背景原点：`background-origin` 属性
|
||||
|
||||
`background-origin` 属性：控制背景从什么地方开始显示。
|
||||
@ -847,7 +846,7 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
|
||||
`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
|
||||
|
||||
虽然`clip-path`不是背景属性，但往往会结合背景属性一起使用，达到一些效果。
|
||||
虽然`clip-path`不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
|
||||
|
||||
举例：（鼠标悬停时，放大裁剪的区域）
|
||||
|
||||
@ -875,7 +874,9 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
|
||||
|
||||
|
||||
另外，还可以引入 svg 图形，这里就不详细展开了。
|
||||
另外，通过 `clip-path: (svg)` 可以导入svg矢量图，实现 iOS图标的圆角。这里就不详细展开了。
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
|
||||
@ -27,7 +27,6 @@
|
||||
|
||||
transition 包括以下属性：
|
||||
|
||||
|
||||
- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。
|
||||
|
||||
- `transition-duration: 1s;` 过渡的持续时间。
|
||||
@ -722,7 +721,7 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
|
||||
|
||||
|
||||
|
||||
**案例：**百度钱包
|
||||
**案例**：百度钱包的水平翻转效果
|
||||
|
||||
现在有下面这张图片素材：
|
||||
|
||||
@ -918,7 +917,7 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
|
||||
|
||||
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
|
||||
|
||||
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
|
||||
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。
|
||||
|
||||
格式有两种写法：
|
||||
|
||||
@ -926,15 +925,20 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
|
||||
|
||||
- 作为 transform 属性的一个值，做用于元素自身。
|
||||
|
||||
格式举例：
|
||||
|
||||
```css
|
||||
perspective: 500px;
|
||||
```
|
||||
|
||||
### 4、3D呈现（transform-style）
|
||||
|
||||
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下：
|
||||
|
||||
```css
|
||||
transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */
|
||||
|
||||
```javascript
|
||||
transform-style: preserve-3d; //让 子盒子 位于三维空间里
|
||||
|
||||
transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）
|
||||
transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
|
||||
|
||||
```
|
||||
|
||||
@ -1033,12 +1037,10 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
## 动画
|
||||
|
||||
动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
|
||||
|
||||
|
||||
### 1、定义动画的步骤
|
||||
|
||||
（1）通过@keyframes定义动画；
|
||||
@ -1057,7 +1059,6 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
|
||||
fun();
|
||||
```
|
||||
|
||||
|
||||
同样，我们在 CSS3 中**定义动画**的时候，也是**先定义，再调用**：
|
||||
|
||||
```javascript
|
||||
@ -1071,7 +1072,6 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
|
||||
animation: 动画名称 持续时间；
|
||||
```
|
||||
|
||||
|
||||
其中，animation属性的格式如下：
|
||||
|
||||
```javascript
|
||||
@ -1082,9 +1082,6 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
|
||||
animation: move2 4s;
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
**定义动画的格式举例：**
|
||||
|
||||
```html
|
||||
@ -1363,7 +1360,6 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
|
||||
|
||||
这下，你应该恍然大悟了。
|
||||
|
||||
|
||||
**（2）第二步**：让鱼所在的盒子向前移动。
|
||||
|
||||
实现的原理也很简单，我们在上一步中已经让`shark`这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 `sharkBox`向前移动，即可。完整版代码是：
|
||||
@ -1423,10 +1419,8 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
大功告成。
|
||||
|
||||
工程文件如下：
|
||||
@ -1434,8 +1428,6 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
|
||||
- [2018-02-09-fishes.rar](http://download.csdn.net/download/smyhvae/10255540)
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
@ -46,10 +46,21 @@ css 进阶的主要内容如下。
|
||||
|
||||
- js 框架中的 css 集成实践
|
||||
|
||||
|
||||
## 常见问题
|
||||
|
||||
> 不会 css 的前端称之为伪前端。
|
||||
|
||||
|
||||
### Vue 中模拟Scoped CSS的方式
|
||||
|
||||
方案一：随机选择器。css modules。
|
||||
|
||||
方案二：**随机属性**。`<div abcd>`、`div[adcd]{}`
|
||||
|
||||
|
||||
### 其他问题
|
||||
|
||||
- html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？
|
||||
|
||||
- 比如说，为什么 div 可以放在 a 标签里面？
|
||||
|
||||
@ -175,4 +175,6 @@ flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局
|
||||
|
||||
## 响应式布局
|
||||
|
||||
移动端用得较多，暂时忽略。
|
||||
移动端用得较多，本文暂时先不讲。
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user