CSS3渐变及2D转换

CSS3渐变及2D转换

持续更新哦...

1、css3渐变

概念:

CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平

稳的过渡。以前,你必须使用图像来实现这些效果,现在通过使用

CSS3的渐变(gradients)即可实现。此外,渐变效果的元素在放大时

看起来效果更好,因为渐变(gradient)是由浏览器生成的。

css 复制代码
css3渐变:在两个或多个颜色之间的平稳过渡
渐变属性是:background-image:
			background:
线性渐变:由一个颜色到另一个颜色的平稳过渡
	linear-gradient(方位,颜色1,颜色2)
	方位:left right top bottom deg(角度可以为负数)
	to left top(表示去左上进行渐变)
	repeating-linear-gradient()重复渐变
径向渐变:	颜色由一个点向四周扩散的效果
	background:radial-gradient(起始坐标,渐变形状,渐变大小,颜色1,颜色2)
	起始坐标:left right top bottom center,默认是中间
	渐变形状:ellipse椭圆,如果元素是正方形,也将显示正圆
	circle正圆
	渐变大小:
		closest-side:最近边
		farthest-side:最远边
		closest-corner:最近角
		fathest-corner:最远角

2、过渡(重点)

css 复制代码
过渡:可以让css属性值在一定事件区间内平滑的过渡效果
transition:过渡属性 时间 延迟时间 动画类型
	过渡属性:all 所有属性
		具体属性
		transition-property:过渡属性;
        transition-duration:过渡时间;
        transition-delay:延迟时间;
        transition-timing-function:过渡动画类型;

	时间,延迟时间单位为:s
	动画类型:
		linear:匀速运动
		ease:逐渐慢下来
		ease-in:加速
		ease-out 减速
		ease-in-out 先加速后减速
		贝塞尔曲线
		steps(数字) 逐帧动画

3、2D平面效果(重点)

transform:变化属性

​ 功能函数:

位移:

​ translateX()

​ translateY()

​ translate(x,y)

可以为负数

缩放:

css 复制代码
scaleX()
scaleY()
scale(xy)
scale(x,y)
注意:
1 默认大小
0 缩小到消失
0~1 缩小
大于1 放大
负数则反向
  /* 缩放 */
            transform: scale(2);
            transform: scaleX(1.5);
            transform: scaleY(2.5);
            transform: scale(2.5,2.5);

旋转:

css 复制代码
rotateX()
rotateY()
rotate(z)
  /* 旋转 z轴 */
            transform: rotate(90deg);
            /* 高度变小 */
            transform: rotateX(70deg);
            /* 宽度变小 */
            transform: rotateY(70deg);

问题:先旋转,后位移和先位移,后旋转,效果一样吗?

不一样,因为先旋转改变了位移的方向

transform: translate(100px) rotate(40deg);

​ transform: rotate(40deg) translate(100px);

倾斜

css 复制代码
skewX()
skewY()
skew(x)
skew(x,y)
  /* 倾斜x轴 */
            transform: skew(20deg);
            /* x,y */
            transform: skew(20deg,40deg);
            transform: skewX(30deg);
            transform: skewY(30deg);

变形原点

该属性只有在设置了transform属性的时候起作用

​ transform-origin: center bottom;所有方位名词都可以,数值,百分比也可以

相关推荐
brrdg_sefg4 分钟前
Rust 在前端基建中的使用
前端·rust·状态模式
m0_7482309429 分钟前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端·rust·excel
qq_5895681036 分钟前
Echarts的高级使用,动画,交互api
前端·javascript·echarts
黑客老陈2 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安2 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy2 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se2 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235612 小时前
web 渗透学习指南——初学者防入狱篇
前端