H5学习---html，css---渐变过渡,2D转换

最新推荐文章于 2023-08-03 22:20:43 发布

原创最新推荐文章于 2023-08-03 22:20:43 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5

H5 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端

16 篇文章

订阅专栏

本文详细介绍了CSS3中的渐变技术，包括线性渐变、径向渐变及其重复形式，以及如何使用过渡属性为元素添加平滑的动画效果。通过具体示例展示了背景颜色、宽度、高度等属性的过渡动画，以及transform属性实现的位移、旋转、缩放和倾斜效果。

渐变

- 线性渐变
	background:linear-gradient(方向,颜色1,颜色2,...)
		方向：
			to top由下到上
			30deg
- 径向渐变
	background: radial-gradient(pink,purple);
- 重复线性渐变
	background: repeating-linear-gradient(red 10%,pink 20%);
- 重复径向渐变
	background: repeating-radial-gradient(red 10%,pink 20%);

过渡

transition:需要过渡的属性  过渡时间  速度效果  延迟时间;
- 放置的位置
	移入移出都有效果:给元素本身
	移入有效果,移出没有:给hover
- 速度效果
	linear匀速
	ease慢速开始，然后变快，然后慢速结束,默认值
	ease-in慢速开始
	ease-out慢速结束
	ease-in-out慢速开始和结束
- 多个属性不同效果的设置
	transition: width 1s linear,height 2s ease,background 3s linear;
- 多个属性共同效果的设置
	transition: all 2s linear .2s;

2D转换

- 位移
	transform: translate(-200px);一个值代表水平方向移动
	transform: translate(100px,100px);第一个代表水平，第二个值代表垂直
	transform: translateX(200px);沿X轴方向运动
	transform: translateY(200px);沿Y轴方向运动
- 旋转
	transform:rotate(45deg);正值为顺时针转动,负值为逆时针转动
	- 转换中心
		transform-origin: left top;转换中心为左上角
		transform-origin: 20px 20px;指定x,y轴的坐标点
	- 位移+旋转效果
		transform: translateX(200px) rotate(90deg);
- 缩放
	transform:scale(2);水平垂直都缩放
	transform:scale(0.5,2);水平变为原来的0.5倍，垂直变为2倍
	transform:scaleX(2);
	transform:scaleY(2);
- 倾斜
	transform:skew();
	transform:skewX(30deg);
	transform:skewY(30deg);