首页 前端知识 CSS3基础1

CSS3基础1

2024-08-18 22:08:22 前端知识 前端哥 572 600 我要收藏
  1. 背景
    1. background-image
      1. 示例
        #example1 { 
            background-image: url(img_flwr.gif), url(paper.gif); 
            background-position: right bottom, left top; 
            background-repeat: no-repeat, repeat; 
        }
      2. 一样的功能推荐使用background,一行就可搞定
        background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    2. background-size
      1. 设置图片的宽度和高度
         background-size:80px 60px;
      2. CSS3以前,背景图像大小由图像的实际大小决定。

      3. 常用值还有:100% 100%,contain,over

    3. background-origin
      1. background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
      2. 图例
      3. 示例
        background-origin:content-box;
    4. background-clip
      1. CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
      2. 示例
        background-clip: content-box; 
    5. 补充:CSS3 多重背景(multiple backgrounds)

      1. 多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。

      2. 示例

        background-image:url1,url2,...,urlN;
        background-repeat : repeat1,repeat2,...,repeatN;
        backround-position : position1,position2,...,positionN;
        background-size : size1,size2,...,sizeN;
        background-attachment : attachment1,attachment2,...,attachmentN;
        background-clip : clip1,clip2,...,clipN;
        background-origin : origin1,origin2,...,originN;
        background-color : color;
      3. 注意

        1. 用逗号隔开每组 background 的缩写值;

        2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;

        3.  如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。

        4.  background-color 只能设置一个。

  2. 圆角
    1. 使用 CSS3 border-radius 属性,可以给任何元素制作 "圆角"。
    2. 图例
    3. 使用border-radius:50% 和 100%都可以做椭圆或者圆
  3. 渐变
    1. 线性渐变
      1. 示例
        background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
        
      2. 参数说明
        1. directtion
          1. 示例
            /* 
            		1.默认是从上至下
            		2.使用to right 表示从左至右 to bottom right等等
            		3.使用angle做更多的控制
            		*/
        2. color-stop1、color-stop2...
          1. 设置颜色:这里十六进制或者rgb或者rgba都可以
          2. 注意:颜色后可以跟 数值% 表示 从元素出现方向在数值% 的位置
      3. 可重复的线性渐变
        1. 示例
          #grad {
            /* 标准的语法 */
            background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
          }
        2. 规则类似线性渐变
    2. 径向渐变
      1. 语法
        background-image: radial-gradient(shape size at position, start-color, ..., last-color);
      2. 参数设置
        1. shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
        2. 其余类似线性渐变
      3. 可重复的径向渐变
        1. 示例
          #grad {
            background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
          }
  4. 文本效果
    1. text-shadow
      1. 示例
        h1
        {
            text-shadow: 5px 5px 5px #FF0000;
        /*您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:*/
        }
    2. box-shadow
      1. 示例
        ​
        div {
            box-shadow: 10px 10px 5px #888888;
        }
        
        ​
      2. 阴影叠加
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    3. text-overflow
      1. ellipsis:会省略
      2. clip:不省略
      3. 示例:
        p.test1 {
            white-space: nowrap; 
            width: 200px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip; 
        }
         
        p.test2 {
            white-space: nowrap; 
            width: 200px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis; 
        }
    4. word-wrap 换行
      1. 如果某个单词太长,不适合在一个区域内,它扩展到外面:CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字。

      2. 示例

        p {word-wrap:break-word;}
    5. word-break 拆分换行
      1. 示例
        p.test1 {
            word-break: keep-all; //不拆分
        }
         
        p.test2 {
            word-break: break-all; //拆分
        }
    6. 备注
  5. 2D 转换
    1. translate()
      1. 示例:
        div
        {
        transform: translate(50px,100px);
        -ms-transform: translate(50px,100px); /* IE 9 */
        -webkit-transform: translate(50px,100px); /* Safari and Chrome */
        }
      2. 说明:translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。
    2. rotate()
      1. 示例:
        div
        {
        transform: rotate(30deg);
        -ms-transform: rotate(30deg); /* IE 9 */
        -webkit-transform: rotate(30deg); /* Safari and Chrome */
        }
      2. 说明:rotate值(30deg)元素顺时针旋转30度。
    3. scale()
      1. 示例:
        -ms-transform:scale(2,3); /* IE 9 */
        -webkit-transform: scale(2,3); /* Safari */
        transform: scale(2,3); /* 标准语法 */
      2. 说明:scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
    4. skew()
      1. 示例:
        div
        {
        transform: skew(30deg,20deg);
        -ms-transform: skew(30deg,20deg); /* IE 9 */
        -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
        }
      2. 说明:skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。
    5. matrix()
      1. 示例:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
      2. 说明:
        1. scaleX() (水平缩放):控制元素水平方向的缩放。如果值为 1,则不进行水平缩放;如果大于 1,则放大;如果在 0 和 1 之间,则缩小。
        2. skewY() (垂直倾斜):控制元素在垂直方向上的倾斜。
        3. skewX() (水平倾斜):控制元素在水平方向上的倾斜。
        4. scaleY() (垂直缩放):控制元素垂直方向的缩放。如果值为 1,则不进行垂直缩放;如果大于 1,则放大;如果在 0 和 1 之间,则缩小。
        5. translateX() (水平平移):控制元素在水平方向上的平移量。
        6. translateY() (垂直平移):控制元素在垂直方向上的平移量。即在不变换的情况下是matrix(1, 0, 0, 1, 0, 0)
  6. 过渡
    1. 示例
      div
      {
          transition: width 1s linear 2s; 
          /* 简写属性,用于在一个属性中设置四个过渡属性。*/
          /* Safari */
          -webkit-transition:width 1s linear 2s;
      }
    2. 参数说明
          transition-property: width;//规定应用过渡的 CSS 属性的名称。
          transition-duration: 1s;//	定义过渡效果花费的时间。默认是 0
          transition-timing-function: linear;//规定过渡效果的时间曲线。默认是 "ease"。
          transition-delay: 2s;//规定过渡效果何时开始。默认是 0。
    3. 补充
      1. 鼠标悬浮过渡效果
        div{
          width: 200px;
          height: 200px;
          background-color: #f00;
          transition: all 2s;
        }
        
        div:hover{
          background-color: #00f;
          transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
        }
        
      2. 黑幕样式
        <p>这是测试<span class="mask">并且被掩盖的</span>文字!</p>
        <style>
        .mask {
            background-color: #252525;
            color: #252525;
            transition: color 0.5s;
        }
        
        .mask:hover {
            color: #ffffff;
        }
        </style>
        
      3. 左右两个半屏,鼠标移上后就会全屏
        <div class="left"></div>
        <div class="right"></div>
        <style>
        .left{
            width:50%;
            height:50px;
            background:#C00;
            position:absolute;
            top:0;
            left:0;
            transition:0.6s;/*动画*/
            -moz-transition:0.6s; /* Firefox 4 */
            -webkit-transition:0.6s; /* Safari and Chrome */
            -o-transition:0.6s; /* Opera */
        }
        .right{
            width:50%;
            height:50px;
            background:#03C;
            position:absolute;
            top:0;
            right:0;
            transition:0.6s;/*动画*/
            -moz-transition:0.6s; /* Firefox 4 */
            -webkit-transition:0.6s; /* Safari and Chrome */
            -o-transition:0.6s; /* Opera */
        }
        .left:hover{
            width:100%;
            z-index:99;
        }
        .right:hover{
            width:100%;
            z-index:99;
        }
        </style>
  7. 动画
    1. 制作动画
      1. 第一种
        @keyframes myfirst
        {
            from {background: red;}
            to {background: yellow;}
        }
         
        @-webkit-keyframes myfirst /* Safari 与 Chrome */
        {
            from {background: red;}
            to {background: yellow;}
        }
      2. 第二种
        
        @keyframes myfirst
        {
            0%   {background: red; left:0px; top:0px;}
            25%  {background: yellow; left:200px; top:0px;}
            50%  {background: blue; left:200px; top:200px;}
            75%  {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
        }
         
        @-webkit-keyframes myfirst /* Safari 与 Chrome */
        {
            0%   {background: red; left:0px; top:0px;}
            25%  {background: yellow; left:200px; top:0px;}
            50%  {background: blue; left:200px; top:200px;}
            75%  {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
        }
    2. 设置动画属性
      1. 设置所有属性
        div
        {
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
            /* Safari 与 Chrome: */
            -webkit-animation-name: myfirst;
            -webkit-animation-duration: 5s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
      2. 设置所有属性简写
        div
        {
            animation: myfirst 5s linear 2s infinite alternate;
            /* Safari 与 Chrome: */
            -webkit-animation: myfirst 5s linear 2s infinite alternate;
        }
      3. 参数列表
    3. 行星运动
      <div class="solarsys">
        <!--太阳-->
        <div class='sun'></div>
      
        <!--水星轨道-->
        <div class='mercuryOrbit'></div>
      
        <!--水星-->
        <div class='mercury'></div>
      
        <!--金星轨道-->
        <div class='venusOrbit'></div>
      
        <!--金星-->
        <div class='venus'></div>
      
        <!--地球轨道-->
        <div class='earthOrbit'></div>
      
        <!--地球-->
        <div class='earth'></div>
      
        <!--火星轨道-->
        <div class='marsOrbit'></div>
      
        <!--火星-->
        <div class='mars'></div>
      
        <!--木星轨道-->
        <div class='jupiterOrbit'></div>
      
        <!--木星-->
        <div class='jupiter'></div>
      
        <!--土星轨道-->
        <div class='saturnOrbit'></div>
      
        <!--土星-->
        <div class='saturn'></div>
      
        <!--天王星轨道-->
        <div class='uranusOrbit'></div>
      
        <!--天王星-->
        <div class='uranus'></div>
      
        <!--海王星轨道-->
        <div class='neptuneOrbit'></div>
      
        <!--海王星-->
        <div class='neptune'></div>
      </div>
      <style>
      .solarsys{
        width: 800px;
        height: 800px;;
        position: relative;
        margin: 0 auto;
        background-color: #000000;
        padding: 0;
        transform: scale(1);
      }
      
      /*太阳*/
      .sun {
        left:357px;
        top:357px;
        height: 90px;
        width: 90px;
        background-color: rgb(248,107,35);
        border-radius: 50%;
        box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
        position: absolute;
        margin: 0;
      }
      
      /*水星*/
      .mercury {
        left:337.5px;
        top:395px;
        height: 10px;
        width: 10px;
        background-color: rgb(166,138,56);
        border-radius: 50%;
        position: absolute;
        transform-origin: 62.5px 5px;
        animation: rotate 1.5s infinite linear;
      }
      
      /*水星轨道*/
      .mercuryOrbit {
        left:342.5px;
        top:342.5px;
        height: 115px;
        width: 115px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        margin: 0px;
        padding: 0px;
      }
      
      /*金星*/
      .venus {
        left:309px;
        top:389px;
        height: 22px;
        width: 22px;
        background-color: rgb(246,157,97);
        border-radius: 50%;
        position: absolute;
        transform-origin: 91px 11px;
        animation: rotate 3.84s infinite linear;
      }
      
      /*金星轨道*/
      .venusOrbit {
        left:320px;
        top:320px;
        height: 160px;
        width: 160px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        /*margin: 100px;*/
        /*transform-origin: -75px -75px;*/
        /*animation: rotate 4s infinite linear;*/
        margin: 0px;
        padding: 0px;
      }
      
      /*地球*/
      .earth {
        left:266.5px;
        top:391px;
        height: 18px;
        width: 18px;
        background-color: rgb(115,114,174);
        border-radius: 50%;
        position: absolute;
        transform-origin: 134px 9px;
        animation: rotate 6.25s infinite linear;
      }
      
      /*地球轨道*/
      .earthOrbit {
        left:275px;
        top:275px;
        height: 250px;
        width: 250px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        /*margin: 100px;*/
        /*transform-origin: -75px -75px;*/
        /*animation: rotate 4s infinite linear;*/
        margin: 0px;
        padding: 0px;
      }
      
      /*火星*/
      .mars {
        left:222.5px;
        top:392.5px;
        height: 15px;
        width: 15px;
        background-color: rgb(140,119,63);
        border-radius: 50%;
        position: absolute;
        transform-origin: 177.5px 7.5px;
        animation: rotate 11.75s infinite linear;
      }
      
      /*火星轨道*/
      .marsOrbit {
        left:230px;
        top:230px;
        height: 340px;
        width: 340px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        /*margin: 100px;*/
        /*transform-origin: -75px -75px;*/
        /*animation: rotate 4s infinite linear;*/
        margin: 0px;
        padding: 0px;
      }
      
      /*木星*/
      .jupiter {
        left:134px;
        top:379px;
        height: 42px;
        width: 42px;
        background-color: rgb(156,164,143);
        border-radius: 50%;
        position: absolute;
        transform-origin: 266px 21px;
        animation: rotate 74.04s infinite linear;
      }
      
      /*木星轨道*/
      .jupiterOrbit {
        left:155px;
        top:155px;
        height: 490px;
        width: 490px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        /*margin: 100px;*/
        /*transform-origin: -75px -75px;*/
        /*animation: rotate 4s infinite linear;*/
        margin: 0px;
        padding: 0px;
      }
      
      /*土星*/
      .saturn {
        left:92px;
        top:387px;
        height: 26px;
        width: 26px;
        background-color: rgb(215,171,68);
        border-radius: 50%;
        position: absolute;
        transform-origin: 308px 13px;
        animation: rotate 183.92s infinite linear;
      }
      
      /*土星轨道*/
      .saturnOrbit {
        left:105px;
        top:105px;
        height: 590px;
        width: 590px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        /*margin: 100px;*/
        /*transform-origin: -75px -75px;*/
        /*animation: rotate 4s infinite linear;*/
        margin: 0px;
        padding: 0px;
      }
      
      /*天王星*/
      .uranus {
        left:41.5px;
        top:386.5px;
        height: 27px;
        width: 27px;
        background-color: rgb(164,192,206);
        border-radius: 50%;
        position: absolute;
        transform-origin: 358.5px 13.5px;
        animation: rotate 524.46s infinite linear;
      }
      
      /*天王星轨道*/
      .uranusOrbit {
        left:55px;
        top:55px;
        height: 690px;
        width: 690px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        /*margin: 100px;*/
        /*transform-origin: -75px -75px;*/
        /*animation: rotate 4s infinite linear;*/
        margin: 0px;
        padding: 0px;
      }
      
      /*海王星*/
      .neptune {
        left:10px;
        top:390px;
        height: 20px;
        width: 20px;
        background-color: rgb(133,136,180);
        border-radius: 50%;
        position: absolute;
        transform-origin: 390px 10px;
        animation: rotate 1028.76s infinite linear;
      }
      
      /*海王星轨道*/
      .neptuneOrbit {
        left:20px;
        top:20px;
        height: 760px;
        width: 760px;
        background-color: transparent;
        border-radius: 50%;
        border-style: dashed;
        border-color: gray;
        position: absolute;
        border-width: 1px;
        /*margin: 100px;*/
        /*transform-origin: -75px -75px;*/
        /*animation: rotate 4s infinite linear;*/
        margin: 0px;
        padding: 0px;
      }
      
      @keyframes rotate {
        100% {
          transform: rotate(-360deg);
        }
      }
      </style>
    4. 注意:animation 并不太注重语法顺序(除了 【duration / 动画用时】 一定在 【delay / 动画延时】 之前),但在 -webkit-animation (主要针对 "Safari")中,不能以 -webkit-animation-name 来结尾:
      animation: myfirst 5s linear 2s infinite alternate;
      animation: 5s linear 2s infinite myfirst alternate;
      animation: 5s 2s infinite alternate linear myfirst;
      // etc... 都是可以的
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15975.html
标签
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!