CSS3基础入门03

最新推荐文章于 2024-11-02 19:19:35 发布
最新推荐文章于 2024-11-02 19:19:35 发布
阅读量164 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liujunhang/p/10745993.html
版权

目录

CSS3 基础入门03

线性渐变

在css3当中，通过渐变属性实现之前只能通过图片实现的渐变效果。渐变分为线性渐变和径向渐变以及重复渐变三种。线性渐变的模式主要是颜色从一个方向过渡到另外一个方向，而径向渐变则是以一个点为基点(圆心)，以点向四周进行渐变。渐变形状为一个圆，重复渐变则分为重复线性渐变和重复径向渐变，是对于前面两种渐变的一种重复模式。

语法：

linear-gradient:point| angle color percentage
  • point表示方向，angle表示角度。
  • color表示颜色，一般分为起始颜色、过渡颜色和结束颜色。
  • percentage表示百分比，一般表示颜色渐变过程中的百分比。

下面是一个简单的渐变效果的实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>线性渐变</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(red,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

通过上面的代码，我们可以实现颜色从red到yellow的一个渐变效果。但是需要注意的是，通过渐变设置颜色其实相当于设置了background-image也就是背景图片。当然也可以采用background简写属性来设置渐变。

在上面的代码中，颜色默认的渐变方向是从上到下，这一点需要注意。

多个颜色的线性渐变:
我们也可以设置多个颜色的渐变，例如从红色到蓝色再到黄色，可以直接在linear-gradient属性值当中设置red blue 和yellow.
demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>线性渐变</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(red,blue,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

改变线性渐变方向:
我们可以通过在颜色值的前面添加方向关键词来调整颜色渐变的起始方向。
demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>线性渐变</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(to left,red,blue,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

在上面的案例当中，我们在颜色的前面添加了表示方向的关键词to left，表示线性渐变从右到左。

当然我们也可以直接设置为left，但是因为兼容性的问题，我们就必须设置浏览器前缀。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>线性渐变</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: -webkit-linear-gradient(left,red,blue,yellow);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

当我们将渐变方向关键词变为left，则正好与上面的demo渐变方向相反，表示从左向右。

并不推荐使用这种方式，因为我们还要考虑到兼容性的问题。

其他的方向关键词设置:
我们可以将常用的方向关键词进行组合使用。

to left 从右向左
to right 从左向右 
to bottom 从上向下
to top 从下到上
to left top 从右下到左上
to right top 从左下到右上
to left bottom 从右上到左下
to right bottom 从左上到右下

通过角度angle来设置方向：
我们除了通过关键词来设置渐变方向以外，还可以通过具体的角度值来设置渐变方向。

在css当中，deg表示角度。

demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>线性渐变</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background-image: linear-gradient(0deg,red,blue);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

在上面的例子中，我们将方向值变成了角度值，同样也可以实现渐变方向的改变。
需要注意的是，角度值为正则方向为顺时针的变化,角度值为负则方向为逆时针的变化，下面的demo中，通过JavaScript来查看角度分别为正和负时渐变颜色的变化。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        #box {
            width: 400px;
            height: 400px;
            background-image: linear-gradient(0deg,red,blue);
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn1">正角度</button>
    <button id="btn2">负角度</button>
</body>
<script>
    let oBox  = document.querySelector("#box");
    let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    let num = 0;
    oBtn1.onclick = function () {
        setInterval(function(){
            num = num +1; 
            box.style.backgroundImage = `linear-gradient(${num}deg,red,blue)`;
        },30)
    }
    oBtn2.onclick = function () {
        setInterval(function(){
            num = num  - 1; 
            box.style.backgroundImage = `linear-gradient(${num}deg,red,blue)`;
        },30)
    }
</script>
</html>

在上面的示例代码中，我们点击正角度按钮就可以让元素按照角度值为正进行变换。点击负角度按钮可以让元素按照角度值为负进行变换。从而证实我们上面所说的问题。

线性渐变百分比的设置：
我们可以给每个颜色后面加上一个百分比，从而让渐变的过程受到我们的把控。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: linear-gradient(red 30%,blue 60%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

我们在上面的代码中，我们在每个颜色的后面加入了百分比。
上面的代码的含义是，从0%到30%为纯红色，从30%到60%为红色到蓝色的渐变，而60%到100%则表示纯蓝色。

根据上面的解释，如果我们想要在一个盒子形成一半为纯红色，一半为纯蓝色的背景，该怎么实现呢？
其实非常简单，只需要让中间渐变的过程为0即可。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: linear-gradient(red 50%,blue 50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

例如上面的例子，我们将从0%到50%设置为纯红色，从50%到50%设置为红色到蓝色的渐变，从50%到100%设置为纯蓝色，即可实现我们上面的需求。

盒子当中实现四个颜色平均分配：
我们可以根据上面所学来完成一下小练习，例如，我们希望在一个盒子中存在红绿蓝黄四个颜色，并且并不存在渐变的效果，四个颜色皆为纯色并且平均分配，该怎么做呢？

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: linear-gradient(red 25%, green 25%,green 50%,blue 50%, blue 75%,yellow 75%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在渐变中我们不仅仅可以设置百分比来表示颜色变换的过程，也可以设置length具体值。

关于IE的线性渐变:
在IE浏览器中，我们可以实现两个颜色之间的渐变效果，语法格式如下：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

startColorstr表示起始颜色
endColorstr 表示结束颜色
GradientType 值为1表示从左向右 值为0表示从上向下

径向渐变

不同于上面我们说的线性渐变，径向渐变有些类似于放射性的，从点放射到四周。

语法：

background: radial-gradient(center, shape size, start-color, ..., last-color);

虽然上面的语法看上去有些复杂，但是用法上起始与线性渐变很是类似，下面我们来看下具体的使用。

最简单的径向渐变:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: radial-gradient(red,yellow);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

上面的代码将会在box这个元素中形成一个渐变效果，呈现的形状为一个正圆。圆心开始为红色，从圆心开始逐渐的向四周过渡。

设置形状：
径向渐变的形状是一个圆，在径向渐变中，可以设置正圆circle和椭圆ellipse。默认情况下为正圆。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: radial-gradient(ellipse,red,blue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

设置多个颜色：
在径向渐变中同样可以设置多个颜色。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: radial-gradient(red,blue,pink);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

设置径向渐变的方向:
在径向渐变中设置渐变方向，需要注意，不能采用to + 方向 这种形式，而是应该直接设置方向关键词，并且添加浏览器前缀。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(left,red,blue,pink);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

设置径向渐变的起始位置:
在径向渐变中，我们没有办法设置具体的角度值，我们可以通过length设置圆心的位置，从而改变径向渐变的起始位置。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(140px 300px,red,blue,pink);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

设置颜色渐变百分比:
径向渐变中同样可以设置颜色渐变的百分比，用以把控渐变的过程。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(red 20%, blue 30%, lightblue 50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

径向渐变中颜色百分比的原理和线性渐变相同。

设置径向渐变的横向半径和纵向半径：
径向渐变中我们可以设置圆形的坐标，从而实现更改渐变的位置。我们在上面说到，径向渐变还可以更改径向渐变的形状，可以设置为正圆和椭圆。当我们设置圆的形状时，除了通过关键词，还可以通过具体的length来进行设置。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(100px 100px,200px 300px,red,lightblue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

100px 100px表示圆心坐标，200px 300px表示横半径和纵半径。

通过关键词来设置径向渐变圆的大小：
在径向渐变中存在几个关键词，通过这些关键词可以设置径向渐变圆的大小。
关键词如下:

closest-side：最近边； 
farthest-side：最远边； 
closest-corner：最近角； 
farthest-corner：最远角

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-radial-gradient(100px 100px ,closest-side,blue,lightblue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

重复渐变

当我们在一个元素中需要将渐变进行重复时，可以使用重复渐变。重复渐变又分为重复线性渐变和重复径向渐变，用法很简单，只是在渐变属性的前面添加repeating即可。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: -webkit-repeating-radial-gradient(100px 100px ,closest-side,blue,lightblue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3 过渡

在css3中，通过过渡，可以让元素的动画变化放缓，从而具有更好的观感效果。

语法：

transition: property duration timing-function delay;

transition为过渡效果的简写属性，这个属性具体可以拆分为下面几个属性：

transition-property 规定应用过度的css属性名称
transition-duration 定义过渡效果需要时间
transition-timing-function 规定过渡效果的时间曲线，默认是“ease”
transition-delay   延迟

参与过渡的属性：
想要具体设置参与过渡的具体属性，可以通过transition-property,具体的值如下：

transition-property:none | all | property(css属性名称，用逗号进行分隔)

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

设置过渡时间：
通过transition-duration可以设置过渡所需的时间。单位是 s|ms。

我们可以把上面的代码继续完善一下。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
            transition-duration: 2s;
        }
        .box:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

设置过渡的速度时间曲线：
通过transition-timing-function可以设置过渡效果的时间曲线：

cubic-bezier (n,n,n,n)  贝塞尔曲线
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease   规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))
ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out  慢速结束过渡效果 等于 cubic-bezier(0,0,0.58,1)
ease-in-out     规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

关于`贝塞尔曲线，可以参考下面的网址：http://cubic-bezier.com/#.17,.67,.94,.18

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
        }
        .box:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

设置延迟时间:
在x秒或者x毫秒后执行效果。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition-property: width,height;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
            transition-delay: 1s;
        }
        .box:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

我们在开发的时候，推荐尽可能的使用简写属性。

给不同的样式设置不同的执行时间和延迟时间:
我们可以单独的给不同的样式分别设置执行时间和延迟时间。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: width 2s 1s,height 2s 2s,background-color 3s 1s;
        }
        .box:hover {
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS Banner点击切换
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner广告css代码实现</title>
    <style>
        body, figure {
            margin: 0;
        }

        img {
            width:100%;
            height: 700px;
        }

        figcaption {
            display: block;
            font-weight: bold;
            padding: 1em 0;
        }

        .gallery {
            position: relative;
        }

        .gallery > .item {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            text-align: center;
            -webkit-transition: opacity .5s;
            -o-transition: opacity .5s;
            transition: opacity .5s;
        }

        .gallery > .item:first-of-type {
            position: static;
            opacity: 1;
        }

        .gallery > .controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
        }

        .gallery > .control-operator {
            display: none;
        }

        .gallery .control-button {
            display: inline-block;
            margin: 0 .02em;
            font-size: 3em;
            text-align: center;
            text-decoration: none;
            -webkit-transition: color .1s;
            -o-transition: color .1s;
            transition: color .1s;
        }

        .gallery > .control-operator:target ~ .item {
            opacity: 0;
        }

        .gallery > .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
            opacity: 1;
        }
        .gallery > .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
            opacity: 1;
        }
        .gallery > .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
            opacity: 1;
        }

        /* a 按钮的样式 */
        .gallery .control-button {
            color: #ccc;
            color: rgba(255, 255, 255, 0.4);
        }

        .gallery .control-button:first-of-type {
            color: white;
            color: rgba(255, 255, 255, 0.8);
        }

        .gallery .control-button:hover {
            color: white;
            color: rgba(255, 255, 255, 0.8);
        }

        .gallery .control-operator:target ~ .controls .control-button {
            color: #ccc;
            color: rgba(255, 255, 255, 0.4);
        }

        .gallery .control-operator:target ~ .controls .control-button:hover {
            color: white;
            color: rgba(255, 255, 255, .8);
        }

        /* 被选中时 设置<a>.</a>颜色为 rgba(255,255,255,.8) */
        .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
        .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
        .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3) {
            color: white;
            color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>
<body>
    <div class="gallery">
        <!--control-operator 用来控制，不显示-->
        <div id="gallery-1" class="control-operator"></div>
        <div id="gallery-2" class="control-operator"></div>
        <div id="gallery-3" class="control-operator"></div>


        <figure class="item">
            <figcaption>壁纸1</figcaption>
            <img src="./images/b1.jpg" alt="">
        </figure>

        <figure class="item">
            <figcaption>壁纸2</figcaption>
            <img src="./images/b2.jpg" alt="">
        </figure>

        <figure class="item">
            <figcaption>壁纸3</figcaption>
            <img src="./images/b3.jpg" alt="">
        </figure>

        <div class="controls">
            <a href="#gallery-1" class="control-button">○</a>
            <a href="#gallery-2" class="control-button">○</a>
            <a href="#gallery-3" class="control-button">○</a>
        </div>
    </div>
</body>
</html>

CSS3 2D

css3中新增加了2D效果和3D效果，我们可以通过相关的属性设置从而实现很多之前只能通过JavaScript实现的效果。

相关属性:

transform  2D /3D 转换属性
transform-origin 更改元素旋转基点

2D变换方法:

translate(x,y)   沿着x y 移动元素/ translateX(n)  translateY(n)    
scale(x,y)  缩放  更改元素的宽度和高度 ,将宽度改为原来的x倍，高度改为原来的y倍 / scaleX(n) 更改宽度  scaleY(n)  更改高度
rotate(angle)  旋转 
skew(x-angle,y-angle)  定义2D 倾斜转换 沿着x轴和y轴  / skewX(angle) 沿着x轴转换  skewY(angle) 沿着y轴

2D效果主要针对的是页面当中的x轴和y轴进行的一系列的元素变化。

位移：

通过translate属性可以让元素沿着x轴和y轴进行位移。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2d</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:200px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }
        .box:hover .test {
            transform: translate(300px,100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div>
</body>
</html>

缩放：

通过scale属性可以对元素进行缩放操作。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2d</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:200px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }
        .box:hover .test {
            transform: scale(2);
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div>
    
</body>
</html>

需要注意的是，缩放的值为宽度或者高度的倍数。

旋转:
通过rotate属性可以让元素进行旋转。

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2d</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:200px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }
        .box:hover .test {
            transform: rotate(360deg);
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div>
    
</body>
</html>

如果更改元素的旋转基点，元素的旋转位置将会发生变化。

倾斜:
通过skew可以让元素沿着x轴或者y轴进行倾斜。
skew语法有些特殊：

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。

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

demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main {
            width: 500px;
            height: 500px;
            border:3px solid red;
            margin:100px auto;
            padding:30px;
        }
        .box,.son {
            width: 300px;
            height: 300px;
        }
        .box {
            border:1px solid blue;
        }
        .son {
            border:1px solid lightblue;
            transform: skew(30deg);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

形成效果如下：

1153905-20190421174006678-1455036689.png

下面是倾斜Y轴：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main {
            width: 500px;
            height: 500px;
            border:3px solid red;
            margin:100px auto;
            padding:30px;
        }
        .box,.son {
            width: 300px;
            height: 300px;
        }
        .box {
            border:1px solid blue;
        }
        .son {
            border:1px solid lightblue;
            transform: skewY(30deg);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

1153905-20190421174019069-2063170172.png

基点的改变对于元素变幻的影响：
通过transform-origin可以更改元素的基点，元素的基点一旦发生更改之后，就会产生不一样的效果。
1153905-20190421174346313-1649689616.png

例如，旋转roate，默认基点是元素的正中心，但是一旦改变基点之后旋转就会发生改变。
demo:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:100px auto;
        }
        .test {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
            transform-origin: left top;
        }
        .box:hover .test {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="test"></div>
    </div> 
</body>
</html>

图片切换:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }
        .t_image {
            transition: all 1s ease-in-out;
            cursor: pointer;
        }
        .t_image_top {
            position: absolute;
            transform: scale(0,0);
        }
        .img_box:hover .t_image_top {
            transform: scale(1,1);
            transform-origin: top right;
        }
        .img_box:hover .t_image_bottom {
            transform: scale(0,0);
            transform-origin:bottom left;
        }
    </style>
</head>
<body>
    <div class="img_box">
        <img src="photo3.jpg" alt="" class="t_image t_image_top">
        <img src="photo4.jpg" alt="" class="t_image t_image_bottom">
    </div>
</body>
</html>

Banner图切换:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner</title>
    <style>
        #content {
            width: 800px;
            margin:30px auto;
            position: relative;
        }

        input[type="radio"]{
            display: none;
        }
        input[type="radio"]~img {
            width: 800px;
            height: 500px;
            position: absolute;
            top:0;
            left:0;
            opacity: 0;
            transform: scale(1.1);
            transition: all 1s ;
        }

        input:checked + label + img {
           opacity: 1;
            transform: scale(1.0);
        }

        input:checked + label img {
            border: 8px solid lightblue;
            opacity: 1.0;
            transition: all 1s;
        }

        label {
            display: inline-block;
            width: 134px;
            margin:5px 8px;

        }
        label img {
            opacity: 0.5;
            width:134px;
            height: 75px;
            margin-top:500px;
            border:8px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="content">
        <input type="radio" name="carousel" id="list1" checked>
        <label for="list1">
            <img src="./images/photo1.jpg" alt="">
        </label>
        <img src="./images/photo1.jpg" alt="">

        <input type="radio" name="carousel" id="list2" >
        <label for="list2">
            <!--小图片-->
            <img src="./images/photo2.jpg" alt="">
        </label>
        <!--大图片-->
        <img src="./images/photo2.jpg" alt="">

        <input type="radio" name="carousel" id="list3" >
        <label for="list3">
            <img src="./images/photo3.jpg" alt="">
        </label>
        <img src="./images/photo3.jpg" alt="">

        <input type="radio" name="carousel" id="list4" >
        <label for="list4">
            <img src="./images/photo4.jpg" alt="">
        </label>
        <img src="./images/photo4.jpg" alt="">

        <input type="radio" name="carousel" id="list5" >
        <label for="list5">
            <img src="./images/photo5.jpg" alt="">
        </label>
        <img src="./images/photo5.jpg" alt="">


    </div>
</body>
</html>

CSS3 3D

相关属性:

transform    2d/3d转换
transform-origin   更改基点
transform-style    开启3D空间
perspective    视距
perspective-origin   景深基点
backface-visibibility   背面隐藏

3D变换方法:

translate3d(x,y,z)  /  translateX  translateY  translateZ
scale3d(x,y,z)  /  scaleX  scaleY  scaleZ
rotate3d(x,y,angle)  / rotateX(angle) rotateY(angle)  rotateZ(angle)

关于Z轴：
在2D中，我们说，网页的变换主要围绕x轴和y轴，而到了CSS3 3D,则相对于之前，多了一个Z轴。
Z轴表示垂直于网页的一个坐标轴，通过Z轴，能够构建网页当中的3D效果。

1153905-20190421174039372-1870520561.png

视距:
观察者沿着平行于Z轴的视线与屏幕之间的距离即为视距的距离，简称视距。

1153905-20190421174053976-130500199.jpg

视距要设置在父元素的身上，才会有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            /*一定要设置在父元素的身上*/
            perspective: 300px;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: 1s;
        }

        section:hover div {
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

开启3D空间:
正常情况下，我们是没有办法创建3D空间的，我们需要通过属性transform-style属性来开启3D空间。

transform-style: flat|preserve-3d;

当属性等于preserve-3d时，即可开启3D空间 。

例如下面的案例，在开启3D空间和不开启3D空间完全是两个效果。
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 600px;
            height: 400px;
            border: 2px solid lightcoral;
            margin: 200px auto;
            background-color: lightblue;
            /*关闭3d空间*/
            /*transform-style: preserve-3d;*/
            perspective: 400px;
            transition: 2s;
        }

        section div {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            transition: 2s;
        }
        section:hover {
            transform:rotateY(85deg);
        }
        section:hover div {
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

效果如下:

1153905-20190421174108020-52624524.png

而如果开启了3d空间，效果如下:

1153905-20190421174117743-1751509533.png

关于Z轴的操作:

在上面的案例中，我们使用了一个属性，translateZ()表示元素在Z轴上的距离。而除了translateZ以外，还有rotateZ() ，用来表示元素在Z轴上的旋转。
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 600px;
            height: 400px;
            border: 2px solid lightcoral;
            margin: 200px auto;
            background-color: lightblue;
            /*关闭3d空间*/
            transform-style: preserve-3d;
            perspective: 400px;
            transition: 5s;
        }

        section div {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            transition: 2s;
        }
        section:hover {
            transform:rotateY(85deg);
        }
        section:hover div {
            transform: translateZ(100px) rotateZ(1800deg);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

scaleZ()表示元素在Z轴上的放大比例。需要注意的是单独使用可能没有效果，需要搭配其他属性一起使用。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .stage {
            width: 300px;
            height: 300px;
            float: left;
            margin:15px;
            position: relative;
            background: url("./img/bg.jpg") repeat center center;
            perspective: 1200px;
        }

        .container {
            position: absolute;
            top:20%;
            left:50%;
            transform-style: preserve-3d;

        }

        .container img {
            position: absolute;
            margin-left:-70px;
            margin-right:-100px;
        }

        .container img:nth-child(1) {
            z-index:1;
            opacity: .6;
        }

    

        .s1 img:nth-child(2) {
            z-index: 2;
            transform: scaleZ(5) rotateX(45deg);
        }

        .s2 img:nth-child(2) {
            z-index: 2;
            transform: scaleZ(0.25) rotateX(45deg);
        }
    </style>
</head>
<body>
<div class="stage s1">
    <div class="container">
        <img src="./img/k2.png" alt="" width="140" height="200">
        <img src="./img/k2.png" alt="" width="140" height="200">
    </div>
</div>

<div class="stage s2">
    <div class="container">
        <img src="./img/k2.png" alt="" width="140" height="200">
        <img src="./img/k2.png" alt="" width="140" height="200">
    </div>
</div>

</body>
</html>

translate3d、roate3d、scale3d

1、rotate3d

rotate3d(x,y,z,a)

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

2、scale3d()

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小。

scale3d(sx,sy,sz)

sx：横向缩放比例；
sy：纵向缩放比例；
sz：Z轴缩放比例；

注：scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid lightseagreen;
            perspective: 300px;
            transform-style: preserve-3d;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: lime;
            transition: 8s;
        }
        section:hover div {
            transform:rotateX(720deg) scale3d(1.2,2.1,3);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

3、translate3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .stage {
            width: 300px;
            height: 300px;
            float: left;
            margin:15px;
            position: relative;
            background: url("./img/bg.jpg") repeat center center;
            perspective: 1200px;
        }

        .container {
            position: absolute;
            top:20%;
            left:50%;
            transform-style: preserve-3d;

        }

        .container img {
            position: absolute;
            margin-left:-70px;
            margin-right:-100px;
        }

        .container img:nth-child(1) {
            z-index:1;
            opacity: .6;
        }

        .s1 img:nth-child(2) {
            z-index:2;
            transform:translate3d(30px,30px,200px);
        }


        .s2 img:nth-child(2) {
            z-index: 2;
            transform: translate3d(30px,30px,-200px);
        }



    </style>
</head>
<body>
<div class="stage s1">
    <div class="container">
        <img src="./img/k2.png" alt="" width="70" height="100">
        <img src="./img/k2.png" alt="" width="70" height="100">
    </div>
</div>

<div class="stage s2">
    <div class="container">
        <img src="./img/k2.png" alt="" width="70" height="100">
        <img src="./img/k2.png" alt="" width="70" height="100">
    </div>
</div>


</body>
</html>

正方体:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>正方体</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        ul,li{list-style: none;}
        ul {
            width: 200px;
            height: 200px;
            margin:100px auto;
            position: relative;
            transition: 6s;
            transform-style: preserve-3d;
        }
        ul li {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            color:white;
            font-size:40px;
            position: absolute;
        }
        ul li:nth-child(1) {
            transform:rotateX(0deg) translateZ(100px);
            background: rgba(255,0,0,.6);
        }
        ul li:nth-child(2) {
            transform:rotateX(-90deg) translateZ(100px);
            background: rgba(0,255,0,.6);
        }
        ul li:nth-child(3) {
            transform:rotateX(-180deg) translateZ(100px);
            background: rgba(0,0,255,.6);
        }
        ul li:nth-child(4) {
            transform:rotateX(-270deg) translateZ(100px);
            background: rgba(0,255,255,.6);
        }
        ul li:nth-child(5) {
            transform:rotateY(90deg) translateZ(100px);
            background: rgba(255,0,255,.6);
        }
        ul li:nth-child(6) {
            transform:rotateY(-90deg) translateZ(100px);
            background: rgba(23,0,23,.6);
        }
        ul:hover {
            transform: rotateX(360deg) rotateY(360deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个盒子</li>
        <li>第二个盒子</li>
        <li>第三个盒子</li>
        <li>第四个盒子</li>
        <li>第五个盒子</li>
        <li>第六个盒子</li>
    </ul>
</body>
</html>

CSS3 动画

通过animation动画属性，css可以实现非常实用的动画效果。

相关属性:

Animation是一个简写属性，包含以下内容：
1、Animation-name    调用关键帧
2、Animation-duration   设置完成时间
3、Animation-timing-function   动画的速度曲线
4、Animation –delay          延迟
5、Animation-iteration-count   动画应该播放的次数
    N  设置播放次数    infinite   无限次播放  
6、Animation-direction       规定是否该轮流反向播放动画
    Normal   alternate   动画应该轮流反向播放
7、Animation-play-state      暂停/运行
  Paused  暂停
  Running  运行
8、Animation-fill-mode   规定动画在播放之前或者之后，其动画效果是否可见
  None  不改变默认
  Forwards  当动画完成后保持最后一个属性值
  Backwards  在Animation –delay指定的一段时间之内，在动画显示之前，应用开始属性值。
  Both  向前和向后填充模式都被应用。

简写语法:

Animation: name duration timing-function delay iteration -count direction

关键帧:

@keyframes name {
    0% {code ...}
    10% {code ...}
    20% {code ...}
}

也可以通过from和to来设置:
@keyframes name {
    from {}
    to {}
}

心跳:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Red Heart</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background: #ffa5a5;
            background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);
        }

        .chest {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }

        .heart {
            position: absolute;
            z-index: 2;
            background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
            animation: beat 0.7s ease 0s infinite normal;
        }

        .heart.center {
            background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
        }

        .heart.top {
            z-index: 3;
        }

        .side {
            top: 100px;
            width: 220px;
            height: 220px;
            border-radius: 220px;
        }

        .center {
            width: 210px;
            height: 210px;
            bottom: 100px;
            left: 145px;
            font-size: 0;
            text-indent: -9999px;
        }

        .left {
            left: 62px;
        }

        .right {
            right: 62px;
        }


        @keyframes beat {
            0% {
                transform: scale(1) rotate(225deg);
                box-shadow:0 0 40px #d5093c;
            }

            50% {
                transform: scale(1.1) rotate(225deg);
                box-shadow:0 0 70px #d5093c;
            }

            100% {
                transform: scale(1) rotate(225deg);
                box-shadow:0 0 40px #d5093c;
            }
        }
    </style>
</head>
<body>
    <div class="chest">
        <div class="heart left side top"></div>
        <div class="heart center">&hearts;</div>
        <div class="heart right side"></div>
    </div>
</body>
</html>

animate 动画库

通过animate动画库可以实现一些动画效果。

网址:https://daneden.github.io/animate.css/

使用方法:

在代码中引入animate.css，并且将相应的类名设置给不同的元素。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>执行</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        .box {
            width: 500px;
            margin:200px auto;
        }
    </style>
</head>
<body>

    <div class="animated jello box">
        昨天我碰到一个帅哥，长相惊人，貌比潘安，凭颜值可以征服全世界的那种
        <br>，我们两个默默对视了很长时间，终于，我离开了他的视线，放下了镜子。
    </div>

</body>
</html>

可以通过下面的代码来查看不同的效果：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        * {
            margin:0;
            padding:0;
        }
        .box {
            width: 400px;
            height: 400px;
            border:1px solid lightcyan;
            background-color: lightblue;
            margin:120px auto;
            font-size: 50px;
            line-height: 400px;
            text-align: center;
        }
        p  {
            width: 440px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 500px;
            font-size:30px;
        }
        label {
            display: block;
        }
        input {
            width: 98%;
            height: 50px;
            font-size:30px;
        }
        button {
            width: 200px;
            height: 50px;
            font-weight: bold;
            position: fixed;
            bottom:120px;
            left: 620px;
        }
    </style>
</head>
<body>


    <div class="box">
        <div class="animated test">hello,world!</div>
    </div>

    <p>
        <label for="list">
            请输入动画效果名称:
        </label>

        <input type="text" placeholder="动画名称" id="list" >

    </p>
    <button onclick="fn1()">执行动画</button>
</body>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
    let fn1 = ()=> {
        let oInput = $('#list').val();
        $(".test").addClass(oInput).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){
            $('.test').removeClass(oInput);
        });
    }
</script>
</html>

转载于:https://www.cnblogs.com/liujunhang/p/10745993.html

aevmb80648
关注
CSS从入门到精通
cgblpx的博客
06-01 2万+
CSS技术 什么是CSS CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。 主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。 CSS的用法 需求::将单元格内文字居中显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css的使用</title>
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 2449
，HTML5和CSS3核心知识
H5移动端事件详细介绍
caicai16的博客
06-28 1562
1、PC端与移动端H5事件对比 1）PC端事件： onclick鼠标点击触发 onmousedown鼠标按下触发 onmousemove鼠标移动触发 onmouseup鼠标抬起触发 代码块： // PC端的拖拽事件 let Obox=document.querySelector("#box"); //按下事件 Obox.onmousedown=function(e){ console.log(e); consol
CSS3(入门)
热爱编程、热爱生活、热爱探索
02-19 8804
目录一、CSS3基本概念和作用 一、CSS3基本概念和作用 Html5是网页的结构，css3是网页的表现（美化），javaScript是网页的交互。 菜鸟教程（学习的工具网站） 概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，3是版本号。CSS于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 作用：美化网页（字体
CSS3入门基础（详解）
qq_44709805的博客
10-03 3474
CSS3入门基础详解 一、基本概念 css:层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素 样式是为了解决内容与表现分离的问题 多个样式定义可层叠为一 样式通常存储在css文件中 css3是最新上午css标准 二、样式定义形式 内联样式：嵌在元素的style属性中定义（局部） 内部样式：在<style>标签中定义（页面级） 外部样式：在css文件中定义（可被多个页面调用） 1. 内联样式 margin-left:20px，元素的左外边距 注：不要在
《CSS基础入门篇》
m0_66451927的博客
01-26 3184
一、CSS概念 CSS：是Cascading Style Sheets的英文缩写，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（如文字的字体、大小、对齐方式等）、图片的外形（如宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 二、CSS样式规则 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS基础（新手入门教程）
m0_61225117的博客
10-26 3635
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 4216
CSS基础入门，详细总结
零基础HTML+CSS到入门
weixin_51356295的博客
07-10 2658
付款方式支付宝微信银行卡
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
html5+css3从入门到精通
07-03
本教程"html5+css3从入门到精通"针对前端新手，旨在帮助初学者快速掌握这两项核心技术。 HTML5（超文本标记语言第五版）是网页内容结构的标准，它引入了许多新的元素和属性，以更好地表达内容的语义。例如，`...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1132
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 233
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 126
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 224
遍历echarst多个图表，并添加独立的缩放函数
基于SpringBoot+Vue的快递物流信息查询系统设计与实现【前后端分离】
最新发布
m0_67428300的博客
11-02 767
随着电子商务的快速发展，快递物流系统的重要性愈发突出。针对用户对快递信息的实时查询需求，本系统结合Spring Boot和Vue技术，设计并实现了一个高效、易用的快递物流信息查询系统。系统实现了用户信息管理、订单查询、物流跟踪等功能，用户可通过简单操作即可查询快递状态，实现信息的实时展示。本快递物流信息查询系统基于Spring Boot与Vue的开发，前后端分离架构提升了系统的扩展性和开发效率。
HTML5与CSS3基础教程入门指南
"HTML5与CSS3基础教程（第8版）" HTML5和CSS3是现代网页设计的核心技术，它们的结合使得网页开发者能够构建功能丰富、视觉效果出色的网站。HTML5是超文本标记语言（HTML）的最新版本，引入了许多新的元素和功能，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值