[分享]css3手机特效代码

CSS3是一种能够让网页变得更加美观与动感的技术。其中，它能够为手机端的网页添加一些特效，让用户的使用体验更加好。下面我们就来看一下CSS3手机特效代码 / 1. 手机滑动特效 / // html部分...

CSS3是一种能够让网页变得更加美观与动感的技术。其中，它能够为手机端的网页添加一些特效，让用户的使用体验更加好。下面我们就来看一下CSS3手机特效代码

 /* 1. 手机滑动特效 */
  // html部分
  <div class="scroll">
   <ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
   </ul>
  </div>
  
  // CSS部分
  .scroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 2. 手机旋转特效 */
  // html部分
  <div class="rotate">
   <img src="image/sun.png" alt="阳光">
  </div>
  
  // CSS部分
  .rotate img {
    -webkit-animation: rotate 4s infinite linear;
    -moz-animation: rotate 4s infinite linear;
    -o-animation: rotate 4s infinite linear;
    animation: rotate 4s infinite linear;
  }
  
  @-webkit-keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  /* 3. 手机翻页特效 */
  // html部分
  <div class="page">
   <div class="page1"></div>
   <div class="page2"></div>
  </div>
  
  // CSS部分
  .page {
    width: 100%;
    height: 100%;
    -webkit-perspective: 600px;
    perspective: 600px;
  }
  
  .page1,
  .page2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
  }
  
  .page1 {
    background: #f00;
  }
  
  .page2 {
    background: #0f0;
    -webkit-transform: translateZ(-100px) rotateY(-180deg);
    transform: translateZ(-100px) rotateY(-180deg);
  }
  
  .page:hover .page1 {
    -webkit-transform: translateZ(-100px) rotateY(180deg);
    transform: translateZ(-100px) rotateY(180deg);
  }
  
  .page:hover .page2 {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  } 

通过以上CSS3手机特效代码，我们可以看到技术的神奇之处，不仅让手机端的网页变得更加美观与动感，同时也提高了用户的使用体验。希望这些示例对于开发者有所帮助。