前端CSS3详细教程-02

leeming
216 阅读10分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一、字体图标

字体图标主要用来显示网页中常用的一些小图标，和精灵图图标相比更为方便和高效

  • 更轻量：比图片更小，一量字体加载了，图标就会显示，减少了服务器请求的次数
  • 更灵活：本质上还是文字，可以通过CSS样式设置颜色、大小、透明度等
1、下载

国外 icomoon字库 icomoon.io

阿里 iconfont字库 www.iconfont.cn

  • 添加图标

image-20201118041910218.png

  • 生成字体

image-20201118042611093.png

  • 下载字体库

image-20201118042923171.png

  • 解压缩就可得到如下文件

image-20201118043125852.png

2、引入

  • 将fonts文件夹放到页面根目录

  • 字体声明

    <style>
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?o5rdvh');
    src: url('fonts/icomoon.eot?o5rdvh#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?o5rdvh') format('truetype'), url('fonts/icomoon.woff?o5rdvh') format('woff'), url('fonts/icomoon.svg?o5rdvh#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
</style>
3、使用

  • 在demo.html找到所需要的图标，进行复制

image-20201118043823419.png

  • 将html标签的字体设置为icomoon。 font-family: icomoon;

    <style> 
    .icomoon {
        font-family: icomoon;
    }
​
    .red {
        color: red;
        font-size: 60px;
    }
</style>

    <span class="icomoon red"></span>

image-20201118044525020.png

4、追加

如果字体图标不够用，还可以追加新的字体

  • 将压缩包中的selection.json重新上传

image-20201118044838064.png

image-20201118045013963.png

  • 重复上面的选择、生成、下载、引用操作即可

二、渐变背景

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡

1、线性渐变

线性渐变可以由向下/向上/向左/向右/对角方向定义

  • 语法

    background-image: linear-gradient(渐变方向, 颜色节点1, 颜色节点2, ...);

    • 颜色节点

      • 必须至少定义两种颜色节点。

      • 每一种颜色都可以设置一个渐变标识位

        • 比如：red 30%,green 60% 表示红绿两色的渐变范围在30%-60%之间
        • 比如：red 50%,green 50% 如果两个值设置成一样，则表示不发生渐变

      • 渐变中间阀值

        • 在两个颜色之间还可以设置渐变中间阀值，表示从哪个位置开始渐变

      • 为了添加透明度，我们也可以使用 rgba() 来定义颜色

    • 渐变方向

      • 默认方向为从上向下(to bottom)
      • 预定义方向（to bottom、to top、to right、to left、to bottom right，等等）
      • 还可以直接设置渐变角度（单位deg）。角度是指水平线和渐变线之间的角度，逆时针方向计算。
      • 换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变
      div {
    float: left;
    width: 300px;
    height: 200px;
    margin: 20px;
    font: bold 20px/200px 微软雅黑;
    color: yellow;
    text-align: center;
}
​
div.test1 {
    background: linear-gradient(red, green, blue);
}
​
div.test2 {
    background: linear-gradient(to right, red, green, blue);
}
​
div.test3 {
    background: linear-gradient(45deg, red, green, blue);
}
​
div.test4 {
    /*30%-70%为红绿两色渐变范围*/
    background: linear-gradient(to right, red 30%, green 70%);
}
​
div.test5 {
    /*开始和结束值一样表示不渐变*/
    background: linear-gradient(to right, red 50%, green 50%);
}
​
div.test6 {
    /*20%-50%为红绿两色渐变范围,50%-80%为绿蓝两色渐变范围*/
    background: linear-gradient(to right, red 20%, green 50%, blue 80%);
}
​
div.test7 {
    /*20%-30%为红绿两色渐变范围,70%-80%为绿蓝两色渐变范围*/
    background: linear-gradient(to right, red 20%, green 30%, 70%, blue 80%);
}
​
div.test8 {
    /*开始和结束值一样表示不渐变*/
    background: linear-gradient(to right, red 33.3%, green 33.3%, 66.6%, blue 66.6%);
}

image-20201118025843836.png

2、径向渐变

径向渐变由它的中心定义。

  • 语法

    /*方式一*/
background-image: radial-gradient(中心点,形状 尺寸,颜色节点1, ..., 颜色节点n);
/*方式二*/
background-image: radial-gradient(形状 尺寸 at 中心点,颜色节点1, ..., 颜色节点n);

    • 颜色节点

      • 必须至少定义两种颜色节点。
      • 每一种颜色都可以设置一个渐变标识位

    • 默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

    • 中心点：定义了渐变的起始点

      • at 30% 70% (x轴的30%，y轴的70%)
      • at bottom right

    • 形状：定义了渐变的形状

      • 可以是circle （圆形）或 ellipse（椭圆形）。默认值是 ellipse。
      • 如果元素的宽高一样，那参数shape无论设置为circle还是ellipse，显示效果都是圆形

    • 尺寸：定义了渐变的范围大小。

      • closest-side 最近边，渐变的终点是最近的一条边
      • farthest-side 最远边，渐变的终点是最远的一条边
      • closest-corner 最近角，渐变的终点是最近的一个角
      • farthest-corner 最远角，渐变的终点是最远的一个角（默认)

    • 也可以直接指定宽高直接定义尺寸形状 比如：200px 200px表示一个半径200的圆形

      div {
     float: left;
     width: 300px;
     height: 200px;
     margin: 20px;
     font: bold 20px/200px 微软雅黑;
     color: yellow;
     text-align: center;
}
​
div.test1 {
    background: radial-gradient(red, green, blue);
}
​
div.test2 {
    background: radial-gradient(at right bottom, red, green, blue);
}
​
div.test3 {
    background: radial-gradient(at 150px 150px, red, green, blue);
}
​
div.test4 {
    background: radial-gradient( circle closest-corner, red, green, blue, black);
}
​
div.test5 {
    background: radial-gradient( 100px 100px, red, green, blue, black);
}
​
div.test6 {
    background: radial-gradient(50px 50px at 100px 100px, red, green, blue);
}
​
div.test7 {
    background: radial-gradient(circle, red, yellow 20%, black 60%);
}
​
div.test8 {
    background: radial-gradient(circle, red 10%, green 10%, 25%, blue 25%, 50%, pink 50%);
}

