CSS3.0入门笔记(二)

1.transition:运动时间 属性 运动类型 延迟时间
  transition:10s all ease 2s;
  transition:1s width linear,2s height ease-in,1s background ease;



2.
  旋转 transform:rotate(角度deg);
  旋转中心transform-origin:(xpx,ypx)/(%,%)/
  缩放 transfrom:scale(x倍数,y倍数);【反转(-1,-1)】
  变形倾斜 transfrom:skew(xdeg,ydeg);
  平移 transfrom:translate(xpx,ypx);/(%,%)
  


线型渐变:background:-webkit-linear-gradient(方向,颜色1 距离,颜色2 距离,颜色2 距离…);
线型渐变_重复:background:-webkit-repeating-linear-gradient(方向,颜色)
方向:top(默认值) left/right/bottom
角度:deg(角度)


径向渐变:background:-webkit-radial-gradient(方向,形状,颜色);
径向渐变_重复:background:-webkit-repeating-radial-gradient(circle,red 0,red 10px,green 10px,green 20px);
方向:center(默认值) left/top/right/bottom 像素值 xpx ypx,
形状: 椭圆(默认) ellipse 正圆circle


蒙版:-webkit-mask:url(a.png) no-repeat;只显示有颜色部分(png)
背景蒙版:-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
文字蒙版:background: -webkit-linear-gradient(red,green,blue,pink);
-webkit-background-clip:text;
color: rgba(0,0,0,0);



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值