H5C304

最新推荐文章于 2022-06-18 11:49:34 发布

翻译最新推荐文章于 2022-06-18 11:49:34 发布 · 271 阅读

前端自学笔记专栏收录该内容

41 篇文章

订阅专栏

H5C304

1、渐变
1）线性渐变
在这里插入图片描述
point，angle可取4个值：如上所示
需要使用background添加

2）径向渐变

position是按照元素右上为原点的

3）重复渐变
同样有重复线性渐变和重复径向渐变
repeating-linear-gradient
repeating-radial-gradient

2.background
1)background-color
添加背景颜色
background-image
添加背景图片，若图片大于盒子，则默认从左上角开始放置
若图片小于容器，默认平铺
background-repeat
设置平铺样式
round-将图片缩放后再平铺
space-不缩放，产生间距
backgrounf-attachmen:scroll/fixed
设置在滚动容器的背景的行为，跟随滚动或固定
local
Local与scroll的区别，前提是滚动当前容器的内容。Loacl:背景图片会跟随内容一起滚动。scroll:不会
2）background-size
在这里插入图片描述

3）
用于提升服务端响应区域的大小

这样可以使响应的区域在无形中变大

3、边框图片
一一对应。
在这里插入图片描述
123445678将作为内容的边框
border-image-source:指定边框图片的路径

案例：微信气泡背景根据内容自动缩放
边框图片的本质是背景，并不会影响元素内容的放置

4、过渡：
在选择器内设置
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长

语法：
transition: property duration timing-function delay;
参数说明：
transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay
值描述
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒，要加单位。
transition-timing-function
规定速度效果的速度曲线。
transition-delay
定义过渡效果何时开始。
补充说明tansition-timing-function: 属性规定过渡效果的速度曲线
值描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
案例说明
div{
width: 200px;
height: 200px;
background-color: red;
/添加单个过渡效果/
/transition:background-color 2s;/
/也可以同时设置多个过渡效果/
/transition:background-color 2s,left 1s;/
/可以设置某个过渡效果的延迟/
/transition:background-color 2s,left 1s 1s;/
/可以设置过渡效果的速率曲线/
/transition:background-color 2s,left 1s ease-out 1s;/
/还可以一次性的为所有属性添加过渡效果/
transition:all 1s;
position: absolute;
left: 0;
top: 0;
}
设置多个用逗号分隔

案例：手风琴菜单

无法为一些状态值，如display:block添加过渡效果，只能为一些具体的值添加.
过渡在事件触发完毕后（如点击后松开鼠标）会自动恢复原形
5、transform2D转换

在这里插入图片描述

与transition类似，执行完毕后会自动回复原始位置。
2)scale

缩放时不影响其他元素
3）rotate

4）skew

如果角度为正，则往当前轴的负方向斜切，如果角度为正，则往当前轴的+方向斜切
5）origin

改变默认的旋转轴心
6）同时添加多个transform属性
多次设置transform属性值会出现覆盖现象
请使用空格分割、浏览器同时执行
但注意旋转会同时旋转当前的坐标系
所以一般先移动再旋转
限制元素宽度以自动换行
7）实现任意元素居中
首先进行子绝父相