image-20201118034428222.png

3、重复的线性渐变

  • 语法

    div.test1 {
    background: repeating-linear-gradient(to right, red, green 30px, blue 60px);
}
​
div.test2 {
    background: repeating-linear-gradient(45deg, red, 20px, yellow 20px, 20px, green 40px);
}
​
div.test3 {
    background: repeating-linear-gradient(90deg, black, 15px, yellow 15px, 15px, white 20px);
}

image-20201118040316042.png

4、重复的径向渐变

  • 语法

    div.test1 {
    background: repeating-radial-gradient(circle, red, green 30px, blue 60px);
}
​
div.test2 {
    background: repeating-radial-gradient(circle, red, 20px, yellow 20px, 20px, green 40px);
}
​
div.test3 {
    background: repeating-radial-gradient(circle, black, 15px, yellow 15px, 15px, white 20px);
}

image-20201118040524263.png

三、过渡

过渡（transition）是CSS3中最具有颠覆性的特性之一，让我们可以在不使用JS的情况下呈现动画效果。

过渡动画：从一个状态渐渐过渡到另外一个状态

  • 语法：

    transition:过渡属性 花费时间  [运动曲线]  [延迟时间];

    • 过滤属性：

      • 宽度、高度、背景颜色、内外边距都可以
      • 全部属性：all

    • 花费时间

      • 单位是s(秒) 0.5s

    • 运动曲线

      • 默认为ease，还可以设置为linear、ease-in）、ease-out、ease-in-out

        img

    • 延迟时间

      • 指延迟触发的时间 默认为0
      • 单位是s(秒)

  • 过渡添加给谁？

    • 谁来变化给谁加
    • 通常和:hover搭配使用

代码演示

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background-color: #f00;
    transition: all .8s;
}
​
div:hover {
    width: 800px;
    background-color: blue;
}

  • 案例：京东弹出子菜单

    image-20201118054331957

image-20201118054331957.png

四、2D转换

2D转换是改变标签元素在二维平面上的位置和形状，主要包括：

  • 位移 - translate
  • 旋转 - rotate
  • 缩放 - scale
1、位移 - translate

  • 语法：

    /*水平方向移动*/
transform: translateX(n)
/*垂直方向移动*/
transfrom: translateY(n)
/*水平垂直方向同时移动*/
transform: translate(x, y)
    • 2D的移动主要是指 水平、垂直方向上的移动
    • translate最大的优点就是不影响其他元素的位置
    • translate中的%单位，是相对于本身的宽度和高度来进行计算的
    • translate对行内标签没有效果

  • 案例：让盒子水平垂直居中

    div {
    position: absolute;
    top: 50%;
    left: 50%;
    tansform: translate(-50%,-50%);
}
2、旋转 - rotate

  • 语法：

    transform: rotate(旋转度数);
    • 旋转度数，单位是deg
    • 旋转角度为正时，顺时针，角度为负时，逆时针
    • 还可以将旋转度数设置为旋转的圈数，单位为turn。比如1turn就是一圈，.5turn就是半圈。
    • 默认旋转的中心点是元素的中心点

  • 设置旋转中心点

    transform-origin: x y;
    • 注意后面的参数 x 和 y 用空格隔开
    • 默认旋转中心点是元素的中心 (50% 50%)，等价于center center
    • 可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

  • 案例：三角形制作

    span {
     display: inline-block;
     width: 15px;
     height: 15px;
     margin-right: 20px;
     border-right: 1px solid red;
     border-bottom: 1px solid red;
}
​
span:nth-of-type(1) {
    transform: rotate(45deg);
}
​
span:nth-of-type(2) {
    transform: rotate(-135deg);
}
​
span:nth-of-type(3) {
    transform: rotate(-45deg);
}
​
span:nth-of-type(4) {
    transform: rotate(135deg);
}

