久久资源网

css3页面滚动图片气泡特效

css3页面滚动图片气泡特效

2019-06-25 14:53:36 CSS3实例

售价:5.00积分 会员免费

特别声明:资源售价只是赞助,不代表代码或者素材本身点数。收取费用仅维持本站的日常运营所需!

css3页面滚动图片气泡特效

css3制作响应式的页面滚动,悬浮的图片气泡动画显示。这是一款简洁的网页动画布局展示特效。

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入部分

<div>
  <section class="content">
    <div class="poka-wrapper">
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
    </div>
    <div class="title-wrapper">
      <p>想象一下信息数字化</p>
    </div>
  </section>
  <section class="content">
    <div class="poka-wrapper">
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
    </div>
    <div class="title-wrapper">
      <p>想象一下,如果更多的动物有更多机会进入全球经济。</p>
    </div>
  </section>
  <section class="content">
    <div class="poka-wrapper">
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
    </div>
    <div class="title-wrapper">
      <p>想象一下,在一个新的全球网络上有一种新的全球货币。</p>
    </div>
  </section>
  <section class="content">
    <div class="poka-wrapper">
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
      <div class="poka-dot"></div>
    </div>
    <div class="title-wrapper">
      <p>我们认为钱应该是这样的。</p>
    </div>
  </section>
</div>

<script src="js/script.js"></script>

资源出处:https://www.moyublog.com/codes/9354.html

关注微信