AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css3过渡与动画

2024-02-05 61
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： css3过渡与动画


前言

在数字时代，网页不再是静态的画面，而是充满活力和动感的空间。CSS3的过渡与动画技术就像是一场魔法表演，能够赋予网页以生命。本文将引领你进入这个奇妙的世界，解锁CSS3过渡与动画的神奇效果。

过渡

过渡的基本使用 transition

transition过渡属性时css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”

兼容性

过渡从IE10开始兼容，移动端兼容良好

曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用css3过渡

优点：动画更细腻，内存开销小

transition属性基本使用

注意，这里的1s、0s里的s不能省略

哪些属性可以参与过渡

  • 所有数值类型的属性，都可以参与过渡，比如width.height、left、top、border-radius
  • 背景颜色和文字颜色都可以被过渡
  • 所有变形（包括2D和3D）都能被过渡

all

如果要所有属性都参与过渡，可以写all

transition:all 1s linear 0s;

注意：不要滥用，会引发效益问题

过渡的四个小属性

过渡的缓动效果

transition 的第三个参数就是缓动参数，也是变化速度曲线

常用缓动参数

贝塞尔曲线

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

transition:width 1s cubic-bezier(.44,-0.62,.62,1.59) 0s;

过渡效果实战

过渡效果实战_当鼠标移到图片上显示标题

<!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>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul li {
        list-style: none;
    }
    img {
        vertical-align: middle;
    }
    .box {
        margin: 100px auto;
        width: 500px;
    }
    .box ul {
        display: flex;
    }
    .box ul li {
        position: relative;
        margin-right: 20px;
    }
    .box ul li img {
        width: 200px;
    }
    .box ul li .info {
        position: absolute;
        bottom: 0;
        text-indent: 1em;
        left: 0;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, .7);
        color: #fff;
        opacity: 0;
        transition: opacity .5s linear 0s;
    }
    .box ul li:hover .info {
        opacity: 1;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li><img src="images/01.webp" alt="">
                <div class="info">美景标题</div>
            </li>
            <li><img src="images/02.webp" alt="">
                <div class="info">美景标题</div>
            </li>
        </ul>
    </div>
</body>
</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>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul li {
        list-style: none;
    }
    .box {
        margin: 100px auto;
        width: 600px;
    }
    .box ul {
        display: flex;
    }
    .box ul li::before {
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1;
        transform: rotate(0);
        transition: transform 1s linear 0s;
    }
    .box ul li:nth-child(1)::before {
        background: url(images/a_1.png) no-repeat center;
    }
    .box ul li:nth-child(2)::before {
        background: url(images/a_2.png) no-repeat center;
    }
    .box ul li:nth-child(3)::before {
        background: url(images/a_3.png) no-repeat center;
    }
    .box ul li:nth-child(4)::before {
        background: url(images/a_4.png) no-repeat center;
    }
    .box ul li {
        width: 107px;
        height: 107px;
        position: relative;
        text-align: center;
        margin-right: 20px;
    }
    .box ul li img {
        width: 50px;
        position: relative;
        z-index: 2;
        margin-top: 30px;
        transform: scale(1);
        transition: transform .5s ease 0s;
    }
    /* 背景圆环旋转一周 */
    .box ul li:hover::before {
        transform: rotate(360deg);
    }
    /* 中心图标放大1.2倍 */
    .box ul li:hover img {
        transform: scale(1.2);
    }
</style>
<body>
    <div class="box">
        <ul>
            <li><img src="images/icon1.svg" alt=""></li>
            <li><img src="images/icon2.svg" alt=""></li>
            <li><img src="images/icon3.svg" alt=""></li>
            <li><img src="images/icon4.svg" alt=""></li>
        </ul>
    </div>
</body>
</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>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        position: relative;
        width: 500px;
        margin: 50px auto;
        perspective: 1000px;
    }
    .box img {
        border: 1px solid #000;
        width: 120px;
        border-radius: 100px;
    }
    .dog {
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
        transform: rotate(0);
        transition: transform 2s ease 0s;
    }
    .box:hover .dog {
        cursor: pointer;
        transform: rotateY(-180deg);
    }
    .n1 .dog {
        transform-origin: 100% 100%;
    }
    .n1:hover .dog {
        transform: rotateY(180deg);
    }
    .n2 .dog {
        transform-origin: 0 0;
    }
    .n2:hover .dog {
        transform: rotateX(-180deg);
    }
</style>
<body>
    <div class="box">
        <img class="cat" src="images/cat.jpg" alt="">
        <img class="dog" src="images/dog.jpg" alt="">
    </div>
    <div class="box n1">
        <img class="cat" src="images/cat.jpg" alt="">
        <img class="dog" src="images/dog.jpg" alt="">
    </div>
    <div class="box n2">
        <img class="cat" src="images/cat.jpg" alt="">
        <img class="dog" src="images/dog.jpg" alt="">
    </div>
</body>
</html>