image-20201118062830469.png

```
span {
    display: inline-block;
    border: 10px solid white;
}
​
span:nth-of-type(1) {
    border-top-color: gray;
    border-bottom: 0;
}
​
span:nth-of-type(2) {
    border-bottom-color: green;
    border-top: 0;
}
​
span:nth-of-type(3) {
    border-left-color: blue;
    border-right: 0;
}
​
span:nth-of-type(4) {
    border-right-color: red;
    border-left: 0;
}
​
span:nth-of-type(5) {
    display: inline-block;
    border-style: solid;
    border-width: 10px;
    border-top-color: gray;
    border-right-color: red;
    border-bottom-color: green;
    border-left-color: blue;
}
```

image-20201118064916452.png

3、缩放 - scale

  • 语法：

    transform: scale(w, h);
    • 注意，w 与 h 之间使用逗号进行分隔
    • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
    • transform: scale(2, 2): 宽和高都放大了二倍
    • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
    • transform:scale(0.5, 0.5): 缩小
    • scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

  • 案例：图片放大效果

    div {
    float: left;
    margin: 8px;
    overflow: hidden;
}
​
div img {
    width: 180px;
    height: 180px;
    transition: all 1s;
}
​
div img:hover {
    transform: scale(1.2, 1.2);
}

image-20201118062600386.png

4、综合写法

同时使用多个转换效果时，可以采用综合写法

  • 语法：

    transform: translate() rotate() scale();
    • 顺序会影响到转换的效果，比如先旋转会改变坐标轴方向
    • 同时有位移或者其他属性的时候，建议将位移放到最前面

五、抽奖大转盘

image-20201119051823304.png

代码展示

<!-- html部分 -->
​
<div class="box">
    <div class="turntable">
        <ul class="line">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol class="awards">
            <li>键盘</li>
            <li>小米电视</li>
            <li>充气娃娃</li>
            <li>笔记本电脑</li>
            <li>洗衣机</li>
            <li>谢谢参与</li>
        </ol>
​
    </div>
    <div class="circle">抽奖
        <span class="arrow"></span>
    </div>
</div>

/* css部分 */
* {
    margin: 0;
    padding: 0;
    border-radius: 50%;
}

ul,
ol {
    list-style: none;
}

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.turntable {
    position: relative;
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    border: 20px solid orangered;
    background: #ffcb3f;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4);
    transition: all 10s cubic-bezier(0.42, 0, 0, 1.01);
}

.line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
}

.line li {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 2px solid rgb(248, 75, 75);
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    color: white;
    font: bold 26px/120px 微软雅黑;
    text-align: center;
    line-height: 120px;
    background-color: orangered;
    box-shadow: 0px 0px 10px 10px rgb(179, 49, 1) inset;
    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.circle .arrow {
    position: absolute;
    top: -40px;
    left: 26px;
    border: 34px solid transparent;
    border-bottom-width: 60px;
    border-bottom-color: rgb(195, 56, 5);
    border-top: 0;
}

.awards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.awards li {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: orangered;
    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    transform-origin: 50% 160px;
}

/*JS部分*/

// 转盘区域分割线
document.querySelectorAll(".line>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index * 60 + "deg)"
})

// 奖品区域划分
document.querySelectorAll(".awards>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index / 6 + "turn)"
})

// 开始抽奖
var num = 0;
document.querySelector(".circle").onclick = function() {
    num += (parseInt(Math.random() * 101) + 100) * 60;
    document.querySelector(".turntable").style.transform = "rotate(" + num + "deg)"

}/* css部分 */
* {
    margin: 0;
    padding: 0;
    border-radius: 50%;
}

ul,
ol {
    list-style: none;
}

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.turntable {
    position: relative;
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    border: 20px solid orangered;
    background: #ffcb3f;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4);
    transition: all 10s cubic-bezier(0.42, 0, 0, 1.01);
}

.line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
}

.line li {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 2px solid rgb(248, 75, 75);
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    color: white;
    font: bold 26px/120px 微软雅黑;
    text-align: center;
    line-height: 120px;
    background-color: orangered;
    box-shadow: 0px 0px 10px 10px rgb(179, 49, 1) inset;
    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.circle .arrow {
    position: absolute;
    top: -40px;
    left: 26px;
    border: 34px solid transparent;
    border-bottom-width: 60px;
    border-bottom-color: rgb(195, 56, 5);
    border-top: 0;
}

.awards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.awards li {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: orangered;
    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    transform-origin: 50% 160px;
}

/*JS部分*/

// 转盘区域分割线
document.querySelectorAll(".line>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index * 60 + "deg)"
})

// 奖品区域划分
document.querySelectorAll(".awards>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index / 6 + "turn)"
})

// 开始抽奖
var num = 0;
document.querySelector(".circle").onclick = function() {
    num += (parseInt(Math.random() * 101) + 100) * 60;
    document.querySelector(".turntable").style.transform = "rotate(" + num + "deg)"

}
avatar
文章
阅读
粉丝