CSS3+动画

浏览器内核以及其前缀

css标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确的情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所有会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近的推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟了，不用加前缀。
根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种。
（1）Gecko内核：前缀-moz。火狐浏览器。
（2）Webkit内核：前缀-webkit。chrome、safari。
（3）Trident内核：前缀-ms-。IE。
（4）Presto内核：前缀-o-。opera。

box-shadow

box-shadow:阴影1，阴影2，…
box-shadow:0px 0px 0px 0px #fff inset,0px 0px 0px 0px #fff inset;
box-shadow:水平偏移垂直偏移模糊度阴影大小颜色内侧阴影
在这里插入图片描述

变换 transform2D

transform 2D函数：translate(x,y)-移动、scale-缩放、rotate-旋转、skew-扭曲
matrix(a,b,c,d,e,f)-矩阵变换
参数a和d：控制元素的缩放。
参数b和c：控制元素的倾斜或斜切。
参数e和f：控制元素的平移。

格式：transform 函数

transform-origin：指定rotate旋转的中心点位置/scale缩放的基点/skew（默认是图形中心点）。
transform-origin:center;
transform-origin:top left;
transform-origin:50px 50px;
transform-origin:bottom right 60px;

变换 transform3D

transform 3D函数：
translate3d(x,y,z)、translateX(x)、translateY(Y)、translateZ(z)；
scale3d(x,y,z)、scaleX(x)、scaleY(Y)、scaleZ(z)；
rotate3d(x,y,z)、rotateX(x)、rotateY(Y)、rotateZ(z)；

格式：transfrom 3d函数

perspective:透视：视角距离：视角离显示屏的距离。
perspectice-origin：视角位置。

过渡 transition

格式：transition:property duration timing-function delay
transition:all 0.3s linear 1s;

缓动函数timing-function:缓动函数有三类：
（1）贝塞尔缓动函数：cubic-bezier(x1,y1,x2,y2)。下面是四个预定义的贝塞尔函数。
ease:
（2）线性缓动函数：linear(<point-list>)
在这里插入图片描述
（3）阶跃缓动函数：steps(<number-of-steps>,<direction>)

动画 animation

通过关键帧控制动画，关键帧之间的过渡效果。
animation属性

@keyframes 规定动画，用于指定关键帧。。
animation 所有动画属性的简写属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。infinite无限循环。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。alternate先执行一遍动画，然后再反向执行一遍动画。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

动画案例

小球弹跳动画

.boll{
	width:500px;
	height:500px;
	background:#29d1d1;
	border-radius:50%; animation:bounce 1s linear infinite;
} 
@keyframes bounce{
	0%{
			transform:translateY(0%);
		}
	50%{
			transform:translateY(25%);
		}
	100%{
			transform:translateY(0%);
		}
}

文字渐变动画效果

.text-animation{
	width:140px;
	height:70px;
	font-size:90px;
	font-weight:bold;
	line-height:50px;
	
	background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
	color:transparent;
	background-clip:text; 
	animation: gradient 2.5s ease infinite alternate;
	background-position:0% 100%;
	background-size:400% 400%;
}
@keyframes gradient{
		0%{
			background-position:0% 100%;
		} 
		100%{
			background-position:100% 100%;
		}
}

地图图标动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="content">
        <div class="pos">
        </div>
        <div class="pos-bottom"></div>
    </div>