旋转的正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1, user-scalable=no, maximum-scale=1,minimum-scale=1">
    <!-- width=device-width, initial-scale=1.0 页面的宽度应该等于设备的宽度，并且初始缩放级别为 1.0。这有助于确保在移动设备上以正常大小呈现页面，而不是被过度缩放。 -->
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        section {
            width: 202px;
            height: 202px;
            margin: 200px auto;
            perspective: 10000px;
        }
        .box1 {
            width: 202px;
            height: 202px;
            perspective: 10000px;
            position: relative;
            /* 设置变形类型，保留它内部的3D效果 */
            /* 这个box盒子又是舞台，又是演员，这个box整体带着里面的p旋转 */
            transform-style: preserve-3d;
            transition: all 10s ease 0s;
        }
        section:hover .box1 {
            transform: rotateX(360deg) rotateY(360deg);
        }
        p {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box1 p:nth-child(1) {
            background: rgb(62 255 244 / 73%);
            /* 前面 */
            transform: translateZ(100px)
        }
        .box1 p:nth-child(2) {
            background: rgba(242, 255, 62, 0.959);
            /* 顶面 */
            transform: rotateX(90deg) translateZ(100px)
        }
        .box1 p:nth-child(3) {
            background: rgba(65, 62, 255, 0.73);
            /* 背面 */
            transform: rotateX(180deg) translateZ(100px)
        }
        .box1 p:nth-child(4) {
            background: rgba(62, 255, 120, 0.73);
            /* 底面 */
            transform: rotateX(-90deg) translateZ(100px)
        }
        .box1 p:nth-child(5) {
            background: rgb(255, 122, 34);
            /* 侧面 */
            transform: rotateY(90deg) translateZ(100px)
        }
        .box1 p:nth-child(6) {
            background: rgba(255, 62, 72, 0.73);
            /* 侧面 */
            transform: rotateY(-90deg) translateZ(100px)
        }
    </style>
</head>
<body>
    <section>
        <div class="box1">
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
        </div>
    </section>
</body>
</html>

动画

动画的定义和调用

可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

定义动画之后，就可以使用animation属性调用动画

动画的执行次数

第五个参数就是动画的执行次数

animation:r 1s linear 0s 3;  //3表示次数

如果想永远执行可以写infinite

animation:r 1s linear 0s infinite;  //表示一直执行动画

如果想让动画的第2、4、6……偶数次自动逆向执行，那么要加上alternate参数即可

animation:r 1s linear 0s infinite alternate;

如果想让动画停止在最后结束状态，那么要加上forwards

animation:r 1s linear 0s forwards;

动画效果实战

<!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>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: orange;
        animation: r 3s linear 0s infinite;
    }
    .box1 {
        width: 200px;
        height: 200px;
        background-color: blue;
        animation: move 1s linear 0s infinite alternate;
        margin-bottom: 20px;
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
        animation: radius 1s linear 0s forwards;
        margin-bottom: 20px;
    }
    @keyframes r {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes move {
        from {
            transform: translateX(0)
        }
        to {
            transform: translateX(300px)
        }
    }
    @keyframes radius {
        from {
            border-radius: 0;
        }
        to {
            border-radius: 100px;
        }
    }
</style>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</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>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        position: relative;
        margin: 100px;
        text-align: center;
        width: 200px;
        height: 200px;
    }
    .faguang {
        position: absolute;
        left: -70px;
        top: -60px;
        animation: faguang .5s linear 0s infinite alternate;
    }
    @keyframes faguang {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>
<body>
    <div class="box">
        <img class="depao" src="images/dengpao.png" alt="">
        <img class="faguang" src="images/guang.png" alt="">
    </div>
</body>
</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>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .hj {
        position: absolute;
        left: 400px;
        top: 400px;
        animation: fly .3s ease-in 0s infinite alternate;
    }
    .line {
        position: absolute;
        width: 1px;
        height: 150px;
        background: #f00;
        left: 400px;
        top: 400px;
        animation: linefly 1s linear 0s infinite;
        opacity: 0;
        transform: rotate(45deg)
    }
    .line1 {
        position: absolute;
        width: 1px;
        height: 150px;
        background: #f00;
        left: 500px;
        top: 400px;
        animation: linefly 1s linear .4s infinite;
        opacity: 0;
        transform: rotate(45deg)
    }
    .line2 {
        position: absolute;
        width: 1px;
        height: 200px;
        background: #f00;
        left: 600px;
        top: 400px;
        animation: linefly 1s linear .8s infinite;
        opacity: 0;
        transform: rotate(45deg)
    }
    .line3 {
        position: absolute;
        width: 1px;
        height: 100px;
        background: #f00;
        left: 700px;
        top: 300px;
        animation: linefly 1s linear .8s infinite;
        opacity: 0;
        transform: rotate(45deg)
    }
    @keyframes linefly {
        0% {
            opacity: 0;
            transform: rotate(45deg) translateY(-300px);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: rotate(45deg) translateY(300px);
        }
    }
    @keyframes fly {
        from {
            transform: translateX(20px) translateY(20px);
        }
        to {
            transform: translateX(-20px) translateY(-20px);
        }
    }
</style>
<body>
    <div class="hj"><img src="images/huojian.png" alt=""></div>
    <div class="line"></div>
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
</body>
</html>

结语

通过深入学习CSS3的过渡与动画技术，你将能够为网页设计注入更多创意和动感。这不仅是技术的提升，更是对设计艺术的追求。让我们一同在动感的舞台上展示创意，用过渡与动画让网页焕发生机。

文章标签：
JavaScript
前端开发
关键词：
CSS动画
TechWJ
目录
相关文章
派大鑫的工作室
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
66 2
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
73 2
光明顶阳顶天
|
25天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
100 58
CamilleKing
|
3天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
CamilleKing
10 1
chnjames
|
29天前
|
前端开发 JavaScript API
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能，展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力，实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API，并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例，展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后，还演示了如何将这种 3D 翻卡效果集成到公司网站中，提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性，推动了前端开发迈向新的高度。
chnjames
26 0
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
六卿
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
45 0
JS配合CSS3实现动画和拖动小星星小Demo
Li370234940
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
Li370234940
27 0
蓝易云
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
蓝易云
76 5
游客fz577umxdejsg
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
游客fz577umxdejsg
203 2
游客fz577umxdejsg
|
3月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
游客fz577umxdejsg
55 2