0
点赞
收藏
分享

微信扫一扫

Web前端开发学习笔记(2)(css3新特性)

修炼之士 2022-04-13 阅读 56
前端css

一、圆角边框与阴影

圆角边框(border-radius)
border-top-left-radius左上角的形状
border-top-right-radius右上角的形状
border-bottom-left-radius左下角的形状
border-bottom-right-radius右下角的形状
border-radius

水平值

垂直值

(圆角边框添加各种前缀的扩展)bdrs + Tab:

                                        -webkit-border-radius: ;
                                        -moz-border-radius: ;
                                         border-radius: ;

阴影(box-shadow : 水平偏移  垂直偏移  模糊距离 颜色
inset可选,内部阴影
outset默认值,外部阴影

(圆角边框添加各种前缀的扩展)bxsh + Tab:

                                        -webkit-box-shadow: inset hoff voff blur color;
                                        -moz-box-shadow: inset hoff voff blur color;
                                         box-shadow: inset hoff voff blur color;

二、文本与文字

      (1)、text-shadow属性: (同box-shadow)

例:

h1 {

text-shadow: 0 0 3px #F00;              (只有模糊外散效果)

}

h1 {

color:white(白色);

text-shadow: 2px 2px 4px #F00(投影效果黑色);              (有凸起浮雕的效果)

}

(2)、world-wrap属性:允许长单词、URL强制进行换行

                            break-world、normal

(3)、@font-face规则属性:

 

 

 

三、2D转换(对元素进行旋转、缩放、移动、拉伸

(旋转的扩展): trfm + Tab    :     -webkit-transform: ;
                                                            -moz-transform: ;
                                                            -ms-transform: ;
                                                            -o-transform: ;
                                                            transform: ;

transform属性:   rotate()(旋转)       scale()(缩放)

旋转---transform:rotate(数字deg);(正数顺时针转,负数逆时针转)

缩放---transform:scale(x,y);-----分水平垂直方向缩放的倍数(0~1,缩小)(>1放大)

四、过渡与动画

1.(过渡:一个状态在指定的时间内到另一个状态): transition属性:

transition-property属性名 / all     对那个属性进行变化
transition-duration持续时间
transition-timing-function过渡使用的方法(函数)

                                           (简写)  transition: 属性名 持续时间 过渡方式;

transition-timing-function
描述
linear匀速
ease慢快慢
ease-in慢快
ease-out快慢
ease-in-out慢快慢

2.(动画:若干种状态之间的转换):@keyframes animation属性

(1)定义动画:@keyframes规则

(2)调用动画:anmation属性

animation属性取值
描述
animation简写
animation-name引用@keyframes动画的名称
animation-duration动画完成时间
animation-timing-function规定动画的速度曲线、默认是"ease"
animation-play-staterunning  |   paused

(简写)animation: 名字 时长 方式;

 

五、3D变换

1.3D

        transform-style : preserve-3d ;

2.旋转

transform属性:(x轴:指向右  y轴: 指向上  z轴:指向屏幕外)

rotateX();

rotateY();                      角度deg(绕x、y、z旋转)

rotateZ();

3.透视(无透视会被压缩)

perspective属性(像素值越小,表示离得越近)

 

 

 

 

举报

相关推荐

【Web前端】CSS3新特性

CSS3 新特性

CSS3新特性

CSS3的新特性

css3的新特性

前端-CSS3学习笔记八

0 条评论