Html 动画


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .biaoti{
    width: 100%;
    height: 101px;
    padding-top: 60px;
    background-color: #AAAC90;
   }
   @-webkit-keyframes name{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
   }
   @-webkit-keyframes color{
    from{transform: scale(1);
    }
    to{transform: scale(1.2);}
   }
   #ss{
    margin-top: -30px;
    margin-left: 120px;
    color: #A42D2C;
    font-size: 35px;
    transform-origin: 10,10;
    float: left;
   }
   #ss:hover{
    -webkit-animation: name 3s linear; 
   }
   #nav{
    padding: 10px;
   }
   #nav ul{
    
    width: 640px;
    height: 40px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    background: blue;
    
    float: left;
   }
   #nav ul li{
    float: left;
    text-align: center;
    font: 16px/2.5 "microsoft yahei";
    border-right: solid 2px white;
   }
   #nav ul li a{
    display: block;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
    text-decoration: none;
    padding-right: 10px;
   }
   #nav ul li:hover {
    
    background-color: red;
         }
       #nav ul li a:hover {
    -webkit-animation: color 3s linear;
    color: yellow;
         }
         p{
          line-height: 22px;
          text-indent: 2em;
         }
         #two{
          border-radius: 21px;
          float: right;
          background-color: black;
          width: 300px;
          margin-right: 100px;
          height: 550px;
         }
         #two img{
          margin-top: 10px;
          margin-left: 7px;
         }
         @media only  and (max-width: 650px) {
          #two{
           float: left;
          }
         }
  </style>
 </head>
 <body>
  <div class="biaoti">
   
    <div id="ss" >散文集</div><span>朱自清</span>
    
  
  <div id="nav">
    <ul>
        <li><a href="#" />作者生平</a></li>
        <li><a href="#" />故事背景</a></li>
        <li><a href="#" />词语注释</a></li>
        <li><a href="#" />作品手法欣赏</a></li>
        <li><a href="#" />上一篇文章</a></li>
        <li><a href="#" />下一篇文章</a></li>
      
</ul>  
</div></div>
<div style=" width: 100%;height: 500px;float: left;">
 <div style="margin-top: 10px; padding-left: 120px;width: 560px;float: left;">
  <span style="float: left;font-weight: 800;">荷塘月色(节选)</span><br />
  <p>这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑,已经听不见了;妻在屋里拍着闰儿,迷迷糊糊地哼着眠歌。我悄悄地披了大衫,带上门出去。</p>
 <p>沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四面,长着许多树,蓊蓊郁郁的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的。</p>
 <p>路上只我一个人,背着手踱着。这一片天地好像是我的;我也像超出了平常的自己,到了另一世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。</p>
 <p><span style="background-color: deepskyblue;font-size: 35px;">曲</span>曲折折的荷塘上面,弥望的是田田的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电般,霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水,遮住了,不能见一些颜色;而叶子却更见风致了。</p>
 </div>
 <div id="two">
  <img src="img/tu5.png"/>
  <br />
  <p style="color: white;line-height: 20px;">朱自清(1898年11月22日—1948年8月12日),原名自华,号秋实,后改名自清,字佩弦。中国现代散文家、诗人、学者、民主战士</p>
 </div>
</div>
 </body>
</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值