AI 助理
备案控制台
开发者社区 云计算 文章 正文

CSS3动画(案例为主)

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

中文文档 | anime.js

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。


您可以改变任意多的样式任意多的次数。


请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。


0% 是动画的开始，100% 是动画的完成。


为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

下面的表格列出了 @keyframes 规则和所有动画属性：

image.png

案例 一 动画加二D打印

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <style>
       div {
           overflow: hidden;
           border: solid 2px red;
           font-weight: bolder;
           width: 200px;
           height: 200px;
           float: left;
           margin: 10px;
           background-color: #FF99CC;
           /*2D转动的角度*/
           transform: rotate(125deg);
           /*2D转动的时间*/
           transition: all 5s;
           /*动画名称*/
           animation-name: k;
           animation-duration: 15s;
           /*动画运行运动曲线*/
         /*  animation-timing-function: ease;
           animation-timing-function: ease-in-out;*/
           animation-timing-function: ease-out;
           /*动画播放次数*/
           animation-iteration-count: 5;
           /*动画是否反向*/
         /*  animation-direction: alternate;*/
           animation-direction: alternate-reverse;
           /*动画初始*/
          /* animation-fill-mode: backwards;
           animation-fill-mode: forwards;*/
           animation-fill-mode: both;
       }
       /*当鼠标经过*/
       div:hover{
           /* 当鼠标经过是色彩为green*转动-200度*/
           overflow: hidden;
           transform-origin: 100px 100px;
           background-color: green;
           transform: rotate(-200deg);
           /*缩放的位置*/
           transform: scale(3,2);
       }
       div:before {
           display: block;
           content: '增加的内容divbefore';
           height: 200px;
           width: 200px;
           background-color: yellow;
           /*设置原点*/
           transform-origin: left bottom;
           transform: rotate(60deg);
           transition: all 5s;
       }
       div:hover::before{
           overflow:hidden ;
           /* 当鼠标经过是色彩为green*转动-200度*/
           overflow: hidden;
           transform-origin: 100px 100px;
           background-color: red;
           transform: rotate(-180deg);
           /*缩放的位置*/
           transform: scale(3,2);
       }
       /*动画的效果图*/
       @keyframes k {
           15% {
               transform: translate(1000px, 0);
               background: lavender;
               font-size: 20px;
               height: 200px;
           }
           45% {
               transform: translate(1000px, 0);
               height: 300px;
               background: lavender;
               font-size: 50px;
           }
           55% {
               transform: translate(1000px, 500px);
               width: 200px;
               background: royalblue;
               height: 200px;
           }
           65% {
               transform: translate(0px, 500px);
               height: 200px;
               background: peachpuff;
               font-size: 200px;
           }
           75% {
               transform: translate(0px, 500px);
               height: 200px;
               background: yellow;
               font-size: 20px;
           }
           85% {
               transform: translate(0px, 500px);
               height: 200px;
               background: palevioletred;
               font-size: 20px;
           }
           95% {
               transform: translate(0px, 500px);
               height: 200px;
               background: pink;
               font-size: 20px;
           }
           100% {
               transform: translate(0px, 0px);
           }
       }
   </style>
    <title>动画加二D</title>
</head>
<body>
<div>
    </div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

案例二 图片的来回运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画来回循环</title>
    <style>
        .pics{
            position: relative;
            width: 400px;
            height: 400px;
      background-size: 100%;
        }
        .pic1{
            width: 400px;
            height: 400px;
            animation: picDraw 10s ease-in-out infinite;
        }
        .pic3{
            position: absolute;
            width: 400px;
            height: 400px;
            left: 0;
            top: 0;
           animation: picDraw 15s ease-in-out infinite;
        }
    .pic2{
        position: absolute;
        left: 0;
        top: 0;
        animation: picDraw 15s ease-in infinite;
    }
        @keyframes picDraw {
            0%{
                opacity: 0;
                transform: scale(0.5);
            }
            25%{
                opacity: 1;
                transform: scale(0.7);
            }
            50%{
                opacity: 0;
                transform: scale(0.8);
            }
            0%{
                opacity: 0;
                transform: scale(1.2);
            }
        }
    </style>
</head>
<body>
<div class="pics">
    <img src="like/a%20(5).jpg" alt="" class="pic1">
      <img src="like/a (2).jpg" alt="" class="pic2">
    <img src="like/a%20(7).jpg" alt="" class="pic3">
</div>
</body>
</html>

案例三 动画的放大缩小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--定义动画-->
    <style type="text/css">
        @keyframes a {
           0%{
               transform: scale(1);
               border: 2px solid red;
           }
            30%{
                transform: scale(0.5);
                border-radius: 12px;
                border: 4px solid red;
            }
            60%{
                transform: scale(1.7);
                border: 8px solid red;
            }
            100%{
                transform: scale(1.5);
                border: 16px solid red;
            }
        }
        div{
            width: 100px;
            height: 100px;
            border: rgb(110, 219, 255)  solid 1px;
            margin: auto;
            margin-top: 200px;
            background: url("like/a (4).jpg");
            animation-name: a;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 10;
            animation-duration: 10s;
        }
    </style>
    <title>动画的放大与缩小</title>
