css3+swiper实现平滑打字效果

最新推荐文章于 2021-12-23 17:23:49 发布

zhaoyizhu1990

最新推荐文章于 2021-12-23 17:23:49 发布

阅读量276

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/zhaoyizhu1990/article/details/113643581

版权

html
<p>
                <span class="ani"
                 swiper-animate-effect="dayin"
                 swiper-animate-duration="2s"
                 swiper-animate-delay="0.5s"
              ><b>2020</b>年，对公司和个人而言都注定是值得铭记的一年。</span>
</p>
css
.dayin{
  opacity:0;
  -webkit-animation: dy 3s steps(100, end) both;
  animation: dy 3s steps(100, end) both;
}
@-webkit-keyframes dy{
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dy{
  0% {
    width: 0;
  }
  100% {
    opacity: 1;
  }
}
p span {
          width: 580px;
          white-space: nowrap;
          overflow: hidden;
          display: block;
          height: 26px;
          line-height: 26px;
          margin-bottom: 8px;
        }