代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

博客logo圖片一閃而過CSS特效

來源:未知 發布時間:2019-03-30熱度:我要評論
有朋友問我要重慶SEO博客的logo圖片一閃而過的動態效果,這個其實也是找來的,作為好學的前端,就分享給大家。 用到了偽類before,CSS3的animation。 !DOCTYPE htmlhtmlheadtitle圖片效果/titlestyle type=text/css.banner{overflow:hidden;}.banner img{float:left;wi...

織夢模板免費下載,無需注冊無需充值

       有朋友問我要秀站網博客的logo圖片一閃而過的動態效果,這個其實也是找來的,作為好學的前端,就分享給大家。

一閃而過CSS

       用到了偽類before,CSS3的animation。

<!DOCTYPE html>
<html>
<head>
<title>圖片效果</title>
<style type="text/css">
.banner{overflow:hidden;}
.banner img{float:left;width:200px;height:55px;background:none}
.banner img:hover{width:201px;height:56px}
.banner .logo{display:block;float:left;width:200px; height:50px}
.banner .logo:before{
content:"";
position: absolute;
left: -600px;
top: -600px;
width: 200px;
height: 15px;outline:px solid red;
background-color: rgba(255,255,255,.6);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 2s ease-in 2s infinite;
-o-animation: searchLights 2.s ease-in 2s infinite;
animation: searchLights 2s ease-in 2s infinite;
}
@-webkit-keyframes searchLights {
0% { left: -200px; top: 0; }
to { left: 220px; top: 100px; }
}
@-o-keyframes searchLights {
0% { left: -200px; top: 0; }
to { left: 220px; top: 100px; }
}
@-moz-keyframes searchLights {
0% { left: -200px; top: 0; }
to { left: 220px; top: 100px; }
}
@keyframes searchLights {
0% { left: -200px; top: 0; }
to { left: 220px; top: 100px; }
}
</style>
</head>
<body>
 <p class="banner">
  <h1>
   <a href="http://www.vi586.com" class="logo">
    <img src="http://www.vi586.com/images/logo.png" height="54" width="216" alt="秀站網秀站網">
   </a>
  </h1>
 </p>
</body>
</html>

本文地址:http://www.alolpiu.com.cn/news/1384.html

責任編輯:秀站網

    發表評論

    評論列表(條)

      新时时彩中奖怎么查