技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSDN右下角广告图片波纹扩散效果【源码】

作者:admin    时间:2021-4-29 0:54:4    浏览:

今天看到CSDN的网页右下角广告图片换了新效果,把原来的图片缩进效果换成了波纹扩散效果,觉得挺有趣的,于是就把此广告代码拿下来,分享给有需要的人使用。

demodownload

CSS代码

*{ 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; }

HTML代码

<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()">卡卡网站速度诊断,快来试试吧</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.href='http://pagespeed.webkaka.com/';}</script>

execcodegetcode

代码解释

1、图片盒子高度、宽度CSS设置

.fixedIco.active{ width:280px; height:40px; box-shadow:0 0 1em #D72602; }

2、点击“x”关闭后变小图

点击“x”关闭后,图片缩到右边变成小图,下面的HTML代码是指明小图的地址logo.png。

<div class='head' id='head'><img src='logo.png' alt='' /></div>

3、去掉关闭图标“x”

如果你不允许关闭图片,只需把下面的HTML代码去掉即可。

<div id='closeBtn' class='closeBtn active'>×</div>

4、设置广告文字

下面的HTML代码是广告文字,你可以改为自己的广告词。

<p><a href="javascript:;" onclick="windowsopen()">卡卡网站速度诊断,快来试试吧</a></p>

5、设置广告文字颜色

下面CSS代码设置广告文字的颜色

.fixedIco a{ color:white; text-decoration:none; display:block; }

6、设置广告文字大小等样式

下面CSS代码设置广告文字大小等样式

.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、设置广告链接

下面的HTML代码是广告链接,你可以改为自己的广告链接。

<script>function windowsopen(){window.parent.location.href='http://pagespeed.webkaka.com/';}</script>

 

标签: 波纹扩散效果  
相关文章
    x
    • 站长推荐
    /* 左侧显示文章内容目录 */