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