Css之自由落体

最新推荐文章于 2022-04-20 16:03:20 发布

SnowAnna

最新推荐文章于 2022-04-20 16:03:20 发布

阅读量605

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_38289699/article/details/79034270

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

   <!DOCTYPE html>   
 
   < 
  html  
  lang= 
  "zh-cn">   
 
   < 
  head>   
 
       < 
  meta  
  charset= 
  "UTF-8">   
 
       < 
  title>HTML5+CSS3练习</ 
  title>   
 
   </ 
  head>   
 
   < 
  body>   
 
       < 
  fieldset  
  style= 
  "height:550px;">   
 
           < 
  legend>自由落体</ 
  legend>   
 
           北京时间：< 
  span  
  class= 
  "time"></ 
  span>   
 
           < 
  figure  
  class= 
  "circle"></ 
  figure>   
 
           < 
  figure  
  class= 
  "shadow"></ 
  figure>   
 
           < 
  style>   
 
  @keyframes  
  circle{   
 
               0%,100%{   
 
  margin-top: 
  20 
  px;   
 
               }   
 
               2%{   
 
  margin-top: 
  20 
  px;   
 
               }   
 
               98%{   
 
  margin-top: 
  20 
  px;   
 
               }   
 
               48%{   
 
  margin-top:  
  300 
  px;   
 
               }   
 
               52%{   
 
  margin-top:  
  300 
  px;   
 
               }   
 
             }   
 
  .circle{   
 
  height: 
  200 
  px;   
 
  width: 
  200 
  px;   
 
  margin: 
  20 
  px  
  auto  
  0 
  px;   
 
  border-radius:  
  50 
  %;   
 
  position:  
  relative;   
 
  z-index:  
  10;   
 
  background-image:  
  radial-gradient( 
  circle  
  at  
  70 
  px  
  80 
  px, 
  #39c, 
  #000);   
 
  animation: 
  circle  
  2 
  s  
  ease-in  
  infinite  
  alternate;   
 
             }   
 
  @keyframes  
  shadow{   
 
               0%,100%{   
 
  height:  
  50 
  px;   
 
  width:  
  50 
  px;   
 
  margin-left:  
  -25 
  px;   
 
  margin-top:  
  40 
  px;   
 
  background-color: 
  rgba( 
  0, 
  0, 
  0, 
  0.5);   
 
               }   
 
               2%{   
 
  height:  
  50 
  px;   
 
  width:  
  50 
  px;   
 
  margin-left:  
  -25 
  px;   
 
  margin-top:  
  40 
  px;   
 
  background-color: 
  rgba( 
  0, 
  0, 
  0, 
  0.5);   
 
               }   
 
               98%{   
 
  height:  
  50 
  px;   
 
  width:  
  50 
  px;   
 
  margin-left:  
  -25 
  px;   
 
  margin-top:  
  40 
  px;   
 
  background-color: 
  rgba( 
  0, 
  0, 
  0, 
  0.5);   
 
               }   
 
               48%{   
 
  height:  
  170 
  px;   
 
  width:  
  170 
  px;   
 
  margin-left:  
  -85 
  px;   
 
  margin-top:  
  -10 
  px;   
 
  background-color:  
  rgba( 
  0, 
  0, 
  0, 
  0.8);   
 
               }   
 
               52%{   
 
  height:  
  170 
  px;   
 
  width:  
  170 
  px;   
 
  margin-left:  
  -85 
  px;   
 
  margin-top:  
  -10 
  px;   
 
  background-color:  
  rgba( 
  0, 
  0, 
  0, 
  0.8);   
 
               }   
 
             }   
 
  .shadow{   
 
  transform-style: 
  preserve-3d;   
 
  transform: 
  rotate3d( 
  1, 
  0, 
  0, 
  80 
  deg);   
 
  animation:shadow  
  2 
  s  
  ease-in  
  infinite  
  alternate;   
 
  border-radius:  
  50 
  %;   
 
  position:  
  absolute;   
 
  top:  
  470 
  px;   
 
  left:  
  50 
  %;   
 
             }   
 
           </ 
  style>   
 
           < 
  script>   
 
  // $(function(){   
 
  //     time();   
 
  //     window.setInterval(time,1000);   
 
  // });           
 
  // var time=function(){   
 
  //     var date=new Date();   
 
  //     $(".time").text(date.toLocaleString());   
 
  // }   
 
           </ 
  script>   
 
       </ 
  fieldset>   
 
   </ 
  body>   
 
   </ 
  html>

SnowAnna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css之自由落体

html lang="zh-cn"> head> meta charset="UTF-8"> title>HTML5+CSS3练习title> head> body> fieldset style="height:550px;"> legend>自由落体legend> 北京时间：spa
复制链接

扫一扫

专栏目录