嘿,我的鼠标悬停效果在谷歌浏览器中无法正常工作。参见GIF:https://giphy.com/gifs/GsUXBgcokM96zmlQkj。它可以在Firefox中使用。有人可以帮我在Chrome上运行它吗?我认为问题出在#flat的CSS中(js在这里并不重要)。
CodePen:https ://codepen.io/NesR0M/pen/KKMzvjO 。
var clicked = true;
function flattoZero(){
document.getElementById("flat").style.top = "0%";
document.getElementById("flat").style.left = "0%";
}
function flattotheRight(){
document.getElementById("flat").style.top = "1%";
document.getElementById("flat").style.left = "1%";
}
function flattotheLeft(){
document.getElementById("flat").style.top = "1%";
document.getElementById("flat").style.left = "-1%";
}
function burgerclick() {
const card = document.getElementById("flipable");
card.classList.toggle("flip-card-inner-active");
flattoZero();
setTimeout(function(){ flattotheLeft(); }, 500);
clicked = false;
}
function clickback() {
const card = document.getElementById("flipable");
card.classList.toggle("flip-card-inner-active");
flattoZero();
setTimeout(function(){ flattotheRight(); }, 500);
clicked = true;
}
function mouseOver() {
if(clicked){
flattoZero();
}
}
function mouseOut() {
if(clicked){
flattotheRight();
}
}
function mouseOverflipped() {
if(!clicked){
flattoZero();
}
}
function mouseOutflipped() {
if(!clicked){
flattotheLeft();
}
}
:root {
/*
--font-color: rgb(255, 238, 232);
--flat-color: rgb(255, 114, 67);
--main-background-color:rgb(255, 213, 197);
*/
/*
--font-colorF: rgb(255, 255, 255);
--flat-colorF: rgb(255, 242, 67);
--main-background-colorF:rgb(42, 42, 44);
*/
--font-colorF: rgb(255, 255, 255);
--flat-colorF: rgb(67, 170, 255);
--main-background-colorF:rgb(42, 42, 44);
--font-color: rgb(255, 255, 255);
--font-hover-color: white;
--font-underline-color: white;
--nav-font-color: rgb(65, 65, 65);
--burger-color: var(--font-color);
--shadow-color: rgba(58, 58, 58, 0.2);
--main-background-color: rgb(175, 175, 175);
}
body{
/*Futura PT Light*/
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: italic;
color: var(--font-colorF);
background-color: var(--main-background-colorF);
width: 100%;
height: 100vh;
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
transition: all 400ms ease-out;
}
#desktop{
height: 100%;
width: auto;
}
.leftcenter {
position: absolute;
font-size: 12vmin;
top: 50%;
left: 29%;
transform: translate(-50%, -50%);
transition: 0.30s;
}
.rightcenter {
position: absolute;
font-size: 12vmin;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
transition: 0.30s;
}
.burger{
position: absolute;
top: 5%;
left: 2.5%;
cursor: pointer;
}
.burger div{
height: 4px;
background-color: var(--burger-color);
margin: 5px;
border-radius: 50px;
transition: 0.3s;
}
.line1{
width: 36px;
}
.line2{
width: 24px;
}
.line3{
width: 30px;
}
.burger:hover div{
width: 36px;
}
.nav{
list-style-type:none;
font-size: 6vmin;
font-weight: 500;
}
.flip-card {
perspective: 10000px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.flip-card-inner {
position: relative;
height: 80%;
width: 90%;
max-width: 162vh;
transition-timing-function: ease;
transition-duration: 0.5s;
transform-style: preserve-3d;
}
.flip-card-inner-active {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
background-color: black;
position: absolute;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
overflow: hidden;
box-shadow: none;
}
.flip-card-front {
display: flex;
align-items: center;
justify-content: center;
}
.flip-card-back {
display: flex;
align-items: center;
justify-content: center;
color: var(--font-color);
transform: rotateY(180deg);
}
ul {
display: flex;
flex-direction: column;
list-style-type: none;
align-items: start;
justify-content: space-between;
}
ul li {
padding: 6px 0;
}
ul li p {
cursor: pointer;
position: relative;
display: block;
padding: 4px 0;
font-weight: 500;
font-size: 4vh;
color: var(--nav-font-color);
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
font-family: 'Raleway', sans-serif;
font-size: 4vh;
text-transform: lowercase;
}
ul li p::after {
position: absolute;
content: "";
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: var(--font-underline-color);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
ul li p:hover {
color: var(--font-hover-color);
}
ul li p:hover::after {
transform: scaleX(1);
transform-origin: left;
}
#flat{
position: absolute;
height: 100%;
width: 100%;
top: 1%;
left: 1%;
background-color: var(--flat-colorF);
z-index: -5;
transition: 0.3s;
}
@media screen and (max-width: 100vh){
.leftcenter {
font-size: 6vmin;
top: 8.2%;
left: 62%;
}
.rightcenter{
font-size: 6vmin;
top: 8.2%;
left: 85%;
}
}
<div class="flip-card">
<div class="flip-card-inner" id="flipable">
<div class="flip-card-front">
<img id="desktop" src="img/_1080374.jpg" alt="Picture">
<div class="leftcenter">NAME</div>
<div class="rightcenter">NAME</div>
<div class="burger" onclick="burgerclick()" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="flip-card-back">
<ul>
<li><p id="home" onclick="clickback()" onmouseover="mouseOverflipped()" onmouseout="mouseOutflipped()">BACK</p></li>
<li><p>ABOUT ME</p></li>
<li><p>PROJECTS</p></li>
<li><p>CONTACT</p></li>
</ul>
</div>
<div id="flat"></div>
</div>
</div>
<script src="js/script.js"></script>
看起来即使旋转后,卡的正面也位于卡的背面正面,正好位于左侧(这就是为什么您可以将鼠标悬停在右侧)。一个快速的解决方法是translate3d(0, 0, 1px)
在.flip-card-back
元素之间的两个面之间添加一些空间:
var clicked = true;
function flattoZero(){
document.getElementById("flat").style.top = "0%";
document.getElementById("flat").style.left = "0%";
}
function flattotheRight(){
document.getElementById("flat").style.top = "1%";
document.getElementById("flat").style.left = "1%";
}
function flattotheLeft(){
document.getElementById("flat").style.top = "1%";
document.getElementById("flat").style.left = "-1%";
}
function burgerclick() {
const card = document.getElementById("flipable");
card.classList.toggle("flip-card-inner-active");
flattoZero();
setTimeout(function(){ flattotheLeft(); }, 500);
clicked = false;
}
function clickback() {
const card = document.getElementById("flipable");
card.classList.toggle("flip-card-inner-active");
flattoZero();
setTimeout(function(){ flattotheRight(); }, 500);
clicked = true;
}
function mouseOver() {
if(clicked){
flattoZero();
}
}
function mouseOut() {
if(clicked){
flattotheRight();
}
}
function mouseOverflipped() {
if(!clicked){
flattoZero();
}
}
function mouseOutflipped() {
if(!clicked){
flattotheLeft();
}
}
:root {
/*
--font-color: rgb(255, 238, 232);
--flat-color: rgb(255, 114, 67);
--main-background-color:rgb(255, 213, 197);
*/
/*
--font-colorF: rgb(255, 255, 255);
--flat-colorF: rgb(255, 242, 67);
--main-background-colorF:rgb(42, 42, 44);
*/
--font-colorF: rgb(255, 255, 255);
--flat-colorF: rgb(67, 170, 255);
--main-background-colorF:rgb(42, 42, 44);
--font-color: rgb(255, 255, 255);
--font-hover-color: white;
--font-underline-color: white;
--nav-font-color: rgb(65, 65, 65);
--burger-color: var(--font-color);
--shadow-color: rgba(58, 58, 58, 0.2);
--main-background-color: rgb(175, 175, 175);
}
body{
/*Futura PT Light*/
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: italic;
color: var(--font-colorF);
background-color: var(--main-background-colorF);
width: 100%;
height: 100vh;
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
transition: all 400ms ease-out;
}
#desktop{
height: 100%;
width: auto;
}
.leftcenter {
position: absolute;
font-size: 12vmin;
top: 50%;
left: 29%;
transform: translate(-50%, -50%);
transition: 0.30s;
}
.rightcenter {
position: absolute;
font-size: 12vmin;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
transition: 0.30s;
}
.burger{
position: absolute;
top: 5%;
left: 2.5%;
cursor: pointer;
}
.burger div{
height: 4px;
background-color: var(--burger-color);
margin: 5px;
border-radius: 50px;
transition: 0.3s;
}
.line1{
width: 36px;
}
.line2{
width: 24px;
}
.line3{
width: 30px;
}
.burger:hover div{
width: 36px;
}
.nav{
list-style-type:none;
font-size: 6vmin;
font-weight: 500;
}
.flip-card {
perspective: 10000px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.flip-card-inner {
position: relative;
height: 80%;
width: 90%;
max-width: 162vh;
transition-timing-function: ease;
transition-duration: 0.5s;
transform-style: preserve-3d;
}
.flip-card-inner-active {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
background-color: black;
position: absolute;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
overflow: hidden;
box-shadow: none;
}
.flip-card-front {
display: flex;
align-items: center;
justify-content: center;
}
.flip-card-back {
display: flex;
align-items: center;
justify-content: center;
color: var(--font-color);
transform: rotateY(180deg) translate3d(0, 0, 1px);
}
ul {
display: flex;
flex-direction: column;
list-style-type: none;
align-items: start;
justify-content: space-between;
}
ul li {
padding: 6px 0;
}
ul li p {
cursor: pointer;
position: relative;
display: block;
padding: 4px 0;
font-weight: 500;
font-size: 4vh;
color: var(--nav-font-color);
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
font-family: 'Raleway', sans-serif;
font-size: 4vh;
text-transform: lowercase;
}
ul li p::after {
position: absolute;
content: "";
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: var(--font-underline-color);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
ul li p:hover {
color: var(--font-hover-color);
}
ul li p:hover::after {
transform: scaleX(1);
transform-origin: left;
}
#flat{
position: absolute;
height: 100%;
width: 100%;
top: 1%;
left: 1%;
background-color: var(--flat-colorF);
z-index: -5;
transition: 0.3s;
}
@media screen and (max-width: 100vh){
.leftcenter {
font-size: 6vmin;
top: 8.2%;
left: 62%;
}
.rightcenter{
font-size: 6vmin;
top: 8.2%;
left: 85%;
}
}
<div class="flip-card">
<div class="flip-card-inner" id="flipable">
<div class="flip-card-front">
<img id="desktop" src="img/_1080374.jpg" alt="Picture">
<div class="leftcenter">NAME</div>
<div class="rightcenter">NAME</div>
<div class="burger" onclick="burgerclick()" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="flip-card-back">
<ul>
<li><p id="home" onclick="clickback()" onmouseover="mouseOverflipped()" onmouseout="mouseOutflipped()">BACK</p></li>
<li><p>ABOUT ME</p></li>
<li><p>PROJECTS</p></li>
<li><p>CONTACT</p></li>
</ul>
</div>
<div id="flat"></div>
</div>
</div>
<script src="js/script.js"></script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句