文字滚动带图标

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background-color: #ff5d73;
  padding-bottom: 3em;
}

.heading__container {
  position: relative;
  top: 5em;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  width: 430px;
  height: 165px;
}

.heading {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  display: inline-block;
  margin-top: 0;
  padding-bottom: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 2.1em;
  font-weight: 600;
  color: #fff;
  text-align: right;
}

.heading:before {
  content: "";
  position: absolute;
  left: -130px;
  bottom: -0.2em;
  width: 430px;
  height: 0.02em;
  background-color: #fff;
}

.bold {
  display: inline-block;
  line-height: 0.6;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
  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: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 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: 'Poppins', 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;
  }
}

JavaScript

(function(){
  
var iconList = [
  "fa-code",
  "fa-google",
  "fa-child",
  "fa-bug",
  "fa-keyboard-o",
  "fa-headphones",
  "fa-lightbulb-o",
  "fa-mortar-board"
];
  
var factsList = [
    "It's never too late to learn to code.",
    "When learning to code, Google is your best friend.",
    "You feel like a super hero when fixing a bug in your code.",
    "Sometime code is full of bugs.",
    "It can turn from hobby to addiction in no time.",
    "Coding often ocupies your mind even when you are doing something else.",
    "It develops a creative thinker in you, don't underestimate it.",
    "There is always something new to learn, coding is a lifetime learning process."
  ];

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg