最新消息:文章中包含代码时,请遵守代码高亮规范!

css的2D效果实现【原创】

HTML+CSS lili 197浏览 0评论

一.css渐变
1.线性渐变
linear-gradient (方向[可选],颜色1,颜色2)
2.径向渐变
radial-gradient (正圆椭圆[可选],颜色1,颜色2)
circle:正圆 ellipse:椭圆
3.重复渐变
repeating-radial-gradient

二.动画过度
transition:
定义过度属性
transition-property: all 或 属性名,属性名
定义过度时间
transition-duration: 2s
延迟多少时间开始
transition-delay: 2s
transition-timing-function:
linear 匀速 ease 慢快慢(默认)
ease-in 慢开始 ease-out 慢结束
ease-in-out 慢开始慢结束
cubic-bezier 自定义贝兹尔曲线
Cubic-bezier()括号里4个数值,均在0-2之间

三.2D转换
transform:
translate(left,top); 移动
translateX();
translateY();
rotate(); 旋转 单位:deg(度)
scale(x,y); 缩放(宽度,高度) 参数均为倍数
scaleX();
scaleY();
skew(x,y); 倾斜

四.拓展
hover操作兄弟元素 用~
a:hover ~b{….}

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23966.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者lili的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!