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

css3过渡与动画

2024-02-05 70
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
派大鑫的工作室
|
3月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
83 2
疯狂的猿
|
3天前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
疯狂的猿
38 22
疯狂的猿
|
2月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
疯狂的猿
60 31
光明顶阳顶天
|
3月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
121 58
疯狂的猿
|
1月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
43 6
众所周知
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
72 7
疯狂的猿
|
2月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码，具有真实的视觉感，同时文字还会在旋转过程中显示出灯光的反射效果，很有意思，欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
35 6
john散漫
|
2月前
|
移动开发 前端开发 JavaScript
除了 CSS3，还有哪些技术可以实现动画效果？
除了 CSS3，还有哪些技术可以实现动画效果？
john散漫
74 5
疯狂的猿
|
2月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
疯狂的猿
26 2
疯狂的猿
|
2月前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总，一共包含126种加载动画效果，不同样式不同图案，简单实用，一览包含所有，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，欢迎下载试试！代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效插件，希望大家喜欢！
疯狂的猿
31 2

热门文章

最新文章

  • 1
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 2
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 3
    jQuery和CSS3滑动展开菜单按钮插件
  • 4
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 5
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 6
    页面滚动触发css3动画js插件
  • 7
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 8
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 9
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 10
    在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
  • 1
    css结构伪类
    68
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    62
  • 4
    HTML5/CSS3粒子效果进度条代码
    80
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    149
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    66
  • 7
    CSS外边距重叠：原理、结果
    58
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    69
  • 9
    CSS常见用法 以及JS基础语法
    72
  • 10
    css设置内嵌样式阴影
    80

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 渐进式动画解决方案
  • 渐进式动画解决方案

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