【笔记】css3实现网页平滑过渡效果...
2024-09-04 12:01:55
参考：http://www.imooc.com/video/7142
未完。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 slide</title>
<!--适应设备大小-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--适应低级浏览器-->
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<!--导入css-->
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="container">
<div class="st-container">
<!--nav begin 导航开始-->
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">11111</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-2"/>
<a href="#st-panel-2">2222222</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-3"/>
<a href="#st-panel-3">3333333</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-4"/>
<a href="#st-panel-4">44444</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-5"/>
<a href="#st-panel-5">555</a>
<!--nav end content begin -->
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<p>222222222</p>
</section>
<section class="st-panel" id="st-panel-2">
<p>333333</p>
</section>
<section class="st-panel" id="st-panel-3">
<p>444444</p>
</section>
<section class="st-panel" id="st-panel-4">
<p>8888888</p>
</section>
<section class="st-panel" id="st-panel-5">
<p>777777</p>
</section>
</div>
</div>
</div>
</body>
</html>
body {
font-family: georgia,serif;
background: #ddd;
font-weight:;
font-size: 15px;
color: #333;
/*溢出隐藏*/
overflow: hidden;
/*字体更圆滑，一般用在英文字体上*/
-webkit-font-smoothing: antialiased;
}
/*链接样式*/
a {
text-decoration: none; /*取消下划线*/
color: #555;
}
/*定义一个清除浮动的类??*/
.clr {
width:;
height:;
overflow: hidden;
clear: both;
padding:;
margin:;
}
.st-container {
width: 100%;
height: 100%;
position: absolute;
left:;
top:;
}
/*共同样式*/
.st-container > input,
.st-container > a {
width: 20%;
height: 34px;
line-height: 34px;
/*永远固定在最底部*/
position: fixed;
bottom:;
}
.st-container > input {
/*把一个元素隐藏掉，消失掉*/
/*display: none;*/
/*占位隐藏*/
opacity: 0.1;
z-index:;
}
.st-container > a {
z-index:;
font-weight:;
font-size: 16px;
text-align: center;
background: #e23a6e;
color: white;
box-shadow: 1px 1px 1px rgba(151, 24, 64, 0.2);
}
#st-control-1, #st-control-1 + a {
left: 0%;
}
#st-control-2, #st-control-2 + a {
left: 20%;
}
#st-control-3, #st-control-3 + a {
left: 40%;
}
#st-control-4, #st-control-4 + a {
left: 60%;
}
#st-control-5, #st-control-5 + a {
left: 80%;
}
/*选中被选中的input的后面的那个a*/
.st-container input:checked + a {
background: #821134;
}
/*动态生成三角形*/
.st-container input:checked + a:after {
content: "";
width:;
height:;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color: #821134;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
}
/*鼠标划过*/
.st-container input:hover + a {
background: #AD244F;
}
.st-container input:checked:hover + a {
background: #821134;
}
/*内容*/
.st-scroll,
.st-panel {
width: 100%;
height: 100%;
/*relative?????????取消上面的overflow hidden就会显示出 顺序下来的5个*/
position: relative;
}
.st-scroll {
left:;
top:;
/*3d可以加速*/
-webkit-transform: translate3d(0, 0, 0);
}
2、参考：http://iwenku.net/?article_167.html
body {
scroll-behavior: smooth;
}
.catalog {
position: fixed;
top: 27%;
left: 82%;
z-index:;
box-shadow:0 0px 0px rgba(0,0,0,0.5);
border-radius: 10%;
padding: 10px;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
}
.catalog:hover {
box-shadow:0 10px 20px rgba(0,0,0,0.5);
transform: rotate(0deg);
transition: 0.6s ease-in-out;
}
scroll-behavior只有少数浏览器支持，
顺便记一下自己写的一个索引样式。。。
js权限没申请成功，css弄了半天也没实现，心累，就这样吧。。。
update：
申请成功了...
j继续弄，参考：https://blog.brain1981.com/410.html
update：
博客園代碼：截取其中的script和css即可。分别是箭头（copy自上面的url）和代码浮动（diy）：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cnblogs_code {
z-index: 11;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
border-radius: 2%;
padding: 10px;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
overflow: hidden;
} .cnblogs_code:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
transform: rotate(0deg);
transition: 0.6s ease-in-out;
} #returnTop {
background-color: #333;
width: 40px;
height: 40px;
display: block;
position: fixed;
line-height: 50px;
color: #fff;
right: 30px;
bottom: 30px;
} #returnTop_a {
position: absolute;
top: -2px;
left: 8px;
width: 0;
height: 0;
border-width: 10px 12px;
border-style: dashed dashed solid;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF;
} #returnTop_b {
position: absolute;
top: 18px;
left: 14px;
width: 12px;
height: 12px;
background: #FFF;
}
</style>
</head> <body>
<a id="returnTop" href="###" onclick="scrollPosition()">
<!--scrollPosition就是跳转调用的函数-->
<span id="returnTop_a"></span>
<span id="returnTop_b"></span>
</a> <script type="text/javascript">
function getScrollOffsets(_w) { //获取页面的滚动位置
_w = _w || window;
//for all and IE9+
if(_w.pageXOffset != null) return {
x: _w.pageXOffset,
y: _w.pageYOffset
};
//for IE678
var _d = _w.document;
if(document.compatMode == "CSS1Compat") return { //for IE678
x: _d.documentElement.scrollLeft,
y: _d.documentElement.scrollTop
};
//for other mode
return {
x: _d.body.scrollLeft,
y: _d.body.scrpllTop
};
} function getViewPortSize(_w) { //获取页面的窗口大小
_w = _w || window;
//for all and IE9+
if(_w.innerWidth != null) return {
x: _w.innerWidth,
y: _w.innerHeight
};
//for IE678
var _d = _w.document;
if(document.compatMode == "CSS1Compat") return { //for IE678
x: _d.documentElement.clientWidth,
y: _d.documentElement.clientHeight
};
//for other mode
return {
x: _d.body.clientWidth,
y: _d.body.clientHeight
};
} function scrollPosition(_obj) { //参数_obj可以是任何页面上存在的元素的id，或者是指定元素本身
var targetX, targetY;
if(!_obj) { //如果不指定锚点元素，就跳到页面顶端0，0位置
targetX = 0;
targetY = 0;
} else {
if(typeof(_obj) == "string") {
_obj = document.getElementById(_obj);
} else {
_obj = _obj
}
targetX = _obj.getBoundingClientRect().left + getScrollOffsets().x;
targetY = _obj.getBoundingClientRect().top + getScrollOffsets().y;
} //如果目标元素的位置在最后一屏，那就指定目标位置为页面底部
//如果目标元素的位置为负数，就指定目标位置为页面顶部
var maxTargetX = document.body.scrollWidth - getViewPortSize().x;
if(targetX >= maxTargetX) targetX = maxTargetX;
if(targetX < 0) targetX = 0;
var maxTargetY = document.body.scrollHeight - getViewPortSize().y;
if(targetY >= maxTargetY) targetY = maxTargetY;
if(targetY < 0) targetY = 0; var tempTimer = setInterval(function() {
var currentY = getScrollOffsets().y;
var currentX = getScrollOffsets().x;
//跳转位置的缓冲公式
var tempTargetY = currentY - (currentY - targetY) / 10;
var tempTargetX = currentX - (currentX - targetX) / 10;
//由于缓冲公式会生成小数，而scrollTo函数会省略小数点后面的数字，所以要对跳转的坐标做一些微调
if(Math.abs(tempTargetY - currentY) < 1) {
tempTargetY - currentY > 0 ? tempTargetY++ : tempTargetY--;
}
if(Math.abs(tempTargetX - currentX) < 1) {
tempTargetX - currentX > 0 ? tempTargetX++ : tempTargetX--;
}
//页面跳转
window.scrollTo(tempTargetX, tempTargetY);
//到达指定位置后清除一下Interval
if(Math.abs(getScrollOffsets().y - targetY) <= 2 && Math.abs(getScrollOffsets().x - targetX) <= 2) {
clearInterval(tempTimer);
window.scrollTo(targetX, targetY);
//console.log("done");
}
}, 10);
}
</script>
</body> </html>
最新文章
- 如何在VISIO 2010/2013 中关闭Shape protection(图形保护)
- 来聊聊apply和call
- logback.xml日志配置
- There is no getter for property named 'NULL' in ……
- easyui datagrid分页要点总结
- JSP页面显示乱码
- wireshark使用教程
- JS 鼠标事件大全
- tbr tbn tbc
- Angular this vs $scope $event事件系统
- leetcode Binary Tree Right Side
- Log4j 2翻译 Garbage-free Steady State Logging（稳定的以不会生成垃圾的状态来记录日志）
- python基础-循环
- db.properties是干什么用的
- 爬虫之xpath用法
- 【转】使用minizip解压缩多个文件（基于zlib）
- fb 4.7英文版 修改字体大小
- linux 配置阿里云yum库
- [AaronYang] 敏捷开发 教程目录
- Mac操作技巧
热门文章
- c# @符号后面对 双引号转义
- vi 的使用，很详细
- server r2 系统更新文件清理
- 笔记：C语言图形基本函数及实例五子棋游戏
- GIT 回退出错 Unlink of file 'xx' failed. Should I try again? (y/n) 解决办法
- win10下Import caffe时出现“ImportError: No module named google.protobuf.internal”的解决办法
- hdu1066(经典题)
- AngularJS 讲解,一 数据绑定
- 160801、BlockingQueue处理多线程
- 160706、Java HashMap工作原理及实现