CSS3动画(案例为主)-阿里云开发者社区

CSS3动画(案例为主)

2023-07-16 84

版权

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

简介： CSS3动画(案例为主)

中文文档 | anime.js

CSS3动画是什么？

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

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

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

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

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

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

案例一动画加二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>

CSS3动画(案例为主)

中文文档 | anime.js

CSS3动画是什么？

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

案例一动画加二D打印

案例二图片的来回运动

案例三动画的放大缩小

案例三动画打字机

案例四动画的转动

案例五动画的散开

热门文章

最新文章

相关课程

相关电子书

相关实验场景

CSS3动画(案例为主)

中文文档 | anime.js

CSS3动画是什么？

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

案例 一 动画加二D打印

案例二 图片的来回运动

案例三 动画的放大缩小

案例三 动画打字机

案例四 动画的转动

案例五 动画的散开

热门文章

最新文章

相关课程

相关电子书

相关实验场景

案例一动画加二D打印

案例二图片的来回运动

案例三动画的放大缩小

案例三动画打字机

案例四动画的转动

案例五动画的散开