CSS3語法

由于期末考試。。。(慌得一) 接下來的半個(gè)月可能不會(huì)有新的技術(shù)文發(fā)出 祝自己好運(yùn)，也祝大家萬事如意啦，謝謝大家 愛你萌(???????)?????

基礎(chǔ)CSS教程參考這里

CSS3邊框

border-radius：制作圓角

  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: #f00;
      border: 1px solid #000;
    }
    .div1{
      border-radius: 10px;
    }
    .div2{
      border-radius: 50%;
    }
    .div3{
      border-radius: 10px 25px 40px 55px;
    }
    
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</body>
border-radius

border-radius : x px ; --> x 越大，邊角越圓
border-radius : x % ; --> x 越大，邊角越圓，當(dāng) x >= 50時(shí)，元素邊框?yàn)閳A
border-radius : 上，右，下，左

box-shadow：添加陰影

  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: #f00;
      border: 1px solid #000;
      box-shadow:6px 7px 6px 0px #468831;
    }
  </style>
box-shadow

box-shadow：h-shadow v-shadow blur spread color inset;

box-shadow相關(guān)值

CSS3背景

background-clip background-origin background-size
規(guī)定背景的繪制區(qū)域 規(guī)定背景圖片的定位區(qū)域 規(guī)定背景圖片的尺寸
  • background-clip取值：border-box（默認(rèn)），padding-box，content-box
  • background-origin取值：border-box，padding-box（默認(rèn)），content-box
  • background-size取值：
    1.length： 設(shè)置背景圖片高度和寬度。
    2.percentage： 將計(jì)算相對于背景定位區(qū)域的百分比。
    3.cover： 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
    4.contain：此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

CSS3漸變

線性漸變（Linear Gradients）

語法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

從上到下的線性漸變（默認(rèn)）

#grad {
    background: linear-gradient(#f00, rgb(13, 77, 119),#ccc);
}

線性漸變 - 從左到右

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

線性漸變 - 對角

#grad {
  background-image: linear-gradient(to bottom right, red , yellow);
}

線性漸變 - 任意角度

background-image: linear-gradient(angle, color-stop1, color-stop2);

徑向漸變（Radial Gradients）

語法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

CSS3文本效果

text-shadow（文字陰影）：用法與 box-shadow 幾乎一樣

div{
   text-shadow: 5px 5px 5px #FF0000;
}

box-shadow（盒子陰影）：用法與 box-shadow 幾乎一樣

div{
   box-shadow: 10px 10px 5px #888;
}

卡片效果

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

Text Overflow屬性：處理文字溢出內(nèi)容

div{
    width: 100px;
    height: 23px;
    border: 1px solid #000;
    overflow: hidden;    /*一定要添加溢出隱藏，不然沒有效果*/
    text-overflow: ellipsis;/*溢出部分以圓點(diǎn)顯示*/
}
Text Overflow屬性

word-break屬性：控制文字是否換行

div{
    word-wrap: none; /*不換行*/
    word-wrap: break-word; /*換行*/
    word-break: keep-all;/*以空白出換行*/
    word-break: break-all;/*以最后換行*/
}

@font-face 規(guī)則

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

CSS3 過渡動(dòng)畫

過渡動(dòng)畫執(zhí)行三要素：
1.必須有屬性發(fā)生變化
2.選擇要添加過渡動(dòng)畫的屬性
3.設(shè)置過渡動(dòng)畫執(zhí)行的時(shí)長

  • 代碼演示
    div{
      width: 100px;
      height: 50px;
      background: red;
      /* 第二步,選擇要執(zhí)行過渡動(dòng)畫的屬性 */
      transition-property: width;
      /* 第三步,設(shè)置動(dòng)畫時(shí)長 */
      transition-duration: 2s;
    }
    div:hover{
      /* 第一步,有屬性發(fā)生變化 */
      width: 300px;
    }

如果一個(gè)元素有多個(gè)屬性同時(shí)發(fā)生變化，可以用逗號隔開，變化時(shí)間相同可只寫一個(gè)，

transition-property: width,background-color;
transition-duration: 2s;
過渡動(dòng)畫其他屬性

transition-deday：設(shè)置動(dòng)畫延遲時(shí)間（默認(rèn)為 0）

transition-deday:2s

transition-timing-function：設(shè)置過渡動(dòng)畫的運(yùn)動(dòng)速度，取值如下：
1.linear：勻速
2.ease：逐漸變慢 (默認(rèn)值)
3.ease：加速
4.ease-out：減速
5.ease-in-out：先加速后減速

過渡動(dòng)畫連寫(transition)
    div {
      width: 100px;
      height: 50px;
      background: red;
      /* 第二步和第三步合在一起,多個(gè)屬性用逗號隔開 */
      transition: width 2s linear 0s, background-color 1s ease 0s;
      
      /* 以下方式的 all 選擇所有變化的元素 */
      /* transition: all 3s; */
    }

    div:hover {
      /* 第一步,有屬性發(fā)生變化 */
      width: 500px;
      background-color: blueviolet;
    }

CSS3 轉(zhuǎn)換

2D轉(zhuǎn)換

