CSS3基础1

时间：2024-03-13 16:32:32
  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... 都是可以的

相关文章