pageSwitch实现121种页面滚动过渡切换动画效果代码

代码语言:html

所属分类:布局界面

代码描述:pageSwitch实现121种页面滚动过渡切换动画效果代码

代码标签: pageSwitch 页面 过渡 动画 滚动

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">

<head>
   
<meta charset="UTF-8">
   
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />

   
<style type="text/css">
        body
,div{margin:0;padding:0;}
                html
,body{height:100%;background:black;}
               
/*body{background:#379EB6;}*/
               
#wrap{min-height:100%;height:100%;min-width:268px;overflow:hidden;}
               
#imgs{position:relative;width:320px;height:268px;margin:0 auto;overflow:hidden;border-radius:15px;top:50px;z-index:1;}
               
#imgs.visible{overflow:visible;}
               
#imgs div{overflow:hidden;}
               
#imgs img{width:100%;height:100%;display:block;}
               
#tssel{position:absolute;top:330px;left:50%;z-index:10;width:160px;margin-left:-80px;}
               
#navs{z-index:10;position:absolute;left:50%;top:145px;margin-left:180px;width:4px;}
               
#navs a{overflow:hidden;display:block;width:2px;height:20px;border:1px solid #fff;margin:0 0 4px;transition:background 600ms ease;}
               
#navs .active{background:#fff;}
       
   
</style>
</head>

<body>
   
<div id="wrap">

       
<div id="imgs">
           
<div><img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png" /></div>
           
<div><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" /></div>
           
<div><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png" /></div>

       
</div>
       
<div id="navs">
           
<a href="javascript:;" class="active"></a>
           
<a href="javascript:;"></a>
           
<a href="javascript:;"></a>
         
           
       
</div>
       
<select id="tssel">
               
<option value="">选择切页效果</option>
               
<option value="fade">fade</option>
               
<optgroup label="滚动效果">
                   
<option value="scroll">scroll</option>
                   
<option value="scroll3d">scroll3d&l.........完整代码请登录后点击上方下载按钮下载查看

网友评论0