</body>
<style>
    body {
        background-color: #0b3061;
        overflow: hidden;
    }

    .content {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .pos {
        width: 100px;
        height: 100px;
        background-color: #0c5db9;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);

        animation-name: bounce;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-fill-mode: both;
    }

    .pos::after {
        content: '';
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;

        position: relative;

        top: 25%;
        left: 25%;
    }

    .pos-bottom { 
        width: 50px;
        height: 50px;
        
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 50%; 
        transform: rotateX(55deg);  
        z-index: -1; 
    }

    .pos-bottom::after {
        content: '';
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: transparent; 
        border-radius: 50%;
        transform: rotateX(30deg); 
        
        position: relative;
        bottom: 50%;
        right: 50%;
        box-shadow: 0px 0px 2px 5px rgba(255, 255, 255, 0.5);
        
        animation-name: pulsate;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: 1.1s; 
        opacity: 0;
    }

    @keyframes bounce {
        0% {
            opacity: 0;
            filter: alpha(opacity=0);
            transform: translateY(-1000px) rotate(-45deg);
        }

        60% {
            opacity: 1;
            filter: none;
            transform: translateY(30px) rotate(-45deg);
        }
        100% { 
            transform: translateY(0px) rotate(-45deg);
        }
    }
    @keyframes pulsate {
        0% { 
            transform: scale(0.2);
            opacity: 0;
        } 
        50% { 
            opacity: 1;
        }
        100% {
            transform: scale(1); 
            opacity: 0;
        }
    }
</style>

</html>

背景混合动效

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="bg-1"></div>
            <div class="bg-2"></div>
            <div class="icon-box"></div>
        </div>

        <div class="card">
            <div class="bg-1"></div>
            <div class="bg-2"></div>
            <div class="icon-box"></div>
        </div>
        <div class="card">
            <div class="bg-1"></div>
            <div class="bg-2"></div>
            <div class="icon-box"></div>
        </div>
    </div>

</body>
<style>
    :root {
        --color: rgb(61, 98, 112);
        --color-bg-1: #33adff;
        --color-bg-2: #ff2af4;
    }

    body {
        background: linear-gradient(45deg, rgba(42, 199, 219, 0.973), rgba(255, 122, 151, 0.5));
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .container {
        width: 95vw;
        max-width: 600px;

        display: flex;
        flex-wrap: wrap;
        text-align: center;
        position: relative;
    }

    .card {
        flex: auto;
        min-width: calc(33% - 2vw);
    
        margin: 0 1vw calc(1vw + 50px) 1vw;

        position: relative;
        cursor: pointer;
        border: 1px solid #fff;
    }

    .card:hover .bg-1,
    .card:hover .bg-2 {
        display: block;
    }

    .card::after {
        content: '';
        float: left;
        padding-top: 100%;
    }

    .icon-box{
        position: absolute;
        width: 85%;
        height: 85%;
        border-radius: 50%;
        background-color: #fff;
        margin: 8%;
    }

    .bg-1,.bg-2{
        position: absolute;
        width: 85%;
        height: 85%;
        border-radius: 50%;   
        opacity: 1;
        mix-blend-mode: multiply;

        display: none;
    }
    .bg-1{
        background-color: var(--color-bg-1); 
        animation: move 1.8s linear infinite  ;
    }
    .bg-2{
        background-color: var(--color-bg-2);    
            animation: move 1.2s linear infinite  ;
    }

    @keyframes move {
        0%{
            top:8%;
            left:0%;
        }
        25%{
            top:0%;
            left:8%;
        }
        50%{
            top: 8%;
            left: 16%;
        }
        70%{
            top: 16%;
            left: 8%;
        } 
        100%{
            top: 8%;
            left: 0%;
        }
    } 
</style>

</html>

渐变动态边框

1、通过背景旋转rotate得到

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="box">
            <h2>CSS</h2>
        </div>
        <div class="box">
            <h2>Border</h2>
        </div>
        <div class="box">
            <h2>Animation</h2>
        </div>
    </div>
</body>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #0e1538;
    }

    .box {
        width: 300px;
        height: 400px;
        margin: 30px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, .5);

        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        color: #fff;
        box-shadow: 0 0 10px #000;
        overflow: hidden; 
        h2{
            z-index: 1;
        }
    }

    .box::before {
        content: '';
        position: absolute;
        width: 150px;
        height: 140%;
        background: linear-gradient(#00ccff,#d400d4);
        box-shadow: 0 0 20px #999;

        animation: animate 4s linear infinite; 
    }
    .box::after{
        content: '';
        position: absolute;
        inset: 4px;
        background-color: #0e1538;
        border-radius: 16px;
    }

    @keyframes animate {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style>

</html>

2、动态渐变边框：放大背景，修改背景位置可以得到图片各位置的图像。
background-size: 200% 100%;
background-position: 0 0;//看到左边部分的渐变
background-position: 100% 0;//看到右边部分的渐变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="input">
            <input class="input-inner" type="text" placeholder="Enter your name">

            </input>
        </div>
    </div>
</body>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 100%;
        height: 100vh;
        overflow: hidden;

        display: flex;
        justify-content: center;
        align-items: center;

        background-color: #000;
    }


    .input {

        position: relative;
    }

    .input::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        
        background: linear-gradient(to right, yellow, green, #00ccff, #d400d4);
        /* 横向放大2倍，可视区域只能看到两个颜色的渐变 */
        background-size: 200% 100%;
        animation: input-border 2s ease-in-out infinite;
        animation-direction: alternate-reverse;
    }
    .input-inner {
        position: relative;
        display: inline-block;
        margin: 10px;

        width: 400px;
        height: 50px;
        z-index: 1;
    }

    @keyframes input-border {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 100% 0;
        }
    }
</style>

</html>

文本变形动画

文本变形：filter contrast() blur()
animation-delay 负数提前执行：动画提前执行，重叠在页面上的元素希望他们一次出现，可以设置提前执行。这样在元素还没有显示在页面上时就开始执行动画。
元素居中：

 left: 50%;
 top: 50%;//相对父元素的偏移
 transform: translate(-50%, -50%);//相对自身往反方向偏移一半就居住中了

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="morphing">
        <div class="word">
            word
        </div>
        <div class="word">
            morphing
        </div>
        <div class="word">
            with
        </div>
        <div class="word">
            pure
        </div>
        <div class="word">
            CSS
        </div>
        <div class="word">
            is
        </div>
        <div class="word">
            greet!!
        </div>
    </div>
