CSS3特效和动画

底层小码农

2024-04-05 帮助1人

CSS3的动画和特效可以帮助我们完成一些简单的动画效果，比如一些动态的插图或者是网页的轮播图，虽然没有JS那么容易修改，但是也是非常好用的，先介绍一些属性，然后咱们做一个轮播图的案例。

渐变 gradient

渐变分为线性渐变和径向渐变，这个可以做一个简单的彩虹。
线性渐变：background-image:linear-gradient(方向（deg）,颜色，渐变百分比)
径向渐变：background-image:radial-gradient（中心点，形状，颜色，渐变点百分比）形状有circle ellipse。

这里给大家强调一下，如果我们想要添加方向，需要我们添加一下浏览器内核。-webkit-/-moz-/-ms-/-o-

过渡 transition

过渡元素就不一个一个地展示了这里给大家看下简写状态的，也好用好记。
transition：all（这个里面写属性名称，比如我们想要文字的颜色随之变化，那么写上color即可）执行时间延迟时间速度曲线（linear 直线）

倒影 box-reflect

这个我们只需要知道几个属性， none默认没有倒影， below 倒影在下面，above倒影在上面，left，right 左右倒影。

变形transform

我们做3D效果就需要我们在这里添加 transform-style：preserve-3d。
我们可以做平移 translate（x，y，z）单位为px （eg：translateX：20px），旋转rotate 单位为deg。伸缩scale（数值），拉伸skew（x y）。

介绍完这些知识点我们再来看一下动画

动画animation

我们在使用动画的时候可以增加用户的体验，但是不建议大家过分使用，会使得我们简洁的页面有些浮夸。
说到动画我们就要先说一个动画重要的关键帧，其实这个很好理解，我么想让一个元素动起来，就要对每一帧进行操作，这里我们CSS3为我们提供了关键帧keyframe,下面我们来看一下如何使用关键帧。

关键帧keyframe

@keyframes 名称 {
from{ }
to { }
}
这个就是我们关键帧的定义和使用，from…to…是我们的开始时间到结束时间，当然我们也可以把这一帧分为百分比，这样可以让我们的效果更见准确。
介绍完关键帧之后，我们再来看一些常用的动画的值。
animation-name 动画属性名
animation-duration 动画持续时间
animation-delay 动画延迟时间
animation-timing-function 动画速度曲线（linear）
animation-iteration-count 定义循环次数（infinite）
还有一些不常用的值就不在这里一个一个地展示了。我们来展示一个案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        @keyframes move {
            0% {
                left: 0
            }
            24% {
                left: 0px;
            }
            26% {
                left: -400px;
            }
            49% {
                left: -400px;
            }
            51% {
                left: -800px;
            }
            74% {
                left: -800px;
            }
            76% {
                left: -1200px;
            }
            98% {
                left: -1200px;
            }
            100% {
                left: -1600px;
            }
        }
        
        @keyframes dot {
            0% {
                opacity: 1;
            }
            24% {
                opacity: 1;
            }
            25% {
                opacity: .7;
            }
            100% {
                opacity: .7;
            }
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrap {
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }
        
        .wrap .move {
            width: 2000px;
            height: 300px;
            position: absolute;
            animation: move 8s linear infinite;
        }
        
        .wrap .move img {
            width: 400px;
            height: 300px;
            float: left;
        }
        
        .wrap .dots {
            position: absolute;
            width: 160px;
            height: 16px;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, .75);
            bottom: 16px;
            left: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .wrap .dots .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255);
            opacity: .7;
            animation: dot 8s linear infinite;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="move">
            <img src="https://img2.百度.com/it/u=1923489130,1228565843&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=370" alt="">
            <img src="https://img2.百度.com/it/u=1059079331,3440939707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
            <img src="https://img1.百度.com/it/u=1532210407,1929948828&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" alt="">
            <img src="https://img2.百度.com/it/u=3780744601,659866392&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=267" alt="">
            <img src="https://img2.百度.com/it/u=1923489130,1228565843&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=370" alt="">
        </div>
        <div class="dots">
            <div class="dot"></div>
            <div class="dot" style="animation-delay: 2s;"></div>
            <div class="dot" style="animation-delay: 4s;"></div>
            <div class="dot" style="animation-delay: 6s;"></div>
        </div>
    </div>
</body>

</html>

这是一个简单的轮播图实现，感兴趣的同学们可以自行复制打开看下，非常的简单好用。最后给大家准备一个思维导图，大家可以看下在这里学新通

学新通

这篇好文章是转载于：学新通技术网

CSS3特效和动画

渐变 gradient

过渡 transition

倒影 box-reflect

变形transform

动画animation

关键帧keyframe

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开