1. 首页
  2. 问答
  3. CSS - 翻转悬停效果只发生一次

CSS - 翻转悬停效果只发生一次

2017-09-25 31 views
0

我与flip-hover效果的网站有section。客户询问flip是否可以限制为从front-to-back开始一次自动翻转，然后back-to-front一旦光标被移除并且任何未来的flips只发生在click。基本上他们不希望行动自动发生，只是每次实地考察一次。我认为他们认为，如果用户在浏览网站时发生这种情况，它可能会有点让人讨厌。 这是可能的，如果是这样，我该怎么做？CSS - 翻转悬停效果只发生一次

下面的代码，因为它代表 -

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800); 
 
body { 
 
    font-family: 'Montserrat', sans-serif !important; 
 
} 
 

 
#whatwedo { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 

 
/* Parallax flipping cards - Codepen */ 
 

 

 
/* *{ 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
} */ 
 

 
h1 { 
 
    font-size: 3rem; 
 
    font-family: 'Montserrat'; 
 
    font-weight: normal; 
 
    color: #000; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding-bottom: 0px; 
 
} 
 

 
.container-fluid { 
 
    /* width: 90%; */ 
 
    margin: 0px auto; 
 
    /* max-width: 80rem; */ 
 
} 
 

 
.cols { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 

 
.col-sm-3 { 
 
    /* width: calc(25% - 2rem); */ 
 
    /* margin: 1rem; */ 
 
    height: 300px; 
 
    width: 300px; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
    /* padding: 10px; */ 
 
    cursor: pointer; 
 
} 
 

 
.container { 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
} 
 

 
.front, 
 
.back { 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    text-align: center; 
 
    /* size of box */ 
 
    min-height: 300px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    color: #000; 
 
    font-size: 1rem; 
 
} 
 

 
.back { 
 
    /* background: #fff; 
 
    background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: linear-gradient(45deg, #cedce7 0%,#596a72 100%); */ 
 
} 
 

 
.front:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 300px; 
 
    content: ''; 
 
    display: block; 
 
    /* background shade - was .6 originally */ 
 
    opacity: .; 
 
    background-color: #fff; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    border-radius: 10px; 
 
    border: 0px solid; 
 
} 
 

 
.container:hover .front, 
 
.container:hover .back { 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
} 
 

 
.back { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    font-size 1rem; 
 
    text-align: left; 
 
} 
 

 
.inner { 
 
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    top: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    padding: 2rem; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    outline: 1px solid transparent; 
 
    -webkit-perspective: inherit; 
 
    perspective: inherit; 
 
    z-index: 2; 
 
} 
 

 
.container .back { 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container .front { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container:hover .back { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container:hover .front { 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.front .inner p { 
 
    font-size: 3rem; 
 
    margin-bottom: 2rem; 
 
    position: relative; 
 
} 
 

 
.front .inner p:after { 
 
    content: ''; 
 
    width: 4rem; 
 
    position: absolute; 
 
    background: #000; 
 
    display: block; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    bottom: ; 
 
}
<section id="whatwedo"> 
 
    <div class="container-fluid"> 
 
    <h1>What we do</h1> 
 

 
    <div class="cols"> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Identity</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Graphic Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Editorial Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Guidelines</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Print Management</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Signage</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Creative Direction</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Illustration & Animation</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

来源

2017-09-25 Mike.Whitehead

+0

创建类的一些类和移动的动画吧。由JavaScript删除类，并设置一些类，以检查是否mouserover是发生或不 –

+2

控制由JS动画。完成后移除悬停attr并将一个点击事件绑定到它。 – Aslam

回答

1

这应该帮助您开始。

第一部作品上徘徊。之后，在点击:)

var containers = document.querySelectorAll('.container'); 
 

 
containers.forEach(container => { 
 

 
    container.addEventListener('mouseenter', function() { 
 
    if (!container.classList.contains('flipcomplete')) { 
 
     container.classList.add('flipped'); 
 
    } 
 

 
    }); 
 
    container.addEventListener('mouseleave', function() { 
 
    if (!container.classList.contains('flipcomplete')) { 
 
     container.classList.remove('flipped'); 
 
     container.classList.add('flipcomplete'); 
 

 
    } 
 
    }); 
 
    
 

 
container.addEventListener('click', function() { 
 
    container.classList.toggle('flipped'); 
 

 
    }); 
 

 
});
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800); 
 
body { 
 
    font-family: 'Montserrat', sans-serif !important; 
 
} 
 

 
#whatwedo { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 

 
/* Parallax flipping cards - Codepen */ 
 

 

 
/* *{ 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
} */ 
 

 
h1 { 
 
    font-size: 3rem; 
 
    font-family: 'Montserrat'; 
 
    font-weight: normal; 
 
    color: #000; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding-bottom: 0px; 
 
} 
 

 
.container-fluid { 
 
    /* width: 90%; */ 
 
    margin: 0px auto; 
 
    /* max-width: 80rem; */ 
 
} 
 

 
.cols { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 

 
.col-sm-3 { 
 
    /* width: calc(25% - 2rem); */ 
 
    /* margin: 1rem; */ 
 
    height: 300px; 
 
    width: 300px; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
    /* padding: 10px; */ 
 
    cursor: pointer; 
 
} 
 

 
.container { 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
} 
 

 
.front, 
 
.back { 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    text-align: center; 
 
    /* size of box */ 
 
    min-height: 300px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    color: #000; 
 
    font-size: 1rem; 
 
} 
 

 
.back { 
 
    /* background: #fff; 
 
    background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: linear-gradient(45deg, #cedce7 0%,#596a72 100%); */ 
 
} 
 

 
.front:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 300px; 
 
    content: ''; 
 
    display: block; 
 
    /* background shade - was .6 originally */ 
 
    opacity: .; 
 
    background-color: #fff; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    border-radius: 10px; 
 
    border: 0px solid; 
 
} 
 

 
.container:hover .front, 
 
.container:hover .back { 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
} 
 

 
.back { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    font-size 1rem; 
 
    text-align: left; 
 
} 
 

 
.inner { 
 
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    top: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    padding: 2rem; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    outline: 1px solid transparent; 
 
    -webkit-perspective: inherit; 
 
    perspective: inherit; 
 
    z-index: 2; 
 
} 
 

 
.container .back { 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container .front { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container.flipped .back { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container.flipped .front { 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.front .inner p { 
 
    font-size: 3rem; 
 
    margin-bottom: 2rem; 
 
    position: relative; 
 
} 
 

 
.front .inner p:after { 
 
    content: ''; 
 
    width: 4rem; 
 
    position: absolute; 
 
    background: #000; 
 
    display: block; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    bottom: ; 
 
}
<section id="whatwedo"> 
 
    <div class="container-fluid"> 
 
    <h1>What we do</h1> 
 

 
    <div class="cols"> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Identity</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Graphic Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Editorial Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Guidelines</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Print Management</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Signage</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Creative Direction</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Illustration & Animation</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

来源

2017-09-25 11:15:14 Aslam

+0

嗨，哥们，非常感谢昨天在这里的答复。有趣的事情，但是，当我尝试并实施到我的文本编辑器文件的JavaScript不起作用。我在这里做了另一个Q - https://stackoverflow.com/q/46406549/3521315 - 你能发现什么可能会阻止它吗？ –

0

如果您在使用jQuery只使用库 “jQuery的翻转” 没问题。

来源

2017-09-25 13:01:53

相关问题

 相关问题