zoukankan      html  css  js  c++  java
  • animate 的使用 背景图由大变小

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>css3 animation动画停留在最后一帧</title>
    <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
    
      body{margin: 0;}
      .over{
          1920px;
         height: 587px; 
    	 overflow:hidden; //先将溢出的隐藏
    	 position: relative;
    	 z-index: 1
        }
    	
    	.m-test{
    	height: 587px; 
        animation:moveBackground 6s;  //设置动画的时间
        background:url("") center center;//可以定义一个背景图
        animation-fill-mode: forwards;   //设置动画在最后一帧停止
        }
    
        @-webkit-keyframes moveBackground {
          0% { transform: scale(1.1, 1.1);}
          100% { transform: scale(1, 1);}
        }
        @keyframes moveBackground {
          0% { transform: scale(1.1, 1.1);}
          100% { transform: scale(1, 1);}
        }  
    </style>
    </head>
    <body>
    <div class="over">
    <div class="m-test"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">
    </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    显示器接口
    常用英语-持续更新
    Web Service
    单元测试--Moq
    单元测试--Xunit
    Asp.Net WebApi 跨域问题
    VS中常用的快捷键
    单元测试--最佳实践
    设计模式--建造者模式
    windows10搭建GitBucket服务器(1)
  • 原文地址:https://www.cnblogs.com/whl4835349/p/11713237.html
Copyright © 2011-2022 走看看