CSS3语法

2020-01-04 本文已影响0人 kevin5979

由于期末考试。。。(慌得一) 接下来的半个月可能不会有新的技术文发出祝自己好运，也祝大家万事如意啦，谢谢大家爱你萌(୨୧•͈ᴗ•͈)︎ᶫᵒᵛᵉ

基础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 越大，边角越圆，当 x >= 50时，元素边框为圆
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相关值

CSS3背景

background-clip	background-origin	background-size
规定背景的绘制区域	规定背景图片的定位区域	规定背景图片的尺寸

background-clip取值：border-box（默认），padding-box，content-box

background-origin取值：border-box，padding-box（默认），content-box

background-size取值：
1.length：设置背景图片高度和宽度。
2.percentage：将计算相对于背景定位区域的百分比。
3.cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
4.contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

CSS3渐变

线性渐变（Linear Gradients）

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

从上到下的线性渐变（默认）

#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属性：处理文字溢出内容

div{
    width: 100px;
    height: 23px;
    border: 1px solid #000;
    overflow: hidden;    /*一定要添加溢出隐藏，不然没有效果*/
    text-overflow: ellipsis;/*溢出部分以圆点显示*/
}

Text Overflow属性

word-break属性：控制文字是否换行

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

@font-face 规则

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

CSS3 过渡动画

过渡动画执行三要素：
1.必须有属性发生变化
2.选择要添加过渡动画的属性
3.设置过渡动画执行的时长

代码演示

    div{
      width: 100px;
      height: 50px;
      background: red;
      /* 第二步,选择要执行过渡动画的属性 */
      transition-property: width;
      /* 第三步,设置动画时长 */
      transition-duration: 2s;
    }
    div:hover{
      /* 第一步,有属性发生变化 */
      width: 300px;
    }

如果一个元素有多个属性同时发生变化，可以用逗号隔开，变化时间相同可只写一个，

transition-property: width,background-color;
transition-duration: 2s;

过渡动画其他属性

transition-deday：设置动画延迟时间（默认为 0）

transition-deday:2s

transition-timing-function：设置过渡动画的运动速度，取值如下：
1.linear：匀速
2.ease：逐渐变慢 (默认值)
3.ease：加速
4.ease-out：减速
5.ease-in-out：先加速后减速

过渡动画连写(transition)

    div {
      width: 100px;
      height: 50px;
      background: red;
      /* 第二步和第三步合在一起,多个属性用逗号隔开 */
      transition: width 2s linear 0s, background-color 1s ease 0s;
      
      /* 以下方式的 all 选择所有变化的元素 */
      /* transition: all 3s; */
    }

    div:hover {
      /* 第一步,有属性发生变化 */
      width: 500px;
      background-color: blueviolet;
    }

CSS3 转换

2D转换

translate(x,y)方法：根据当前位置按照x，y水平移动

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

rotate(angle)方法：根据给出的 angle 水平顺时针旋转元素

div{
  transform:rotate(30deg)
}

scale(x,y) 方法：按照给出的x，y的大小，等比例缩放元素，其中 x=y=1 时，元素不发生变化

div{
  transform:scale(2,3)
}

transform连写

如果一个元素有既需要平移，也需要旋转，那么 transform 的第二个属性会覆盖第一个属性，所有有以下的连写方式：（需要注意坐标轴的变化）

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

skew(x-angle,y-angle)方法：两个参数值分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div{
  transform: skew(20deg,20deg);
}

transform-origin 属性：设置旋转元素的旋转中心

语法：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 转换

屏幕的坐标轴(蓝色区域可表示屏幕平面)

坐标轴

translate3d(x,y,z)方法：向右移动x，向下移动y，以中心为原点，变大

translateX(x)
translateY(y)
translateZ(z)

div{
  transform:translate3d(x,y,z)
}

rotateX() 、rotateY()、rotateZ()：沿X，Y，Z轴旋转

div{
  transform: rotateX(50deg);
  transform: rotateY(70deg);
  transform: rotateZ(20deg);
}

元素呈3d模式展示

/* 该元素添加到父元素上，常和 perspective 联用 */
transform-style:preserve-3d;

CSS中的动画效果

动画必备三要素

1.必须定义动画的名字
2.根据定义的动画名称，创建一个动画
3.指定动画的时长

代码演示

    div{
      width: 100px;
      height: 50px;
      background-color: #f00;
      
      /* 第一步:定义动画名称 */
      animation-name: move;

      /* 第三步:设置动画时长 */
      animation-duration: 2s;
    }

    /* 第二步:编写执行动画 */
    @keyframes move {
      form{
        margin-left: 0px;
      }
      to{
        margin-left: 300px;
      }
    }

其他属性

      /* 设置动画延迟时间 */
      animation-delay: 2s;

      /* 设置动画执行速度,与过渡动画一致 */
      animation-timing-function: linear;

      /* 设置动画执行次数 */
      /* infinite: 无限次动画 */
      animation-iteration-count: 2;

      /* 设置动画是否往返 */
      /* normal: 不执行往返 （默认） */
      /* alternate: 执行往返 */
      animation-direction: alternate;

      /* 控制动画执行或停止 */
      /* running: 运动 （默认） */
      /* paused: 暂停 */
      animation-play-state: running;

      /* 控制动画等待状态和结束状态的样式 */
      /* 
        none: 不做任何改变 (默认值)
        forwards: 让元素结束转态保持最后一帧的样式
        backwards: 让元素等待转态保持第一帧的样式
        both: forwards 和 backwards 组合效果
       */
      animation-fill-mode: backwards;

动画的连写模式
animation:动画名称时长速度延迟次数往返

    /* animation:名称 时长 速度 延迟 次数 往返 */
      animation: move 2s linear 1s 3 normal;

END

CSS3语法

由于期末考试。。。(慌得一) 接下来的半个月可能不会有新的技术文发出祝自己好运，也祝大家万事如意啦，谢谢大家爱你萌(୨୧•͈ᴗ•͈)︎ᶫᵒᵛᵉ

CSS3边框

CSS3背景

CSS3渐变

线性渐变（Linear Gradients）

径向渐变（Radial Gradients）

CSS3文本效果

CSS3 过渡动画

过渡动画其他属性

过渡动画连写(transition)

CSS3 转换

2D转换

transform连写

perspective属性

3D 转换

元素呈3d模式展示

CSS中的动画效果

动画必备三要素

猜你喜欢

热点阅读

CSS3语法

由于期末考试。。。(慌得一) 接下来的半个月可能不会有新的技术文发出 祝自己好运，也祝大家万事如意啦，谢谢大家 爱你萌(୨୧•͈ᴗ•͈)︎ᶫᵒᵛᵉ

CSS3边框

CSS3背景

CSS3渐变

线性渐变（Linear Gradients）

径向渐变（Radial Gradients）

CSS3文本效果

CSS3 过渡动画

过渡动画其他属性

过渡动画连写(transition)

CSS3 转换

2D转换

transform连写

perspective属性

3D 转换

元素呈3d模式展示

CSS中的动画效果

动画必备三要素

猜你喜欢

热点阅读

由于期末考试。。。(慌得一) 接下来的半个月可能不会有新的技术文发出祝自己好运，也祝大家万事如意啦，谢谢大家爱你萌(୨୧•͈ᴗ•͈)︎ᶫᵒᵛᵉ