html - 网站循环消息信息

August 26, 2018 10:13
访问量:318
摘要:前端动态显示效果

案例示范demo

<html>
    <body>
        <div class="heading__container">
            <div class="facts__container">
                <div class="icon">
                    <span class="fa fa-google fa-2x fa-fw"></span>
                </div>
                <div class="text__container">

学编程时,百度和谷歌都是你的好朋友。

                </div>
            </div>
        </div>
    </body>
</html>
<style>
.heading__container{position: relative;top: 5em;left: 50%;-webkit-transform: translate(-50%);transform: translate(-50%);width: 430px;height: 165px;}
.heading{position: absolute;width: 430px;padding-bottom: 10px;font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;font-size: 2.1em;font-weight: 500;color: #fff;text-align: center;border-bottom: 1px dashed #fff;}
.bold{display: inline-block;line-height: 0.6;font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;font-size: 1.1em;font-weight: 300;color: #fff838;}
.facts__container{position: absolute;bottom: -2em;left: 0;width: 430px;height: 78px;background-color: #fff;border-radius: 5px;box-shadow: 0 20px 18px -25px #555;}
.icon{box-sizing: border-box;display: inline-block;height: 100%;padding: 15px;background-color: #12b48c;border-top-left-radius: 5px;border-bottom-left-radius: 5px;position: absolute;left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);overflow-y: hidden;}
.fa.fa-code,
.fa.fa-google,
.fa.fa-child,
.fa.fa-mortar-board,
.fa.fa-bug,
.fa.fa-lightbulb-o,
.fa.fa-headphones,
.fa.fa-keyboard-o{height: auto;color: #fff;line-height: 46px;-webkit-animation: animateEl 5s infinite;animation: animateEl 5s infinite;}
.fa-2x{font-size: 2.5em;}
.text__container{box-sizing: border-box;width: 320px;height: auto;padding: 5px 0;position: absolute;left: 98px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);overflow-y: hidden;}
.text{margin: 0;font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;font-weight: 400;font-size: 1.1em;color: #12b48c;position: relative;-webkit-animation: animateEl 5s infinite;animation: animateEl 5s infinite;}
footer{width: 100%;height: 50px;padding: 1em 0;background-color: #ff5d73;position: relative;top: 10em;text-align: center;}
.footer__text{font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;font-weight: 400;font-size: 0.9em;color: #fff;}
.footer__text a{text-decoration: none;color: #fff838;}
@-webkit-keyframes animateEl{0%{-webkit-transform: translateY(2em);transform: translateY(2em);opacity: 0;}
8%{-webkit-transform: translateY(-0.3em);transform: translateY(-0.3em);opacity: 1;}
13%{-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}
87%{-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}
93%{-webkit-transform: translateY(0.5em);transform: translateY(0.5em);opacity: 1;}
100%{-webkit-transform: translateY(-2em);transform: translateY(-2em);opacity: 0;}}
@keyframes animateEl{0%{-webkit-transform: translateY(2em);transform: translateY(2em);opacity: 0;}
8%{-webkit-transform: translateY(-0.3em);transform: translateY(-0.3em);opacity: 1;}
13%{-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}
87%{-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}
93%{-webkit-transform: translateY(0.5em);transform: translateY(0.5em);opacity: 1;}
100%{-webkit-transform: translateY(-2em);transform: translateY(-2em);opacity: 0;}}
@media screen and (min-width: 320px) and (max-width: 480px){.heading__container{width: 280px;top: 3em;}
.heading{width: auto;}
.heading:before{width: 300px;left: 50%;-webkit-transform: translate(-50%);transform: translate(-50%);}
.facts__container{width: 300px;height: 110px;bottom: -4em;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.text__container{left: 88px;width: 200px;padding: 10px 0;}
.text{line-height: 1.3;}
.icon{padding-left: 10px;padding-right: 10px;}
.fa.fa-code, .fa.fa-google, .fa.fa-child, .fa.fa-mortar-board, .fa.fa-bug, .fa.fa-lightbulb-o, .fa.fa-headphones, .fa.fa-keyboard-o{line-height: 1.9;}}
</style>
<script>
(function(){
  var iconList = [
    "fa-code",
    "fa-google",
    "fa-child",
    "fa-bug",
    "fa-keyboard-o",
    "fa-headphones",
    "fa-lightbulb-o",
    "fa-mortar-board"
  ];
  var factsList = [
      "想学编程永远不会太迟。",
      "学编程时,百度和谷歌都是你的好朋友。",
      "修复了一个错误,整个人感觉棒极了。",
      "有时候,代码中可能有很多错误。",
      "学编程可能从爱好变成职业。",
      "即使在做其他事也可能想着代码。",
      "编程培养了创造性思维,不容小觑哦。",
      "推陈出新,编程是个终生学习的过程。"
    ];
  function createElement(text, icon){
      var p = document.querySelector(".text");
      p.textContent = text;
      var span = document.querySelector(".icon span");
      span.className = "";
      span.classList.add("fa", icon, "fa-2x", "fa-fw");
  }

  var i = 0;
  var length = factsList.length;
  var delayTime = 5000;
  function nextFact(){
    var fact = factsList[i];
    var icon = iconList[i];
    createElement(fact, icon);

    i++;
    if(i >= length){
      i = 0;
    }
    setTimeout(nextFact, delayTime);
  }
  nextFact();
})();
</script>

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站