css3相关知识

3 篇文章 0 订阅

一、transition–过渡

  • transition语法
transition: property duration timing-function delay;
  • transition的相关属性
transition-property: 指定想要进行过渡的属性
 	transition-property: none||all||property
 		none:没有属性过渡
 		all: 所有属性进行过渡(默认)
 		property: 指定进行过渡的CSS属性
 	
transition-duration: 指定过渡过程完成的时间
	transition-duration: 0||*s||*ms
	
transition-timing-function: 指定过渡过程的变化曲线
	transition-timing-function: linear||ease||ease-in||ease-out||ease-in-out||cubic-bezier(n,n,n,n)
		linear: 线性过渡,匀速
		ease:--慢
		ease-in: 慢速开始
		ease-out: 慢速结束
		ease-in-out: 慢速开始慢速结束
		cubic-bezier(n,n,n,n): 自定义贝塞尔曲线函数
		
transition-delay: 指定过渡效果等待开始执行的时间
	transition-delay: 0||*s||*ms

二、transform–转换

  • transform语法
transform: none||transform-functions;
	none:默认值
	transform-functions: 转换函数
transform转换函数
  • translate–平移
    translateX(x)
    translateY(y)
    translateZ(z)
    translate3d(x,y,z)
  • rotate–翻转
    rotateX(deg)
    rotateY(deg)
    rotateZ(deg)
    rotate(x,y,z,deg)
  • skew–斜切
    skew(x-deg,y-deg)
    skewX(deg)
    skewY(deg)
  • scale–缩放
    scale(x[,y]?) //—填一个值默认缩放XY
    scaleX(x)
    scaleY(y)
  • matrix–矩阵
    参照https://blog.csdn.net/weixin_42103959/article/details/81044389
  • perspective–为3D转换元素定义透视视图
  • transform-origin旋转圆点
	transform-origin: x-axis y-axis z-axis;
	// x-axis: left || right || center || length || %
	// y-axis: top || bottom || center || length || %
	// z-axis: length
  • transform–style属性指定嵌套元素是怎样在三维空间中呈现
transform-style: flat|preserve-3d;

三、animation函数

  • animation语法
animation: name duration tming-function delay iteration-count direction fill-mode play-state;
  • name 指定要绑定到选择器的关键帧名称
// 开始-结束
@keyframes animation-name {
	from {} // 开始
	to {} // 结束
}

// 分不同阶段进行
@keyframes animation-name {
	0% {} 
	50% {}
	100% {}
}
  • duration 动画经历的时间(s || ms)
  • timing-function(linear || ease || ease-in || ease-out || ease-in-out || 贝塞尔曲线函数) 动画进行的曲线函数
  • delay 动画等待执行时间(s || ms)
  • interation(number || infinite) 动画执行的次数
  • direction (boolean) 动画是否反向执行
  • fill-mode (none || forwards || backwards || both|initial || inherit)默认值none执行动画前不会应用任何样式-----很少用到
  • play-state: (paused || running) 指定动画运行和暂停

边框(阴影,圆角,图片)

  • box-shadow(v-shadow,h-shadow,blur,spread,color,inset)
/**
  * v-shadow--水平方向偏移量-px
  * h-shadow--垂直方向偏移量-px
  * blur--阴影的模糊距离-px
  * spread--阴影的宽度(范围)-px
  * color--阴影的颜色-色值
  * inset--是否为内阴影-inset
  */
  • border-radius(左上,右上,右下,左下)px || %
  • border-image 边框图片

四、背景

  • background-size(length|percentage|cover|contain)
length: 背景大小 如(200px 200px)
percentage: 百分比 如(100% 100%)
cover: 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小--不变形,铺不满.
contain: 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小--不变形,铺满,显示不全.
  • background-origin: padding-box || border-box || content-box;
  • background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
.....只设置一个值是另外一个值默认为center
x% y%--百分比
xpos ypos--具体值
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值