㈠分享一组很有趣的代码：

具体如下：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>穿墙广告</title>

<style>

       *{

          margin:0;

          padding:0;

          list-style:none;

        }

      ul{

          overflow:hidden;

          width:630px;

          margin:100px auto;

        }

       ul li{

              float:left;

              position:relative;

              width:200px;

              height:200px;

              background:#ccc;

              margin:5px;

              overflow:hidden;

            }

      ul li span{

                  position:absolute;

                  width:100%;

                  height:100%;

                  background:rgba(255,0,0,0.3);

                  left:-200px;

                  top:0;

                }

</style>

<script>

         function getStyle(obj,sName){

         return (obj.currentStyle||getComputedStyle(obj,false))[sName];

         }

         function move(obj,json,options){

         options = options||{};

         options.duration = options.duration||700;

         options.easing = options.easing||'ease-out';

         var start = {};

         var dis = {};

         for(var name in json){

                   start[name] = parseFloat(getStyle(obj,name));

                   dis[name] = json[name]-start[name];

         }

         var count = Math.floor(options.duration/30);

         var n = 0;

         clearInterval(obj.timer);

         obj.timer = setInterval(function(){

                   n++;

                   for(var name in json){

                            switch(options.easing){

                                     case 'linear':

                                               var cur = start[name]+dis[name]*n/count;

                                               break;

                                     case 'ease-in':

                                               var a = n/count;

                                               var cur = start[name]+dis[name]*Math.pow(a,3);

                                               break;

                                     case 'ease-out':

                                               var a = 1-n/count;

                                               var cur = start[name]+dis[name]*(1-Math.pow(a,3));

                                               break;

                            }

                            if(name=='opacity'){

                                     obj.style.opacity = cur;

                                     obj.style.filter = 'alpha(opacity:'+cur*100+')';

                            }else{

                                     obj.style[name] = cur+'px';

                            }

                   }

                   if(n==count){

                            clearInterval(obj.timer);

                            options.complete&&options.complete();

                   }

         },30);

}

         function a2d(n){

         return n*180/Math.PI;

}

function hoverDir(ev,obj){

         var a = ev.clientX-obj.offsetLeft-obj.offsetWidth/2;

         var b = obj.offsetTop+obj.offsetHeight/2-ev.clientY;

         return Math.round((a2d(Math.atan2(b,a))+180)/90)%4;

}

function through(obj){

         var oS = obj.children[0];

         obj.onmouseenter = function(ev){

                   var oEvent = ev||event;

                   var dir = hoverDir(oEvent,obj);

                   switch(dir){

                            case 0:

                                     //左

                                     oS.style.left = '-200px';

                                     oS.style.top = 0;

                                     break;

                            case 1:

                                     //下

                                     oS.style.left = 0;

                                     oS.style.top = '200px';

                                     break;

                            case 2:

                                     //右

                                     oS.style.left = '200px';

                                     oS.style.top = 0;

                                     break;

                            case 3:

                                     //上

                                     oS.style.left = 0;

                                     oS.style.top = '-200px';

                                     break;

                   }

                   move(oS,{left:0,top:0});

         };

         obj.onmouseleave = function(ev){

                   var oEvent = ev||event;

                  var dir = hoverDir(oEvent,obj);

                   switch(dir){

                            case 0:

                                     move(oS,{left:-200,top:0});

                                     break;

                            case 1:

                                     move(oS,{left:0,top:200});

                                     break;

                            case 2:

                                     move(oS,{left:200,top:0});

                                     break;

                            case 3:

                                     move(oS,{left:0,top:-200});

                                     break;

                   }

         };

}

window.onload = function(){

         var aLi = document.getElementsByTagName('li');

         for(var i=0;i<aLi.length;i++){

                   through(aLi[i]);

         }

};

</script>

</head>

<body>

         <ul>

                   <li><span></span></li>

                   <li><span></span></li>

                   <li><span></span></li>

                   <li><span></span></li>

                   <li><span></span></li>

                   <li><span></span></li>

         </ul>

</body>

</html>

㈡部分效果图如下：

第一幅：

第二幅：

第三幅：

第四幅：

第五幅：

还有更多的效果，那就去敲敲代码，仔细去看相关的效果了。

来源：https://www.php.cn/css-tutorial-381739.html

CSS3实现穿墙广告效果的更多相关文章

  1. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  2. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  3. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  5. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  6. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  7. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  8. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  9. CSS3实现时间轴效果

    原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...

随机推荐

  1. flask_script

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  2. idea自动化部署插件 Alibaba Cloud Toolkit 使用记录

    官方安装文档和使用说明 https://help.aliyun.com/product/29966.html?spm=a2c4g.11186623.6.540.6efa6029JhlPfx 是什么? ...

  3. （一）使用twisted Deferred

    一.开篇 为什么是twisted,twisted作为一个python网络编程框架,出道早,但一直不温不火,这几年和tornado比起来,更是近乎销声匿迹:但作为初学者,觉得twisted还是有很多优点 ...

  4. javase-整数变量的交换

    public class Operator { public static void main(String[] args) { int a=10; int b=20; System.out.prin ...

  5. ABC050D/ARC066D Xor Sum

    题目链接 题目大意 可表为 $(a \xor b, a + b)$ 的二元组有多少个? $a, b$ 满足下列约束条件: ① $a, b$ 是非负整数: ② $a + b \le N$,$N$ 是给定 ...

  6. myeclipse中jpa的安装以及jpa reverse engining

    myeclipse中jpa的安装以及jpa reverse engining 安装 右击 Configure Facets, Install JPA jpa reverse engining 1.db ...

  7. 【Java】Java程序报错：EXCEPTION_ACCESS_VIOLATION (0xc0000005)

    运行Java程序的时候,报错:EXCEPTION_ACCESS_VIOLATION (0xc0000005): 根据原网页的说明: EXCEPTION_ACCESS_VIOLATION In rare ...

  8. Dockerfile安装jdk1.8 、部署java项目

    基础指令 FROM 基于哪个镜像MAINTAINER 用来写备注信息,例如作者.日期等.COPY 复制文件进入镜像(只能用相对路径,不能用绝对路径)ADD 复制文件进入镜像(可以用绝对路径,假如是压缩 ...

  9. MySQL性能优化(一)：优化方式

    原文:MySQL性能优化(一):优化方式 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/v ...

  10. centos配置vsftp，ftp服务

    1.安装vsftp 1.1.安装vsftp,测试安装的vsftpd的版本是:vsftpd.x86_64 0:3.0.2-11.el7_2 yum -y install vsftpd 1.2.修改配置文 ...