</body>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    .morphing {
        width: 100%;
        height: 100vh; 

        background:  #000;
        color: #fff;
        position: relative;

        /*  contrast(25) 和 动画中的 blur 配合使用，可以达到 圆角的效果 */
        filter: contrast(25) blur(1px);
    }

    .word {
        font-size: 120px;
        position: absolute;
        /*居中*/
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        animation: word 16s ease-in-out infinite; 
        /* 可以设置为0，让延迟为正数 */
        /*
        opacity: 0;
        animation: word 14s ease infinite; 
        */
    }
    
    /* animation-delay 负数 提前执行 */
     .word:nth-child(1)  {
        animation-delay: -16s;
    }
    .word:nth-child(2) {
        animation-delay: -14s;
    } .word:nth-child(3) {
        animation-delay: -12s;
    } .word:nth-child(4) {
        animation-delay: -10s;
    } .word:nth-child(5) {
        animation-delay: -8s;
    } .word:nth-child(6) {
        animation-delay: -6s;
    }.word:nth-child(7) {
        animation-delay: -4s;
    }  

    /* .word:nth-child(1)  {
        animation-delay: 1s;
    }
    .word:nth-child(2) {
        animation-delay: 3s;
    } .word:nth-child(3) {
        animation-delay: 5s;
    } .word:nth-child(4) {
        animation-delay: 7s;
    } .word:nth-child(5) {
        animation-delay: 9s;
    } .word:nth-child(6) {
        animation-delay: 11s;
    }.word:nth-child(7) {
        animation-delay: 13s;
    }   */

    @keyframes word {
        0%,5%,100% {
            opacity: 1;
            filter: blur(0px);
        }
        20%,80% {
            opacity: 0;
            filter: blur(1em);
        }
    }
</style>

</html>

平面移动动画

transform: translateX：从屏幕左边移到右边
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="plane plane-1">
            <i></i>
        </div>

        <div class="plane plane-2">
            <i></i>
        </div>
    </div>
</body>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    .container {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .container::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(360deg, #b7bca4 26.23%, #3d94b2 87.3%);
        top: 0;
        left: 0;
        opacity: 0.4;
    }

    .plane {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 1;
        transform: rotate(-10deg);
    }

    .plane i {
        background-image: url("./plane.png");
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain;
        position: absolute;
        right: 0;
        transition: all 0.4s ease-out; 
        animation: motion linear infinite;  
    }

    .plane-1 {
        top: 90px;
    }

    .plane-1 i {
        width: 1171px;
        height: 67px;
        animation-duration: 50s;
        animation-delay: -10s;
    }

    .plane-2 {
        top: 200px;
    }
    .plane-2 i {
        width: 500px;
        height: 47px;
        animation-duration: 60s;
        animation-delay: -5s;
    }

    @keyframes motion{
        0%{
            opacity: 1;
            transform: translateX(-120vw);
        }
        
        100%{
            /* opacity: 0; */
            transform: translateX(0);
        }
        /* 97%{ 
            opacity: 1;
        }

        98%{ 
            opacity: 0;
        } */

        /* 100%{ 
            opacity: 0;
            transform: translateX(calc(0% + 100px));
        } */
    }
</style>

</html>

鼠标光标动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="box box-1">
            Sphere
        </div>
        <div class="box box-2">
            Circle Outline
        </div>
        <div class="box box-3">
            Circle Pin
        </div>
        <div class="box box-4">
            Circle Color Gradient
        </div>

        <div id="circle"></div>
    </div>
</body>
<script>
    let circle = document.getElementById("circle");
    const circleStyle = circle.style;

    document.addEventListener("mousemove", (e) => {
        window.requestAnimationFrame(() => {
            circleStyle.left = `${e.clientX - circle.offsetWidth / 2}px`;
            circleStyle.top = `${e.clientY - circle.offsetHeight / 2}px`; 
        })  
    })

</script>
<style>
    body {
        padding: 0;
        margin: 0;
        cursor: none;
    }

    .container {
        width: 100%;
        height: 100vh;
        padding: 100px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;

        background-color: #359095;
    }

    #circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
        pointer-events: none;

        position: absolute;

        transition: background ease-in 10ms ,box-shadow ease-in 150ms,transform ease-in 150ms;
        transform: translate3d(0,0,0);
    }

    .box {
        width: 70%;
        height: 25%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-1 {
        background-color: #e8edf3; 
    }
    .box-1:hover ~ #circle{
        background-color: #e6cf8b;
        box-shadow: 0 0 0 0 transparent,inset 0em -0.3em 0.4em 0.2em #ca9e03a6;
    }

    .box-2 {
        background-color: #e6cf8b;
    }
    .box-2:hover ~ #circle{
        background-color: transparent;
        border: 3px solid #b56969; 
    }

    .box-3 {
        background-color: #b56969;
    }
    .box-3:hover ~ #circle{
        background-color: pink; 
        transform: scale(0.5);
    }

    .box-4 {
        background-color: #1d1f31;
        color: #fff;
    }
    .box-4:hover ~ #circle{
        background-image: linear-gradient(to top, #fbc2eb, #a6c1ee); 
    }
</style>

</html>