HTML与CSS中的动画模块-html教程-PHP中文网

首页

web前端

html教程

HTML与CSS中的动画模块

php中世界最好的语言

Mar 13, 2018 am 11:44 AM

csshtml

这次给大家带来HTML与CSS中的动画模块，使用HTML与CSS中的动画模块注意事项有哪些，下面就是实战案例，一起来看一下。

一. 动画模块

1.过渡和动画之间的异同

1.1不同点

过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点

过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

2 动画三要素

2.1告诉系统需要执行哪个动画
2.2告诉系统我们需要自己创建一个名称叫做lnj的动画
2.3告诉系统动画持续的时长

p{             width: 100px;    
 height: 50px;  
 background-color: red;       
 /*1.告诉系统需要执行哪个动画*/   
 animation-name: lnj;       
 /*3.告诉系统动画持续的时长*/             
  animation-duration: 3s;       }        
 /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/  
 @keyframes lnj {            
  from{                 margin-left: 0;           }             
  to{                 margin-left: 500px; }         
  }

二.动画模块 - 其它属性 (上)

  p {         
  width: 100px;         
  height: 50px;         
  background-color: red;         
  animation-name: sport;         
  animation-duration: 2s;         
  /*告诉系统多少秒之后开始执行动画*/         
  /*animation-delay: 2s;*/         
  /*告诉系统动画执行的速度*/         
  animation-timing-function: linear;         
  /*告诉系统动画需要执行几次*/         
  animation-iteration-count: 3;  
  //infinite : 无限的         
  /*告诉系统是否需要执行往返动画         
  取值:         normal, 默认的取值, 执行完一次之后回到起点继续执行下一次         
  alternate, 往返动画, 执行完一次之后往回执行下一次         
  */         animation-direction: alternate;     }     
  @keyframes sport {         
  from{             margin-left: 0;         }         
  to{             margin-left: 500px;         }     }     
  p:hover{         
  /*         告诉系统当前动画是否需要暂停         
  取值:         running: 执行动画,默认取值         
  paused: 暂停动画, 当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画;         
  */         
  animation-play-state: paused;     }

三.动画模块 - 其它属性 (下)

      .box2{             
      width: 200px;             
      height: 200px;             
      background-color: blue;             
      margin: 100px auto;             
      animation-name: myRotate;             
      animation-duration: 5s;             
      animation-delay: 2s;             
      /*             通过我们的观察, 动画是有一定的状态的            
       1.等待状态             2.执行状态             3.结束状态             */
      /*             animation-fill-mode作用:             指定动画等待状态和结束状态的样式 
                  取值:             none: 不做任何改变             
                  forwards: 让元素结束状态保持动画最后一帧的样式; 
                  //向前的            
       backwards: 让元素等待状态的时候显示动画第一帧的样式; 
                   // 向后的             
                   both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
      */             
      /*animation-fill-mode: backwards;*/             
      /*animation-fill-mode: forwards;*/             
      animation-fill-mode: both;         }         
      @keyframes myRotate {            
       0%{                 transform: rotate(10deg);             }             
       50%{                 transform: rotate(50deg);             }             
       100%{                 transform: rotate(70deg);             }        
        } 
      animation-fill-mode

四. 动画模块-连写

1.动画模块连写格式
animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;

2.动画模块连写格式的简写
animation:动画名称动画时长;

五. 云层效果

<html lang="en"> <head>     
<meta charset="UTF-8">     <title>104-动画模块-云层效果</title>     <style>         
*{             margin: 0;             padding: 0;         }         
ul{             height: 400px;             background-color: skyblue;             
margin-top: 100px;             animation: change 5s linear 0s infinite alternate;            
 position: relative;             overflow: hidden; //让屏幕下方的滚动条隐藏掉         }      
    ul li{             list-style: none;             width: 400%;  
    //设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵
        height: 100%;             position: absolute; 
        // 设置子绝父相后,三个li会重叠到一起             
        left: 0;             top: 0;         }         ul li:nth-child(1){             
        background-image: url("images/cloud_one.png");             
        animation: one 30s linear 0s infinite alternate;         }         
        ul li:nth-child(2){             background-image: url("images/cloud_two.png");             
        animation: two 30s linear 0s infinite alternate;         }         
        ul li:nth-child(3){             background-image: url("images/cloud_three.png");             
        animation: three 30s linear 0s infinite alternate;         }         
        @keyframes change {             
        from{                 background-color: skyblue;             }             
        to{                 background-color: black;             }         }         
        @keyframes one {            
         from{                 margin-left: 0;             }             
         to{                 margin-left: -100%;  
         //如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动;             
         }         }         
         @keyframes two {            
          from{                 margin-left: 0;             }             
          to{                 margin-left: -200%;
          //由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!
                       }         }         
         @keyframes three {             from{                 margin-left: 0;             }             
         to{                 margin-left: -300%;             }         }     
         </style> </head> <body> <ul>     <li></li>     <li></li>     <li></li> </ul> </body> </html>

六. 无限滚动

<html lang="en"> <head>     <meta charset="UTF-8">     <title>105-动画模块-无限滚动</title>     
<style>         *{             margin: 0;             padding: 0;         }        
 p{             width: 600px;             height: 188px;             border: 1px solid #000;           
   margin: 100px auto;             overflow: hidden;         }         ul{             width: 2000px; 
   //这个无限滚动原理就是ul做动画             
   height: 188px;             background-color: black;  
   //背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果             
   animation: move 10s linear 0s infinite normal;                      
   //name 时间 速度 延时 无限重复 是否往返(normal代表不往返)
            }         
            ul li{             float: left;             list-style: none;             width: 300px;
                         height: 188px;             background-color: red;             
                         border: 1px solid #000;             box-sizing: border-box;         }
                                  ul:hover{             
                                  /*动画添加给谁, 就让谁停止*/ 
                                              animation-play-state: paused;         } 
                                                      ul:hover li{             opacity: 0.5; 
                                                      //当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果
                                                               }         
                                                               ul li:hover{             opacity: 1; 
                                                               //透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果
                                  }         @keyframes move {             
                                  from{                 margin-left: 0;             }             
                                  to{                 margin-left: -1200px;
                                  //只需要移除屏幕4个li的宽度就可.   屏幕上就会显示第5.6两个li,这时,原本的动画就会恢复的原来的位置接着动画,实现了无线滚动效果             
                       }         }     </style> </head> <body> <p>     <ul>         
                       <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>        
                       <li>![](images/banner3.jpg)</li>         <li>![](images/banner4.jpg)</li>         
                       //把前两个li加在后面,起到过度效果;动画不会显得太生硬.         
                       <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>     
                       </ul> </p> </body> </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

HTML与CSS中2D转换模块

企业开发中使用H5有哪些注意事项

以上是HTML与CSS中的动画模块的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。