动态旋转更换问候语代码

百度已收录   阅读次数: 333
2019-07-1207:45:14 发表评论
摘要

偶然浏览诗梦博客,发现其右侧有一个旋转的问候语html通栏,感觉十分不错,于是我就把代码借过来了,分享一下。

动态旋转更换问候语代码

站长寄语

偶然浏览诗梦博客,发现其右侧有一个旋转的问候语html通栏,感觉十分不错,于是我就把代码借过来了,分享一下。

实现代码

<aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
  <div class="textwidget widget-text">
    <style type="text/css">
      #container-box-1{
                         color:#526372;
                         text-transform:uppercase;
                         width:100%;
                         font-size:16px;
                         line-height:50px;
                         text-align:center
                         }
       #flip-box-1{
                          overflow:hidden;
                          height:50px
                   }
       #flip-box-1 div{
                          height:50px
                      }
       #flip-box-1>div>div{
                          color:#fff;
                          display:inline-block;
                          text-align:center;
                          height:50px;width:100%
                          }
       #flip-box-1 div:first-child{
                          animation:show 8s linear infinite
                          }
       .flip-box-1-1{
                          background-color:#FF7E40
                    }
       .flip-box-1-2{
                          background-color:#C166FF
                    }
        .flip-box-1-3{
                          background-color:#737373
                     }
        .flip-box-1-4{
                          background-color:#4ec7f3
                     }
        .flip-box-1-5{
                          background-color:#42c58a
                     }
        .flip-box-1-6{
                          background-color:#F1617D
                     }
         @keyframes show{
                          0%{margin-top:-300px}
                          5%{margin-top:-250px}
                          16.666%{margin-top:-250px}
                          21.666%{margin-top:-200px}
                          33.332%{margin-top:-200px}
                          38.332%{margin-top:-150px}
                          49.998%{margin-top:-150px}
                          54.998%{margin-top:-100px}
                          66.664%{margin-top:-100px}
                          71.664%{margin-top:-50px}
                          83.33%{margin-top:-50px}
                          88.33%{margin-top:0px}
                          99.996%{margin-top:0px}
                          100%{margin-top:300px}
                         }
         </style>
         <div id="container-box-1">
           <div class="container-box-1-1">坚持每天来逛逛,会让你</div> 
              <div id="flip-box-1">
                   <div>
                       <div class="flip-box-1-1">工作也轻松了!
                       </div>
                   </div>
                   <div>
                       <div class="flip-box-1-2">生活也美好了!
                       </div>
                   </div>
                   <div>
                       <div class="flip-box-1-3">心情也舒畅了!
                       </div>
                   </div>
                   <div>
                        <div class="flip-box-1-4">走路也有劲了!
                        </div>
                   </div>
                   <div>
                        <div class="flip-box-1-5">腿也不痛了!
                        </div>
                   </div>
                   <div>
                         <div class="flip-box-1-6">腰也不酸了!
                         </div>
                   </div>
                   <div>
                         <div class="flip-box-1-1">工作也轻松了!
                         </div>
                   </div>
             </div>
                 <div class="container-box-1-2">你好我也好,不要忘记哦! 
                 </div>
             </div>
       </div>
              <div class="clear">
       </div>
</aside>

内容可以自由编写哦,效果在本站PC端右侧可见,移动端底部可见。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: