纯Css文字上下滚动轮播

<div class="div1">

<div class="div2">

<p>111111111111111111111</p>

<p>211111111111111111111</p>

<p>311111111111111111111</p>

<p>411111111111111111111</p>

<p>511111111111111111111</p>

<p>611111111111111111111</p>

<p>711111111111111111111</p>

<p>2211111111111111111111</p>

<p>331111111111111111111</p>

<p>441111111111111111111</p>

<p>551111111111111111111</p>

<p>661111111111111111111</p>

<p>771111111111111111111</p>

<p>881111111111111111111</p>

<p>991111111111111111111</p>

<p>001111111111111111111</p>

</div>

</div>

.div1 {

width:200px;

height:200px;

overflow:hidden;

margin:auto;

position:relative;

}

@keyframes anis {

100% {

transform:translateY(-200px)

}

}img {

position:absolute;

}

.div2 {

animation:anis 10s linear infinite;

}

.div2:hover {

animation-play-state:paused;

}

 

作者:小屋
链接:http://www.rumenwu.com/operate/630.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(15)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-04-26 23:50
下一篇 2018-05-02 19:07

相关推荐

  • 详解JavaScript轮播图技术理解

    众所周知,轮播图现今在网页中占据着必不可少的地位。任何的一个网站,一个网页,都会出现一个轮播图,而轮播图更是利用JavaScript做出的一个比较基础的动画。下面是我本人对写轮播图的一点见解,很多地方可能不是很全面,甚至可能说是错误的,希望大家多多指点。 下面这个是我自己闲暇时随便做的一个轮播图: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制…

    2018-04-02
    2.3K0
  • 被吹爆的私域到底是什么?

    关于私域流量运营的文章大家应该看过了很多,但有一个基本点是我们所忽略的:很多人对私域原点的认知是不清晰的。到底什么才是私域?私域为什么会产生价值?网上有各种各样的私域定义,今天本文作者从以下五个方面来阐述,帮助大家深刻建议对私域的认知。 一、私域的本质是流量 这是首当其冲要解释的一点,最重要的是对微信私域的认知。 村长之前也解释过,为什么要把那么多人导流到微…

    2021-03-03
    3990
  • 微信、B站、抖音、快手、小红书等7大平台玩法详解,一文读懂!

    前有微信、微博老牌霸主,后有抖音、快手、B站等群雄逐鹿,随着众多社交媒体平台的崛起,许多品牌的营销动作也开始向这些平台迁移。 但如何选择平台,并根据平台优势选择对应的营销策略,对于当下许多品牌来讲,却是个棘手的问题。 为此,馒头商学院邀请了艾加营销北京事业部副总经理范小杰,为馒头的用户做了一场关于《全域流量运营—破解后流量时代营销增长力》的直播分享。 范小杰…

    2020-11-12
    8770
  • 转化变现相关词汇

    ROIReturn On Investment,投资回报率,指通过投资而应返回的价值,它涵盖了企业的获利目标,又称会计收益率、投资利润率 SSR展示发送比,show/send*100%,指一个广告发送后真正被展示给用户的几率 AdLoad广告负载量,AdLoad=Send/(Send+Impression) CTRClick Through Rate,点击到…

    2020-07-02
    8990
  • 用css绘制六边形的div

    用css绘制六边形的div

    2019-01-08
    2.9K0
  • chrome浏览器CSS字体大小小于12px不起作用解决方法

    chrome浏览器不能显示字体大小小于12px解决方法,CSS设置小于12px字体不起作用的解决方法篇。 无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解决方法。 针对低版本chrome谷歌浏览器设置一个校准字体大小样式: -webkit-text-size-adjust:none 用法: body{-web…

    2018-03-18
    1.7K0