</head>
<body>
<div>图片的放大缩小</div>
<hr>
</body>
</html>

 

 

案例三 动画打字机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        * {
            background-image: linear-gradient(0deg, white, rgb(231, 198, 198));
            font-size: 20px;
            text-shadow: 1px 1px 1px pink;
            font-weight: bolder;
            border: lavender 1px;
        }
        div {
            font-size: 43px;
            width: 0px;
            height: 200px;
            line-height: 100px;
            color: black;
            font-weight: bold;
            background-color: #CCFFFF;
            /*定义字体的步数*/
            animation: move 15s steps(30)forwards;
        }
        @keyframes move {
            0% {
                width: 0%;
                height: 0%;
            }
            100% {
                width: 1200px;
            }
            /*定义动画的角度*/
            /*from to 从什么90度时刻开始到那个时刻360度*/
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(180deg);
            }
            from {
                background: rgb(246, 246, 246);
                color: red;
            }
            to {
                background: rgb(9, 9, 0);
                color: aliceblue;
            }
        }
    </style>
    <title>动画打字机</title>
</head>
<body>
    <div style="float: left">天行健君子以自强不息，地势坤君子以厚德载物。静以修身</div>
</body>
</html>

案例四 动画的转动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img{
            height: 300px;
            width: 300px;
            /* margin: auto;*/
        }
        * {
           background-color: aliceblue;
            padding: 0px;
            margin: 0px;
            list-style: none;
            font-size: 30px;
        }
        body {
            font-size: 23px;
        }
        ul,
        li {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        li {
            border: 2px solid #D4D4D4;
            text-align: center;
            border-radius: 20px;
        }
        li p {
            text-align: center;
        }
        /*css3*/
        li:first-child {
            background-color: rgba(199, 166, 4, 0.1);
        }
        /*定义do动画*/
        @keyframes anima {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        @font-face {
            font-family: Bahnschrift;
        }
        li:first-child img:hover {
            animation-name: anima;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        li img:hover {
            animation-name: anima;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        li:last-child img:hover {
            animation-name: anima;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        ul {
            display: flex;
        }
        li {
            flex-grow: 1;
        }
    </style>
    <title>阴天晴天雨天案例一</title>
</head>
<body>
<!--html部分-->
<ul>
    <li>
        <p>今天是</p>
        <img src="like/a%20(2).jpg" >
        <p>晴天</p>
    </li>
    <li>
        <p>明天是</p>
        <img src="like/a%20(1).jpg" >
        <p>阴天</p>
    </li>
    <li>
        <p>后天是</p>
        <img src="like/a%20(6).jpg" >
        <p>雨天</p>
    </li>
</ul>
<div id="new" >
    <div>今天天气晴<br>气温35&#8451<br>出门注意防晒</div>
    <div>明天阴天<br>气温28&#8451<br>适合室外活动</div>
    <div>后天雨天<br>气温27&#8451<br>出门记得拿伞</div>
</div>
<hr>
<li><a href="CSS学习内容二.html"></a></li>
<footer id="footer" style="font-size: 40px;color: cyan;">
    作者：A202020895
    时间 2021/11/2
</footer>
</body>
</html>

案例五 动画的散开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画的散开</title>
    <style>
        *{
            position: relative;
            width: 100px;
            height: 100px;
        }
        .live img{
            width: 400px;
            height: 400px;
            z-index: 0;
            margin: auto;
        }
        @keyframes living {
            0%{
               transform: scale(10);
                opacity: 0.6;
            }
            50%{
                transform: scale(9);
                opacity: 0;
            }
            100%{
                transform: scale(8);
                opacity: 0.5;
            }
        }
        .live span{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 0;
            background: red;
            border-radius: 50%;
            -webkit-animation: living 3s linear infinite;
            z-index: -1;
        }
        .live span:nth-child(4){
            animation-iteration-count: 10;
            -webkit-animation-duration: 10s;
        }
    </style>
</head>
<body>
<div class="live" style="margin: auto">
    <img src="like/a (7).jpg" style="margin: auto">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<li><a href="CSS学习内容二.html"></a></li>
</body>
</html>

 




关键词：
CSS动画
CSS案例
t75yjb52rsccc
目录
相关文章
派大鑫的工作室
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
67 2
gudanhero2018
|
2月前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
gudanhero2018
69 1
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
73 2
光明顶阳顶天
|
25天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
102 58
CamilleKing
|
4天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
CamilleKing
14 1
chnjames
|
30天前
|
前端开发 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
bruce刘晓伟-18435
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
bruce刘晓伟-18435
33 0
Li370234940
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
Li370234940
27 0
蓝易云
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
蓝易云
76 5

热门文章

最新文章

  • 1
    Css基本样式————字体
  • 2
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS伪元素实现的3D按钮
  • 7
    CSS3实现时间轴效果
  • 8
    05.javascript访问CSS
  • 9
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 10
    CSS3中的选择器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    65
  • 2
    技术心得：xpath、CSS定位方法
    43
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    155
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    69
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    140
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    49
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    69
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    151
  • 9
    使用HTML和CSS创建响应式表格
    163
  • 10
    常见的css优化方案都有那些
    49

    • 相关课程

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

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问