iPhoneX的缺口滚动特效

一款iPhoneX的缺口滚动特效，根据iPhoneX最上面前额样式设计的文字列表滚动效果，会自动留出前额的宽度，可自由增删文字列表的内容。

分类：文字特效 > 文字滚动难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面的样式文件，代码如下：

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

页面的body部分，在div容器里设置一个ul无序列表即可，代码如下：

<div class="outer">
  <div class="inner">
    <ul>
      <li>SweeTango </li>
      <li>Pacific Rose</li>
      <li>SnapDragon</li>
      <li>Envy</li>
      <li>Koru (Plumac)</li>
      <li>Pink Lady (Cripps Pink)</li>
      <li>Honeycrisp</li>
      <li>Royal Gala</li>
      <li>Macoun</li>
      <li>McIntosh</li>
      <li>Autumn Glory</li>
      <li>Opal</li>
      <li>Rome</li>
      <li>Red Delicious</li>
      <li>Golden Delicious</li>
      <li>Cameo</li>
      <li>Granny Smith</li>
      <li>Rainier Gala</li>
      <li>SweeTango </li>
      <li>Pacific Rose</li>
      <li>SnapDragon</li>
      <li>Envy</li>
      <li>Koru (Plumac)</li>
      <li>Pink Lady (Cripps Pink)</li>
      <li>Honeycrisp</li>
      <li>Royal Gala</li>
      <li>Macoun</li>
      <li>McIntosh</li>
      <li>Autumn Glory</li>
      <li>Opal</li>
      <li>Rome</li>
      <li>Red Delicious</li>
      <li>Golden Delicious</li>
      <li>Cameo</li>
      <li>Granny Smith</li>
      <li>Rainier Gala</li>
      <li>SweeTango </li>
      <li>Pacific Rose</li>
      <li>SnapDragon</li>
      <li>Envy</li>
      <li>Koru (Plumac)</li>
      <li>Pink Lady (Cripps Pink)</li>
      <li>Honeycrisp</li>
      <li>Royal Gala</li>
      <li>Macoun</li>
      <li>McIntosh</li>
      <li>Autumn Glory</li>
      <li>Opal</li>
      <li>Rome</li>
      <li>Red Delicious</li>
      <li>Golden Delicious</li>
      <li>Cameo</li>
      <li>Granny Smith</li>
      <li>Rainier Gala</li>
      <li>SweeTango </li>
      <li>Pacific Rose</li>
      <li>SnapDragon</li>
      <li>Envy</li>
      <li>Koru (Plumac)</li>
      <li>Pink Lady (Cripps Pink)</li>
      <li>Honeycrisp</li>
      <li>Royal Gala</li>
      <li>Macoun</li>
      <li>McIntosh</li>
      <li>Autumn Glory</li>
      <li>Opal</li>
      <li>Rome</li>
      <li>Red Delicious</li>
      <li>Golden Delicious</li>
      <li>Cameo</li>
      <li>Granny Smith</li>
      <li>Rainier Gala</li>
    </ul>
    <div class="notch"></div>
  </div>
</div>

页面的底部，需引入必要的JS文件，来控制文字列表的滚动，代码如下：

<script type="text/javascript" src="js/index.js"></script>