css3动画产生圆圈从小到大

  1. 这里就是通过css3实现了像涟漪一样的效果
  2. >  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>无标题文档title>  
  7. <style>  
  8. @keyframes warn {  
  9.     0% {  
  10.         transform: scale(0);  
  11.         opacity: 0.0;  
  12.     }  
  13.     25% {  
  14.         transform: scale(0);  
  15.         opacity: 0.1;  
  16.     }  
  17.     50% {  
  18.         transform: scale(0.1);  
  19.         opacity: 0.3;  
  20.     }  
  21.     75% {  
  22.         transform: scale(0.5);  
  23.         opacity: 0.5;  
  24.     }  
  25.     100% {  
  26.         transform: scale(1);  
  27.         opacity: 0.0;  
  28.     }  
  29. }  
  30. @-webkit-keyframes "warn" {  
  31.     0% {  
  32.         -webkit-transform: scale(0);  
  33.         opacity: 0.0;  
  34.     }  
  35.     25% {  
  36.         -webkit-transform: scale(0);  
  37.         opacity: 0.1;  
  38.     }  
  39.     50% {  
  40.         -webkit-transform: scale(0.1);  
  41.         opacity: 0.3;  
  42.     }  
  43.     75% {  
  44.         -webkit-transform: scale(0.5);  
  45.         opacity: 0.5;  
  46.     }  
  47.     100% {  
  48.         -webkit-transform: scale(1);  
  49.         opacity: 0.0;  
  50.     }  
  51. }  
  52.   
  53. .container {  
  54.     position: relative;  
  55.     width: 40px;  
  56.     height: 40px;  
  57.     border: 1px solid #000;  
  58. }  
  59. /* 保持大小不变的小圆圈  */  
  60. .dot {  
  61.     position: absolute;  
  62.     width: 6px;  
  63.     height: 6px;  
  64.     left: 15px;  
  65.     top: 15px;  
  66.     -webkit-border-radius: 20px;  
  67.     -moz-border-radius: 20px;  
  68.     border: 2px solid red;  
  69.     border-radius: 20px;  
  70.     z-index: 2;  
  71. }  
  72. /* 产生动画(向外扩散变大)的圆圈  */  
  73. .pulse {  
  74.     position: absolute;  
  75.     width: 24px;   
  76.     height: 24px;  
  77.     left: 2px;  
  78.     top: 2px;  
  79.     border: 6px solid red;  
  80.     -webkit-border-radius: 30px;  
  81.     -moz-border-radius: 30px;  
  82.     border-radius: 30px;  
  83.     z-index: 1;  
  84.     opacity: 0;  
  85.     -webkit-animation: warn 3s ease-out;  
  86.     -moz-animation: warn 3s ease-out;  
  87.     animation: warn 3s ease-out;  
  88.     -webkit-animation-iteration-count: infinite;  
  89.     -moz-animation-iteration-count: infinite;  
  90.     animation-iteration-count: infinite;  
  91. }  
  92. style>  
  93.   
  94. head>  
  95.   
  96. <body>  
  97. <div class="container">  
  98.     <div class="dot">div>  
  99.     <div class="pulse">div>  
  100. div>  
  101. body>  
  102. html>  

你可能感兴趣的:(css3动画产生圆圈从小到大)