translate(x,y)方法：根據(jù)當(dāng)前位置按照x，y水平移動(dòng)

div{
  transform: translate(30px,30px);
}

rotate(angle)方法：根據(jù)給出的 angle 水平順時(shí)針旋轉(zhuǎn)元素

div{
  transform:rotate(30deg)
}

scale(x,y) 方法：按照給出的x，y的大小，等比例縮放元素，其中 x=y=1 時(shí)，元素不發(fā)生變化

div{
  transform:scale(2,3)
}
transform連寫

如果一個(gè)元素有既需要平移，也需要旋轉(zhuǎn)，那么 transform 的第二個(gè)屬性會(huì)覆蓋第一個(gè)屬性，所有有以下的連寫方式：（需要注意坐標(biāo)軸的變化）

transfrom: rotate(45deg) translate(50px,50px) scale(1.5);

skew(x-angle,y-angle)方法：兩個(gè)參數(shù)值分別表示X軸和Y軸傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。

  • skewX(<angle>);表示只在X軸(水平方向)傾斜。
  • skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
div{
  transform: skew(20deg,20deg);
}

transform-origin 屬性：設(shè)置旋轉(zhuǎn)元素的旋轉(zhuǎn)中心

  • 語法：transform-origin: x-axis y-axis z-axis;

x-axis：left、center、right、length、%
y-axis：left、center、right、length、%
z-axis：length

div{
  transform-origin:center center;
}
perspective屬性

注意：該屬性添加到顯示效果的元素的上級元素

  <style>
    li{
      list-style: none;
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      /* perspective 屬性添加到 img 的父元素上,屬性值越大,視線距離越大 */
      perspective: 500px;
    }
    img{
      width: 100%;
      height: 100%;
      transform: rotateX(30deg);
    }
  </style>
</head>
<body>
    <ul>
      <li>
        <img src="http://img4.imgtn.bdimg.com/it/u=2853553659,1775735885&fm=26&gp=0.jpg">
      </li>
    </ul>
</body>
perspective屬性
3D 轉(zhuǎn)換

屏幕的坐標(biāo)軸(藍(lán)色區(qū)域可表示屏幕平面)

坐標(biāo)軸

translate3d(x,y,z)方法：向右移動(dòng)x，向下移動(dòng)y，以中心為原點(diǎn)，變大

  • translateX(x)
  • translateY(y)
  • translateZ(z)
div{
  transform:translate3d(x,y,z)
}

rotateX() 、rotateY()、rotateZ()：沿X，Y，Z軸旋轉(zhuǎn)

div{
  transform: rotateX(50deg);
  transform: rotateY(70deg);
  transform: rotateZ(20deg);
}
元素呈3d模式展示
/* 該元素添加到父元素上，常和 perspective 聯(lián)用 */
transform-style:preserve-3d;

CSS中的動(dòng)畫效果

動(dòng)畫必備三要素

1.必須定義動(dòng)畫的名字
2.根據(jù)定義的動(dòng)畫名稱，創(chuàng)建一個(gè)動(dòng)畫
3.指定動(dòng)畫的時(shí)長

  • 代碼演示
    div{
      width: 100px;
      height: 50px;
      background-color: #f00;
      
      /* 第一步:定義動(dòng)畫名稱 */
      animation-name: move;

      /* 第三步:設(shè)置動(dòng)畫時(shí)長 */
      animation-duration: 2s;
    }

    /* 第二步:編寫執(zhí)行動(dòng)畫 */
    @keyframes move {
      form{
        margin-left: 0px;
      }
      to{
        margin-left: 300px;
      }
    }
  • 其他屬性
      /* 設(shè)置動(dòng)畫延遲時(shí)間 */
      animation-delay: 2s;

      /* 設(shè)置動(dòng)畫執(zhí)行速度,與過渡動(dòng)畫一致 */
      animation-timing-function: linear;

      /* 設(shè)置動(dòng)畫執(zhí)行次數(shù) */
      /* infinite: 無限次動(dòng)畫 */
      animation-iteration-count: 2;

      /* 設(shè)置動(dòng)畫是否往返 */
      /* normal: 不執(zhí)行往返 （默認(rèn)） */
      /* alternate: 執(zhí)行往返 */
      animation-direction: alternate;

      /* 控制動(dòng)畫執(zhí)行或停止 */
      /* running: 運(yùn)動(dòng) （默認(rèn)） */
      /* paused: 暫停 */
      animation-play-state: running;

      /* 控制動(dòng)畫等待狀態(tài)和結(jié)束狀態(tài)的樣式 */
      /* 
        none: 不做任何改變 (默認(rèn)值)
        forwards: 讓元素結(jié)束轉(zhuǎn)態(tài)保持最后一幀的樣式
        backwards: 讓元素等待轉(zhuǎn)態(tài)保持第一幀的樣式
        both: forwards 和 backwards 組合效果
       */
      animation-fill-mode: backwards;
  • 動(dòng)畫的連寫模式
    animation:動(dòng)畫名稱 時(shí)長 速度 延遲 次數(shù) 往返
    /* animation:名稱 時(shí)長 速度 延遲 次數(shù) 往返 */
      animation: move 2s linear 1s 3 normal;
END
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容