3
我想幫助我可能會丟失的東西。我讀@keyframe尚不穩定,但我看到@keyframe在mozilla瀏覽器中的其他網站上使用。我試圖讓我的背景圖像簡單地從左向右滑動,當元素使用關鍵幀懸停時。@keyframe不適用於mozilla
注意:請在mozilla中運行以查看我的問題。
.page-content-wrap {
padding: 0;
}
main {
width: 100%;
margin: 0 auto;
}
main img {
width: 33%;
border-radius: 100px;
max-width: 204px;
}
.card {
box-shadow: 0 8px 16px 0 rgba(0, 15, 94, 0.8);
transition: 0.3s;
border-radius: 5px;
width: 100%;
min-width: 200px;
height: 150px;
display: table;
}
.review-container {
display: table-cell;
width: 100%;
vertical-align: middle;
text-align: center;
}
blockquote {
/* margin: 10px;*/
}
.even {
background-color: #3A3A3A;
/* text-align: right; */
}
.odd {
background-color: black;
}
main img {
/*margin: 15px;*/
width: auto;
}
main a:hover {
/*background-color: rgba(255,255,255, 0.5);*/
border-radius: 10px;
transition: 0.5s;
color: #639811;
}
.customer-review {
padding: 5px;
margin: 5%;
float: right;
}
.customer-review h4 {
width: 200px;
}
blockquote {
text-align: center;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes right-slide {
from {background-position-x: left;}
to {background-position-x: right;}
}
@-moz-keyframes right-slide {
from {background-position-x: left;}
to {background-position-x: right;}
}
/* Standard syntax */
@keyframes right-slide {
from {background-position-x: left;}
to {background-position-x: right;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes left-slide {
from {background-position-x: right;}
to {background-position-x: left;}
}
@-moz-keyframes left-slide {
from {background-position-x: right;}
to {background-position-x: left;}
}
/* Standard syntax */
@keyframes left-slide {
from {background-position-x: right;}
to {background-position-x: left;}
}
.card:hover {
box-shadow: 0 15px 100px 15px rgba(0, 0, 0, 1);
}
.customer-review:hover {
background-color: rgba(0,0,0,0.8);
border-radius: 5px;
transition: 0.5s;
}
.twitter-review:hover {
background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/f830cd82-e59c-4ab0-bbf4-497b9d8ef175.png) no-repeat #00ACED;
background-size: contain;
-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
animation-duration: 0.5s;
color: white;
}
.facebook-card:hover {
background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/04c88185-b51d-46b3-a68c-b08bfd1e4922.png) no-repeat #3B5998;
background-size: contain;
-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
animation-duration: 0.5s;
color: white;
}
.instagram-review:hover {
background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/22a66259-53bf-4ddb-83a4-7e31d27b4728.png) no-repeat #E4405F;
background-size: contain;
-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
color: white;
}
.even:hover {
-webkit-animation-name: left-slide; /* Chrome, Safari, Opera */
animation-name: left-slide;
background-position-x: left;
}
.odd:hover {
-webkit-animation-name: right-slide; /* Chrome, Safari, Opera */
-moz-animation-name: right-slide;
animation-name: right-slide;
background-position-x: right;
}
.card img {
height:200px
}
.float-right {
float: right;
}
.card {
height:150px;
}
.customer-review {
padding: 5px;
height: auto;
}
<main>
<a href="#">
<div class="card facebook-card odd" >
<div class="review-container">
<img class="float-left" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/5541016a-a570-404f-a28a-f13a4eb68708.jpg" alt="Facebook User">
<div class="customer-review">
<h4><b>Facebook User</b></h4>
<blockquote>
Here is where the facebook user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
</blockquote>
</div>
</div>
</div>
</a>
<a href="#">
<div class="card twitter-review even">
<div class="review-container">
<img class="float-left" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/35a6c672-b791-44d7-aae4-93e82e8c4ac4.jpg" alt="Twitter User">
<div class="customer-review">
<h4><b>Twitter User</b></h4>
<blockquote>
Here is where the twitter user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
</blockquote>
</div>
</div>
</div>
</a>
<a href="#">
<div class="card instagram-review odd">
<div class="review-container">
<img class="float-right" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/2434f0a4-306d-48a0-8803-2489c4976ab0.jpg" alt="Instagram User">
<div class="customer-review">
<h4><b>Instagram User</b></h4>
<blockquote>
Here is where the instagram user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
</blockquote>
</div>
</div>
</div>
</a>
</main>
感謝。整個「不穩定的東西來自https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes說:」這是一個實驗性技術 由於該技術的規格不穩定,請檢查兼容性表在各種瀏覽器中的使用。另外請注意,隨着規範的變化,實驗技術的語法和行爲在未來版本的瀏覽器中可能會發生變化,「但我剛剛提到,以防萬一需要它,不過我還是不確定。說明。 –