美文网首页
css基础内容(二)

css基础内容(二)

作者: believedream | 来源:发表于2017-02-03 16:25 被阅读0次

1.过渡

属性介绍:

    //过渡属性
1. transition-property:width,height,(all)
2. transition-duration:2s //过渡时间
3. transition-delay :1s,2s;//延时时间

---------------------------------------------------
4. transition-timing-function://
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 

联写方式:

transition: property duration timing-function delay;

或者:transition: property duration delay timing-function ;

2.圆角属性(border-radius):

演示代码:

    li{
        width: 200px;
        height: 40px;
        border: 1px solid gray;
        background-color: skyblue;
        margin: 10px 0;
    }
    li:nth-child(1){
        /* 一次设置 全部生效 */
        border-radius: 10px;
    }
    li:nth-child(2){
        border-top-left-radius: 10px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 40px;
    }
    li:nth-child(3){
        /*  如果设置了两个 第一个对应到 左上 右下  第二个对应 右上 左下  */
        border-radius: 10px 50px;
    }
    li:nth-child(4){
        /*  如果设置了三个 第一个对应到 左上   第二个对应 右上 左下  第三个对应到 右下 */
        border-radius: 10px 50px 90px;
    }
    li:nth-child(5){
        /*  如果设置了是个 从 左上 右上 右下 左下  */
        border-radius: 10px 20px 30px 40px;
    }
    li:nth-child(6):hover{
        border-radius: 10px 50px;
        transition: all 1s;
    }

设置值得单位:可是使用em,%进行设置,如果设置成为50%就是圆角

3. 2D,或3D 变换(transform)

相关属性:


//移动
translate(x,y)         |定义 2D 转换。  
translate3d(x,y,z)     |定义 3D 。  
translateX(x)          |定义转换,只是用 X 轴的值。  
translateY(y)          |定义转换,只是用 Y 轴的值。  
translateZ(z)          |定义 3D 转换,只是用 Z 轴的值。

//缩放    
scale(x,y)            | 定义 2D 缩放转换。  
scale3d(x,y,z)        |定义 3D 缩放转换。  
scaleX(x)             |通过设置 X 轴的值来定义缩放转换。  
scaleY(y)             |通过设置 Y 轴的值来定义缩放转换。  
scaleZ(z)             |通过设置 Z 轴的值来定义 3D 缩放转换。  

//旋转
rotate(angle)         |定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) |定义 3D 旋转。  
rotateX(angle)        |定义沿着 X 轴的 3D 旋转。  
rotateY(angle)        |定义沿着 Y 轴的 3D 旋转。  
rotateZ(angle)        |定义沿着 Z 轴的 3D 旋转。

//倾斜
skew(x-angle,y-angle)  |定义沿着 X 和 Y 轴的 2D 倾斜转换。  
skewX(angle)           |定义沿着 X 轴的 2D 倾斜转换。  
skewY(angle)           |定义沿着 Y 轴的 2D 倾斜转换。 
perspective(n)         |为 3D 转换元素定义透视视图。  

注意: 使用单位: 角度单位(deg),距离单位(px)

(1)设置变换参考点(transform-origin):

transform-origin: x-axis y-axis z-axis;

x-axis 定义视图被置于 X 轴的何处。可能的值:

left 
center 
right 
length 
% 
 
y-axis 定义视图被置于 Y 轴的何处。可能的值:

top 
center 
bottom 
length 
% 
 
z-axis 定义视图被置于 Z 轴的何处。可能的值:

length 

案例:

.pkSingle{
        display: block;
        width: 100px;
        height: 150px;
        margin: 20px auto;
        /* 添加过渡属性 */
        transition: all 1s;

        /* 设置 变换的 参照点 */
        transform-origin: bottom right;

额外内容:

(3)backface-visibility: 定义元素在不面对屏幕时是否可见。

**语法**

backface-visibility: visible|hidden;值 

    visible 背面是可见的。 
    hidden 背面是不可见的。 

注意:过渡无法使用在渐变的颜色上

相关文章

  • css基础内容(二)

    1.过渡 属性介绍: 联写方式: transition: property duration timing-fun...

  • 前端开发都需要学什么?

    初级前端掌握的课程: HTMl5+ CSS3。 前端学习的基础技能需要掌握HTMl+ CSS的基础内容。 学习内容...

  • css-note

    css学习内容 css基础语法 css使用方法 css选择器 css继承与层叠 css优先级 css命名规范 学习...

  • css基础内容(三)

    1.动画 动画的使用必须要准备: 1.准备动画 @keyframes 关键字定义 2.需要为想要使用动画的dom元...

  • CSS基础内容(一)

    一入代码深世海,不知秃头何时来!又是深夜来临了,这一天又不知不觉过去了。整理一下今天CSS主要关键点内容,以便后续...

  • html代码规范,chrome应用

    &html,css入门 基础学习 &代码规范 点这里 CSS命名规则 常用的CSS命名规则 头:header 内容...

  • css入门必学,基础重难点,css选择器

    css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布...

  • css(二):css基础

    一.选择器 五种:基础选择器,组合选择器,属性选择器,伪元素选择器,伪类选择器。 基础选择器 组合选择器 属性选择...

  • 2020-02-21

    继续打卡!CSS基础第二次!

  • CSS基础内容的总结

    CSS是谁发明的 Tim-Berners Lee李爵士的挪威同事Hakon Wium Lai首先提出CSS。 CS...

网友评论

      本文标题:css基础内容(二)

      本文链接:https://www.haomeiwen.com/subject/qcpdittx.html