|
|
|
|
|
今天看到CSDN的網(wǎng)頁右下角廣告圖片換了新效果,把原來的圖片縮進(jìn)效果換成了波紋擴(kuò)散效果,覺得挺有趣的,于是就把此廣告代碼拿下來,分享給有需要的人使用。
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ width:100%; height:100%; overflow:hidden; font-family:arial, "Microsoft Yahei", "Hiragino Sans GB", Tahoma, Arial, Helvetica, 'STHeiti';}
h1{ font-size:1.5em; }
.fixedIco, .fixedIco p::after{
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
-o-transition:all 200ms ease;
-ms-transition:all 200ms ease;
transition:all 200ms ease
}
@keyframes fixedAni{
0%{ transform:translate(-50%, -50%) scale( 1 ) ; opacity:.8; }
100%{ width:150px; height:150px; transform:translate(-50%, -50%) scale( 2 ); opacity:0; }
}
.fixedIco{ position:fixed; right:1em; bottom:1em; width:50px; height:50px; background:#D72602; border-radius:5px; display:flex; align-items:center; justify-content:flex-start; }
.fixedIco.active{ width:280px; height:40px; box-shadow:0 0 1em #D72602; }
.fixedIco.active .head{ display:none; }
.fixedIco a{ color:white; text-decoration:none; display:block; }
.fixedIco .head{ cursor:pointer; width:70px; position:absolute; left:-10px; height:70px; background:#D72602; border-radius:50%; display:flex; align-items:center; justify-content:center; background:white; border:solid 4px #D72602;}
.fixedIco .head img{ width:80%; }
.fixedIco p{ color:white; text-shadow:0 0 1px rgba(0,0,0,.5); flex:1; text-align:center; opacity:0; visibility:hidden; height:100%; line-height:40px; overflow:hidden; font-weight: 700; }
.fixedIco p::after{ display:block; content:''; position:absolute; width:0; height:0; opacity:0; border-radius:50%; background:white; left:50%; top:50%;
-webkit-animation:fixedAni 1.5s ease infinite;
animation:fixedAni 1.5s ease infinite;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
pointer-events:none;
}
.fixedIco p::before{ display:block; content:''; position:absolute; width:0; height:0; opacity:0; border-radius:50%; background:white; left:50%; top:50%;
-webkit-animation:fixedAni 1s ease infinite;
animation:fixedAni 1s ease infinite;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
pointer-events:none;
}
.fixedIco.active p{ opacity:1; visibility:visible; }
.closeBtn{ color:gray;display:none; cursor:pointer; background:red; position:absolute; right:-1em; top:-1em; width:14px; height:14px; line-height:14px; font-size:.8em; text-align:center; border-radius:50%; color:white; opacity:.7; }
.closeBtn.active{ display:block; }
.closeBtn:hover{ opacity:1; }
<div class='fixedIco active' id='fixedIco'>
<div id='closeBtn' class='closeBtn active'>×</div>
<div class='head' id='head'><img src='logo.png' alt='' /></div>
<p><a href="javascript:;" onclick="windowsopen()">卡卡網(wǎng)站速度診斷,快來試試吧</a></p>
</div>
<script type='text/javascript'>
+( function(){
'use strict' ;
var fixedIco = document.querySelector( '#fixedIco' ),
head = document.querySelector( '#head' ),
closeBtn = document.querySelector( '#closeBtn' ),
CLA_NAME = 'active',
timer = null ;
head.addEventListener( 'click', function(){
fixedIco.className = 'fixedIco ' + CLA_NAME ;
closeBtn.className = 'closeBtn ' + CLA_NAME ;
}, false ) ;
closeBtn.addEventListener( 'click', function(){
fixedIco.className = 'fixedIco' ;
closeBtn.className = 'closeBtn' ;
}, false ) ;
}() ) ;
</script>
<script>function windowsopen(){window.parent.location.;}</script>
1、圖片盒子高度、寬度CSS設(shè)置
.fixedIco.active{ width:280px; height:40px; box-shadow:0 0 1em #D72602; }
2、點(diǎn)擊“x”關(guān)閉后變小圖
點(diǎn)擊“x”關(guān)閉后,圖片縮到右邊變成小圖,下面的HTML代碼是指明小圖的地址logo.png。
<div class='head' id='head'><img src='logo.png' alt='' /></div>
3、去掉關(guān)閉圖標(biāo)“x”
如果你不允許關(guān)閉圖片,只需把下面的HTML代碼去掉即可。
<div id='closeBtn' class='closeBtn active'>×</div>
4、設(shè)置廣告文字
下面的HTML代碼是廣告文字,你可以改為自己的廣告詞。
<p><a href="javascript:;" onclick="windowsopen()">卡卡網(wǎng)站速度診斷,快來試試吧</a></p>
5、設(shè)置廣告文字顏色
下面CSS代碼設(shè)置廣告文字的顏色
.fixedIco a{ color:white; text-decoration:none; display:block; }
6、設(shè)置廣告文字大小等樣式
下面CSS代碼設(shè)置廣告文字大小等樣式
.fixedIco p{ color:white; text-shadow:0 0 1px rgba(0,0,0,.5); flex:1; text-align:center; opacity:0; visibility:hidden; height:100%; line-height:40px; overflow:hidden; font-weight: 1000; }
7、設(shè)置廣告鏈接
下面的HTML代碼是廣告鏈接,你可以改為自己的廣告鏈接。
<script>function windowsopen(){window.parent.location.;}</script>