变形元素旋转css阴影

treansition-properl 设置过度的属性

treansition-duration 设置过度时间

treansition-timing-funcion 设置过度的运动方式

linear  匀速

ease     开始和结束慢速

ease-in   开始时慢速

ease-out   结束时慢速

ease-in-out 开始和结束时慢速

cubic-bezier(0.845,-0.375,0.215,1.335)

transition-delay   设置动画的延迟

transition:properly duration timing -function delay 同时设置四个属性

css3 transform 变换

translate(x,y) 设置盒子的位移

scale(x,y)设置盒子缩放

roate(dog) 设置盒子的旋转

skew(x-angle,y-angle) 设置盒子的斜切

perspective  设置透视距离

transform-styoleflat :preserved-3d设置盒子是否按3d空间显示

translateX translateY translateZ 设置三维移动

rolateX rolateY rolateZ 设置三维的旋转

scaleX scaleY  scaleZ 设置三位缩放

tranform-origin  设置变形的中心点

backface-visiblity 设置盒子的背面是否可见

animation动画

通过@keyframes 变量名{

盒子的初始大小

form{}

盒子变换后的大小

to{}

css‘设置某一个叫的圆角:

border-top-left-radius: 30px 60px;

css阴影

可以设置  水平偏移   垂直偏移  羽化大小  拓展大小  颜色 内阴影或者外阴影

box-shadow  h-shadow  水平偏移

box-shadow v-shadow   垂直偏移

box-shadow blur      羽化大小

 box-shadow  spread     扩展大小

box-shadow color    颜色

box-shadow   inset    是否内阴影

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容