我在這裏查了很多其他問題,但找不到我的問題的答案。 我得到了一個div塊:在css選擇器之後,我在圖像上製作了一個漸變疊加層。 比我有一點不同的梯度覆蓋當有人去:盤旋div懸停後轉換漸變後的css
它的工作原理和梯度變化..但我無法得到工作與轉換css選擇器的這種變化的速度。
這是我的代碼..
.fotka-box::after {
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000',GradientType=0); /* ie6-9 */
-webkit-transition: all 1350ms ease-in-out;
-moz-transition: all 1350ms ease-in-out;
-o-transition: all 1350ms ease-in-out;
transition: all 1350ms ease-in-out;
display: block;
position: absolute;
top: 0;
right: 0;
height: 370px;
max-height: 100%;
left: 0;
pointer-events: none;
content: '';
}
.fotka-box:hover::after {
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* w3c */
}
什麼,我做錯了什麼? 感謝您的任何建議。
PS:我知道我可以使用不透明度,但我想改變漸變顏色和風格。不顯示從0不透明度爲1
請包括您的所有代碼。 –