• css3的渐变、背景、过渡、分页


    知识点一:渐变

    线性渐变

    background:  linear-gradient(red,blue);
    background:  linear-gradient(red 10%,blue 90%);
    background:  linear-gradient(to right, red 10%,blue 90%);
    

    方向:如果不给方向的时候,默认的就是从上往下开始。。

    参数:可以是多个颜色值,中间用逗号分隔开

    百分数:这是从哪个方向到哪个方向的过渡

    径向渐变:

    background: radial-gradient(red,blue,blue);
    background: radial-gradient(red 10%,blue 20%,blue 70%);
    background: radial-gradient(circle,red 10%,blue 30%,blue 60%);
    

     参数:颜色可以是多个,中间用逗号分隔开。。。

    circle:扩散的程度是圆形,不论是不是正方形

    百分数:由中心向外沿着半径扩散

    知识点二:背景

    background: url(图片路径),url(图片路径) top right;  //引入背景图,,,可以加入多个,还可以在图片后头加上所处位置
    background-repeat: no-repeat;  //图片重复
    background-size: 100% 100%;   //两个值,第一个是x轴位置  第二个是y轴位置
    background-position: x  y; //这是移动的图片的位置

     填充图片的起始位置:background-origin:

    background-origin: border-box;//填充图片的起始位置是从边框开始的
    background-origin: padding-box;//填充图片的起始位置是从内边距开始的
    background-origin: content-box;//填充图片的起始位置是从内容开始的
    

     背景图片裁剪开始位置:background-clip:

    background-clip: border-box;  //图片裁剪位置是从内边距开始的,,这是个特例
    background-clip: padding-box;  //图片裁剪位置是从内边距开始的
    background-clip: content-box;  //图片裁剪位置是从内容开始的
    

    背景图大小:background-size:contain/cover/auto;

    两种情况:

    不论框大图小  还是框小图大

    contain:直到满足水平或者垂直方向满足一个撑满,,图片就会停止变大。。

    cover:直到满足水平或者垂直方向上的两个都撑满,图片就会停止变大。。多余的会溢出

    知识点三:过渡

    transition: width 2s, height 2s;  //配合伪元素使用  比如:hover 下同 (这是加在要改变的元素上的)
    
    
    transition-property: all 2s;  //所有的效果都是在2秒内完成
    transition-delay: 2s;  //过渡延迟效果
    transition-duration:  4s;  // 完成花费的时间
    

     贝塞尔曲线:运动轨迹

    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    

    透明度兼容性问题:

    适用于IE浏览器的

    opicaty: n;
    
    filter:  alpha(opacity=n*100);
    
  • 相关阅读:
    个人项目(Word Count Java)
    自我介绍+软工5问
    第六次实践
    第五次实践作业
    第四次实践作业
    第三次实践作业
    第二次实践作业
    第1次实践作业
    第06组 Beta版本演示
    第06组 Beta冲刺(4/4)
  • 原文地址:https://www.cnblogs.com/bigbang66/p/13537684.html
Copyright © 2020-2023  润新知