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

具体如下:

<!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. IDEA Git回退到指定历史版本

    1.找到要回退的版本号(右击项目--> Git --> Show History -->选中要回退的版本-->Copy Revision Number): 2.打开idea的T ...

  2. idea 去除重复代码提醒

  3. Amoeba 实现MySQL读写分离

    Amoeba是一个以MySQL为底层数据存储,并对应用提供MySQL协议接口的proxy,它集中地响应应用的请求,依据用户事先设置的规则,将SQL请求发送到特定的数据库上执行.基于此可以实现负载均衡. ...

  4. sql server update语句

    update语句 --Update 语句用于修改表中的数据 语法:update 表名称 set 列名称 = 新值 where 列名称 = 某值 --更新某一行的若干列,set字句中用','隔开

  5. 15 Scrapy框架之CrawlSpider

    一.简介 CrawlSpider其实是Spider的一个子类,除了继承到Spider的特性和功能外,还派生除了其自己独有的更加强大的特性和功能.其中最显著的功能就是”LinkExtractors链接提 ...

  6. linux之信息查看

    在使用Linux操作系统的时候,有时候会需要了解当前使用的系统版本信息,特别是在给别人进行服务器部署运维的时候,准确的系统版本信息至关重要 查看linux内核版本信息: cat  /proc/vers ...

  7. 误删除/dec/zero,/dev/null

    误删除/dev/zero [root@MYSQL-MONGO145 dev]# mknod /dev/zero c 1 5[root@MYSQL-MONGO145 dev]# chmod 666 /d ...

  8. Delphi 键盘的编程

  9. 异常-User class threw exception: java.lang.IllegalStateException: Cannot call methods on a stopped SparkContext.

    1 详细信息 User class threw exception: java.lang.IllegalStateException: Cannot call methods on a stopped ...

  10. SSD学习笔记

    目标检测算法——SSD:Single Shot MultiBox Detector,是一篇非常经典的目标检测算法,十分值得阅读和进行代码复现,其论文地址是:https://arxiv.org/abs/ ...