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

CSS3——CSS3动画(animation)及应用

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

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。


语法格式：


animation:动画名称 花费时间 运动曲线  何时开始
  播放次数  是否反方向;


关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r


@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}



animation-iteration-count:infinite;  无限循环播放    默认是1次
animation-direction： alternate   动画应该轮流反向播放    默认是 normal
animation-play-state:paused;   暂停动画"


案例1：太阳系的运作


代码：


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>宇宙动画</title>
          <style type="text/css">
            * {
              margin: 0;
              padding: 0;
            }
            html,body {
                    /*margin: 50px;*/
               width: 100%;
               height: 100%;
               background: url(img/bg.jpg) no-repeat;
               background-size: cover;
               position: relative;
            }
            .box {
              width: 600px;
              height: 600px;
              border: 1px solid #ccc;
              border-radius: 50%;
              position: absolute; 
              left: 50%;
              margin-left: -300px;
              top: 50%;
              margin-top: -300px;
            }
            .sun {
               position: absolute;
               width: 50px;
               height: 50px;
               background-color: orange;
               border-radius: 50%;
               margin-left: -25px;
               left: 50%;
               margin-top: -25px;
               top: 50%;
               box-shadow: 0px 0px 100px orange; /*周围日光的效果*/
            }
            .lin1 {
               width: 100px;
               height: 100px;
               border: 1px solid #ccc;
               border-radius: 50%;
               margin-left: -50px;
               margin-top: -50px;
               animation: rotate 10s linear infinite;
            }
            .lin1:after {
               content: "";
               width: 20px;
               height: 20px;
               display: block;
               border-radius: 50%;
               background-color: orange;
               position: absolute;
               left: -2px;
               top: 10px;
            }
            .public {
               position: absolute;
               left: 50%;
               top: 50%;
            }
            @keyframes rotate {
               from {
                  transform: rotateZ(0deg);
                        /*transform: rotateX(0deg);*/
               }
               to {
                 transform: rotateZ(360deg);
                          /*transform: rotateX(360deg);*/
               }
            }
            .lin2 {
               width: 150px;
               height: 150px;
               border: 1px solid #ccc;
               border-radius: 50%;
               margin-left: -75px;
               margin-top: -75px;
                      animation: rotate /*rotateX*/ 5s linear infinite;
            }
            .lin2:after {
              content: "";
              width: 10px;
              height: 10px;
              background-color: blue;
              display: block;
              border-radius: 50%;
              position: absolute;
              left: 25px;
              top: 10px;
            }
            .lin3 {
               width: 230px;
               height: 230px;
               border: 1px solid #ccc;
               border-radius: 50%;
               margin-left: -115px;
               margin-top: -115px;
               animation:  rotate 10s linear infinite;
            }
            .lin3 span {
               width: 20px;
               height: 20px;
               display: block;
               background-color: green;
               border-radius: 50%;
               position: absolute;
               left: 50px;
               animation: rotate 5s linear infinite;
            }
            .lin3 span b {
               width: 10px;
               height: 10px;
               background-color: pink;
               display: block;
               border-radius: 50%;
               position: absolute;
               left: 25px;
            }
            .lin4  {
               width: 332px;
               height: 332px;
               border: 1px solid #ccc;
               background: url(img/asteroids_meteorids.png) no-repeat;
               border-radius: 50%;
               margin-left: -161px;
               margin-top: -161px;
               animation: rotate 15s linear infinite;
            }
            .lin4:after {
               content: "";
               display: block;
               width: 10px;
               height: 10px;
               background-color: red;
               border-radius: 50%;
               position: absolute;
               left: 120px;
            }
            .line5 {
               width: 450px;
               height: 450px;
               border: 1px solid #ccc;
               border-radius: 50%;
               margin-left: -220px;
               margin-top: -220px;
               animation: rotate 10s linear infinite;
            }
            .line5 span {
               width: 30px;
               height: 30px;
               background-color: blue;
               border-radius: 50%;
               display: block;
               position: absolute;
               left: 120px;
            }
            .line5 span  b {
               display: block;
               width: 40px;
               height: 40px;
               border: 5px solid #ccc;
               border-radius: 50%;
               transform: skew(45deg);
               position: absolute;
               left: -6px;
               top: -10px;
            }
          </style>
        </head>
    <body>
      <div class="box">
          <div class="sun"></div>
          <div class="lin1 public"></div>
          <div class="lin2 public"></div>
          <div class="lin3 public">
              <span>
                  <b></b>
              </span>
          </div>
          <div class="lin4 public"></div>
          <div class="line5 public">
               <span>
                  <b></b>
               </span>
          </div>
      </div>
    </body>
</html>


