如何觸發WEBKIT TRANSITION BOX中的橫幅廣告內容

我試圖在懸停展開DIV BOX>時將一些圖片（帶有超鏈接）放入一個盒子（5秒鐘後）完全打開。如何觸發WEBKIT TRANSITION BOX中的橫幅廣告內容

我已經做了一個非常糟糕的嘗試，通過創建一個zaxis並使內容出現在可摺疊的可展開框上。

<!DOCTYPE html> 
<html> 
<head> 


<style type="text/css"> 

div { 
width: 10px; 
height: 600px; 
background: rgba(55, 55, 55, .8); 
-webkit-transition-property: width; /* Safari */ 
-webkit-transition-duration: 4s; /* Safari */ 
-webkit-transition-delay: 2s; /* Safari */ 
transition-property: width; 
transition-duration: 5s; 
transition-delay: 0s; 
} 

html { 
background: url(BG1.jpg) no-repeat center top fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 


div:hover { 
width: 600px; 
} 

div.image55:after { 
content:url(http://placehold.it/350x150); 
} 

.style2 { 
text-align: right; 
font-family: "Calibri Light"; 
} 
.style3 { 
border-width: 0; 
} 

</style> 
</head> 
<body> 

<div class="style2"><br> 
<a href=""><img alt="" src="editorial.png" width="100" height="20"  
class="style3"></a></div> 
<div class="image55" style="position: absolute; left: 20px; top: 20px; 
z-index: 1"></div> 

</body> 
</html>

來源

2015-07-05 Sebastian Reed

我不知道我是否瞭解你。我做了一個Pen，舉了一個我認爲你想達到的例子。

告訴我，如果是你想要的。

下面是HTML

<div class="wrapper"> 
    <div class="blocks"> 
    <a href="#"> 
     <img src="http://placehold.it/350x150" width="350" height="150" alt="" /> 
    </a> 
    <a href="#"> 
     <img src="http://placehold.it/350x150" width="350" height="150" alt="" /> 
    </a> 
    </div> 
</div>

這裏是CSS。

body { 
    background-color: #fafafa; 
} 
.wrapper { 
    margin: 0 auto; 
    max-width: 1200px; 
} 
.blocks { 
    text-align: center; 
} 
.blocks a { 
    margin: 1em; 
    height: 150px; 
    position: relative; 
    display: inline-block; 
    border: 1px solid #c1c1c1; 
} 
.blocks a::after { 
    top: 0; 
    right: 0; 
    content: ''; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background-color: #fafafa; 
    -webkit-transition: all 5s linear; 
    transition: all 5s linear; 
} 
.blocks a:hover::after { 
    width: 0; 
    -webkit-transition: all 5s ease-in-out; 
    transition: all 5s ease-in-out; 
}

來源

2015-07-05 11:39:03

所以這正是我的意思。透明盒子會在5秒內在屏幕上打開，但是我無法看到圖片在透明盒子打開後不可見並且可見。

<html> 
<head> 


<style type="text/css"> 

div { 
width: 10px; 
height: 600px; 
background: rgba(55, 55, 55, .8); 
-webkit-transition-property: width; /* Safari */ 
-webkit-transition-duration: 4s; /* Safari */ 
-webkit-transition-delay: 2s; /* Safari */ 
transition-property: width; 
transition-duration: 5s; 
transition-delay: 0s; 
} 

.image1 { 
position: absolute; 
width:99px; 
height:150px; 
visibility:hidden; 
} 


html { 
background: url(BG1.jpg) no-repeat center top fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
    } 


    div:hover { 
    width: 98%; 
visibility:visible; 
    } 


    .style2 { 
text-align: right; 
font-family: "Calibri Light"; 
    } 
    .style3 { 
border-width: 0; 
    } 
    .style4 { 
font-family: "Times New Roman", Times, serif; 
color: #FFFFFF; 
    } 
    </style> 
    </head> 
    <body> 

    <p class="image1" style=" left: 200px; top: 200px; width: 99px; height: 
    150px;"><img src="../../../s102.jpg"></p> 

    <div class="style2"><br> 
<a href=""><img alt="" src="editorial.png" width="100" height="20"  
    class="style3"></a></div> 



    </body> 
    </html>

來源

2015-07-05 18:33:15

如何觸發WEBKIT TRANSITION BOX中的橫幅廣告內容

回答

相關問題