CSS3基础入门03

时间  2019-11-20
标签 css3 css 基础 入门 栏目 CSS 繁體版
原文   原文链接

目录css

CSS3 基础入门03

线性渐变

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

语法：jquery

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

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

<!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简写属性来设置渐变。git

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

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

<!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，表示线性渐变从右到左。ide

固然咱们也能够直接设置为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>

造成效果以下：

下面是倾斜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>

基点的改变对于元素变幻的影响：
经过transform-origin能够更改元素的基点，元素的基点一旦发生更改以后，就会产生不同的效果。

例如，旋转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效果。

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

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

<!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>

效果以下:

而若是开启了3d空间，效果以下:

关于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

一、rotate3d

rotate3d(x,y,z,a)

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

二、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>

三、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是一个简写属性，包含如下内容：
一、Animation-name    调用关键帧
二、Animation-duration   设置完成时间
三、Animation-timing-function   动画的速度曲线
四、Animation –delay          延迟
五、Animation-iteration-count   动画应该播放的次数
    N  设置播放次数    infinite   无限次播放  
六、Animation-direction       规定是否该轮流反向播放动画
    Normal   alternate   动画应该轮流反向播放
七、Animation-play-state      暂停/运行
  Paused  暂停
  Running  运行
八、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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程