案例2：图片播放



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
          * {
             margin: 0;
             padding: 0;
          }
          html,body {
             width: 100%;
             height: 100%;
          }
          .box {
             width: 100%;
             height: 100%;
             position: relative;
             /*overflow: hidden;*/
          }
          .box>div{
         width: 100%;
         height: 100%;
         position: absolute;
         background-size: cover;
          }
          .two {
                display: block;
               height: 100%;
            background: url(img/4.jpg) no-repeat bottom;
          }
          .three { 
                display: block;
                height:100%;
             background: url(img/1.jpg) no-repeat top;
          }
            .one {
                 display: block;
               height: 100%;
                 background: url(img/3.jpg) no-repeat top;
            }
          .box .numbers {
             width: 300px;
             height: 100px;
             left: 50%;
             margin-left: -150px;
             bottom: 20px;
             z-index: 4;
          }
          .box .numbers a {
              width: 90px;
              height: 90px;
              display: block;
              line-height: 90px;
              text-align: center;
              text-decoration: none;
              color: #000;
              background-color: white;
              border-radius: 50%;
              float: left;
              margin: 0 5px;
          }
          .one:target {
             animation: rotate 1s linear;
             z-index: 1;
          }
          .two:target {
             animation: rotate 1s linear;
             z-index: 1;
          }
          .three:target {
             animation: scale 1s linear;
             z-index: 1;
          }
          @keyframes rotate {
             from {
               transform: scale(0) rotateZ(0deg);
             }
             to {
            transform: scale(1) rotateZ(360deg);
             }
          }
          @keyframes scale {
            from {
              transform: scale(0);
            }
            to {
              transform: scale(1);
            }
          }
        </style>
    </head>
    <body>
         <div class="box">
            <div class="two" id="two"></div>
            <div class="three" id="three"></div>
                  <div class="one" id="one"></div>
            <div class="numbers">
               <a href="#two">1</a>
               <a href="#three">2</a>
                     <a href="#one">3</a>
            </div>
         </div>
    </body>
</html>


案例3：钟表


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
           * {
             margin: 0;
             padding: 0;
           }
           html,body {
             width: 100%;
             height: 100%;
           }
           .colock {
              width: 400px;
              height: 400px;
              border: 1px solid #000;
              border-radius: 50%;
              margin: 50px auto;
              position: relative;
           }
           .colock>div {
             position: absolute;
           }
           .line {
             width: 2px;
             height: 100%;
             background-color: #ccc;
             margin-left: -1px;
             left: 50%;
           }
           .line:first-child{
           }
           .line:nth-child(2){
             transform: rotateZ(30deg);
           }
           .line:nth-child(3){
             transform: rotateZ(60deg);
           }
           .line:nth-child(4){
             transform: rotateZ(90deg);
           }
           .line:nth-child(5){
             transform: rotateZ(120deg);
           }
           .line:nth-child(6){
             transform: rotateZ(150deg);
           }
           .cover {
             width: 380px;
             height: 380px;
             background-color: #fff;
             border-radius: 50%;
             left: 50%;
             top: 50%;
             margin-top: -190px;
             margin-left: -190px;
           }
           .h {
             width: 6px;
             height: 130px;
             background-color: #000;
             margin-left: -3px;
             left: 50%;
             top: 60px;
             transform-origin:bottom;
             animation: rotate  43200s steps(60) infinite;
           }
           .m {
             width: 4px;
             height: 150px;
             background-color: green;
             margin-left: -2px;
             left: 50%;
             top: 40px;
             transform-origin:bottom;
             animation: rotate  3600s steps(60) infinite;
           }
           .s {
             width: 2px;
             height: 160px;
             background-color: pink;
             margin-left: -1px;
             left: 50%;
             top: 30px;
             transform-origin:bottom;
             animation: rotate  60s steps(60) infinite;
           }
           .dotted {
             width: 20px;
             height: 20px;
             border-radius: 50%;
             background-color: #000;
             left: 50%;
             top: 50%;
             margin-left: -10px;
             margin-top: -10px;
           }
           @keyframes rotate {
             from {
               transform: rotateZ(0deg);
             }
             to {
          transform: rotateZ(360deg);
             }
           }
        </style>
    </head>
    <body>
       <div class="colock">
         <div class="line"></div>
         <div class="line"></div>
         <div class="line"></div>
         <div class="line"></div>
         <div class="line"></div>
         <div class="line"></div>
         <div class="cover"></div>
         <div class="h"></div>
         <div class="m"></div>
         <div class="s"></div>
         <div class="dotted"></div>
       </div>
    </body>
</html>



关键词：
CSS动画
CSS应用
CSS animation
CSS动画animation
CSS css3应用
流楚丶格念
目录
相关文章
疯狂的猿
|
9天前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
疯狂的猿
42 22
疯狂的猿
|
2月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
疯狂的猿
62 31
疯狂的猿
|
1月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
47 6
众所周知
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
79 7
龙大吉
|
2月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度；图标字体则以字体形式呈现图标，便于调整样式。文章分析了两者的优缺点及应用场景，并提供了应用技巧和注意事项，旨在帮助开发者提升页面性能，改善用户体验。
龙大吉
37 5
东方睿赢
|
2月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论，旨在帮助开发者更好地理解和运用媒体查询，提升移动端用户体验。
东方睿赢
54 4
疯狂的猿
|
2月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码，具有真实的视觉感，同时文字还会在旋转过程中显示出灯光的反射效果，很有意思，欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
36 6
疯狂的猿
|
2月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
疯狂的猿
28 2
疯狂的猿
|
2月前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总，一共包含126种加载动画效果，不同样式不同图案，简单实用，一览包含所有，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，欢迎下载试试！代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效插件，希望大家喜欢！
疯狂的猿
36 2
我是快乐的嘟嘟
|
2月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响，如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中，需要根据具体情况选择合适的动画技术。
我是快乐的嘟嘟
33 1