CSS3里怎么实现首页穿墙广告效果
如果大家进过拉钩网的话一定会对他们的网站首页影响深刻，首页的穿墙广告效果是非常炫酷的，那么这个穿墙广告的效果怎么实现呢？今天我们就带大家来操作一下。用CSS3来实现穿墙效果的广告。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>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>相信看了以上代码你已经清楚了这种穿墙广告的奥秘。更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是CSS3里怎么实现首页穿墙广告效果的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undress AI Tool
免费脱衣服图片
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
什么是AutoPrefixer，它如何工作？
Jul 02, 2025 am 01:15 AM
Autoprefixer是一个根据目标浏览器范围自动为CSS属性添加厂商前缀的工具。1.它解决了手动维护前缀易出错的问题；2.通过PostCSS插件形式工作，解析CSS、分析需加前缀的属性、依配置生成代码；3.使用步骤包括安装插件、设置browserslist、在构建流程中启用；4.注意事项有不手动加前缀、保持配置更新、非所有属性都加前缀、建议配合预处理器使用。
您如何使用CSS对SVG进行动画动画？
Jun 30, 2025 am 02:06 AM
AnimatingSVGwithCSSispossibleusingkeyframesforbasicanimationsandtransitionsforinteractiveeffects.1.Use@keyframestodefineanimationstagesforpropertieslikescale,opacity,andcolor.2.ApplytheanimationtoSVGelementssuchas,,orviaCSSclasses.3.Forhoverorstate-b
什么是圆锥级函数？
Jul 01, 2025 am 01:16 AM
theconic-Gradient（）functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts，ProgressIndicators，colordichers，colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.
CSS教程专注于移动优先设计
Jul 02, 2025 am 12:52 AM
Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the
CSS教程，用于创建加载旋转器和动画
Jul 07, 2025 am 12:07 AM
创建CSS加载旋转器的方法有三种：1.使用边框的基本旋转器，通过HTML和CSS实现简单动画；2.使用多个点的自定义旋转器，通过不同延迟时间实现跳动效果；3.在按钮中添加旋转器，通过JavaScript切换类来显示加载状态。每种方法都强调了设计细节如颜色、大小、可访问性和性能优化的重要性，以提升用户体验。
CSS中使用@supports的功能检测是什么？
Jul 02, 2025 am 01:14 AM
prainuredetectionIncsssusissuse@supportScheckSifabRowsEsuppecifortSupecifortEfeatureBeforeApplyingReplyingStyles.1.itusesconditionalcsssssbasssbasedonproperty-valueperty-valuepairs，suessas@supports@supports@supports@supports（display：grid）
欧洲虚拟币交易平台排行榜2025年最新榜单TOP10盘点（最近更新）
Jul 11, 2025 pm 08:57 PM
2025年欧洲十大虚拟货币交易平台包括Binance、OKX、Coinbase等，依据合规性、安全性、费用、资产种类和用户体验评选。1. Binance：全球交易量最大，费率低，已获多国牌照；2. OKX：产品全面，技术强，已在法国注册；3. Coinbase：合规安全，适合初学者，在多国获许可；4. Gate.io：历史悠久，安全性高，在欧洲多国注册；5. Bitstamp：成立早，合规性强，受卢森堡监管；6. eToro：支持社交交易，多元化投资，受CySEC监管；7. Bitpanda：界
将CSS和JavaScript与HTML5结构有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript应通过语义化标签、合理加载顺序与解耦设计高效结合。1.使用HTML5语义化标签如、提升结构清晰度与可维护性，利于SEO和无障碍访问；2.CSS应置于中，使用外部文件并按模块拆分，避免内联样式与延迟加载问题；3.JavaScript推荐放在前引入，使用defer或async异步加载以避免阻塞渲染；4.减少三者间强依赖，通过data-*属性驱动行为、类名控制状态，统一命名规范提升协作效率。这些方法能有效优化页面性能与团队协作。
