简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - css怎么解决hover鼠标移除后的效果
大家讲道理
大家讲道理 2017-04-17 15:24:39
0
3
977

想要实现背景图片鼠标移入左右翻变换背景图的动效，但是移出的时候想要去除掉翻转，直接把背景图片换回来，捣鼓了许多都不知道这么弄，就大神临摹求解。。。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D</title>
  <style>
   ul li{
    list-style: none;
    cursor: pointer;
    position: relative;
  }
  .flipBtn,  .flipBtn_face{
    position: absolute;
    width:167px;
    height:116px;
  }
  .flipBtn {    
    transition: transform 0.4s;  
    transform-style: preserve-3d;  
    cursor: pointer;
    position: relative;
    float: left;
  }
  .flipBtn_front{
    backface-visibility: hidden;
  }
  .flipBtn_front{
    width:151px;
    height:100px;
    margin:8px;
    background:url(./image/pic00.jpg) no-repeat;
  }
  .flipBtn_back{
    width:151px;
    height:100px;
    margin:8px;
    background:url(./image/pic01.jpg) no-repeat;

  }
  .flipBtn_mid.flipBtn_face{
    transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
  }
  .flipBtn:hover{
    transform:rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
  }
  </style>
</head>
<body>
  <ul class="flipBtnWrapper">
    <li class="flipBtn">
      <a class="flipBtn_face flipBtn_back"></a>
      <p class="flipBtn_face flipBtn_mid"></p>
      <p class="flipBtn_face flipBtn_front"></p>
    </li>
  </ul>
</body>
</html>
大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

Antworte allen(3)
伊谢尔伦
伊谢尔伦2017-04-17 15:26:39 3 Etage

你是想hover的时候有反转的效果，而移开时直接变换没有反转？那你把transition这个属性放在hover里就行了

Wie +0
Antwort hinzufügen
左手右手慢动作
左手右手慢动作2017-04-17 15:26:39 2 Etage

效果预览：http://codepen.io/zengkan0703...
这是我实现的代码，不知道是不是你想要的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background:url(http://www.w3school.com.cn/i/site_photoref.jpg) no-repeat;
      transition: transform 0.5s linear ,background-image 0s 0.25s;
      background-size: cover;
    }
    .box:hover{
      transform: rotateY(180deg);
      transform-origin: center;
      background-image: url(http://www.w3school.com.cn/i/site_photoqe.jpg);

    }
  </style>
</head>
<body>
    <p class="box"></p>
</body>
</html>

实现原理其实很简单，主要是用 css3 的过渡 transition。动画分为两步：

  1. 元素翻转 180 度

  2. 在翻转到 90 度的 时候，更换背景图片的 url。

这里面需要注意的是，翻转动画的过渡时间曲线应该用 “linear”，这样才能保证这个动画是均匀进行的，就能够控制好翻转 90 度的时机。

Wie +0
Antwort hinzufügen
巴扎黑
巴扎黑2017-04-17 15:26:39 1 Etage

把transition写在.flipBtn:hover{}里面 在.flipBtn{}加上transition：none;

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！