【笔记】css3实现网页平滑过渡效果...
参考：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>
【笔记】css3实现网页平滑过渡效果...的更多相关文章
- 《CSS3专业网页开发指南》笔记
书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著 李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 ...
- 学习笔记 第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1 使用结构标签 在制作网页时,不仅需要使用< ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- python笔记之提取网页中的超链接
python笔记之提取网页中的超链接 对于提取网页中的超链接,先把网页内容读取出来,然后用beautifulsoup来解析是比较方便的.但是我发现一个问题,如果直接提取a标签的href,就会包含jav ...
- 阅读OReilly.Web.Scraping.with.Python.2015.6笔记---找出网页中所有的href
阅读OReilly.Web.Scraping.with.Python.2015.6笔记---找出网页中所有的href 1.查找以<a>开头的所有文本,然后判断href是否在<a> ...
- 制作动画平滑过渡效果：《CSS3 Transition》
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- css3 hover平滑过渡效果，鼠标经过元素，背景渐隐渐现效果
下面实例,演示,鼠标经过时,改变div宽度,平滑改变,带动画 div { width:100px; height:100px; background:blue; transition:width 2s ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
随机推荐
- linux 知识点拾遗
文件名称 在 Linux 底下,每个档案或文件夹的文件名称最长能够到达 255 的字符,加上完整路径时,最长可达 4096 个字符; 因为 Linux 在文字接口下的一些指令操作关系,一般来说,您在设 ...
- 如何正确使用Google搜索
“” 双引号表示完全匹配,结果中必须出现与搜索文本完全相同的内容 A -B 搜索包含A但不包含B的结果(请注意A后面的空格不能省略) filetype 搜索对应类型的文件.例如:中国防火墙 filet ...
- java.lang.NoSuchMethodException: <init> [class android.content.Context, interface androidutil.Attri
<pre name="code" class="java"><span style="font-size:24px;"&g ...
- 【BZOJ1570】[JSOI2008]Blue Mary的旅行 动态加边网络流
[BZOJ1570][JSOI2008]Blue Mary的旅行 Description 在一段时间之后,网络公司终于有了一定的知名度,也开始收到一些订单,其中最大的一宗来自B市.Blue Mary决 ...
- Docker的初体验
这几天捣鼓了一下docker,是真的麻烦啊,网上资料比较杂乱,也很多英文,学起来挺多问题的 Docker下载 win10专业版:开启Hyper-V,下载并安装 docker-for-windows(但 ...
- Less-css基础之变量学习
一.普通变量 //--普通变量--less @fontColor: #000000; body{ color:@fontColor; } //--输出--css body{ color:#000000 ...
- 传说中的MATLAB1.0（1984年DOS界面182K、运行良好）附下载
传说中的MATLAB1.0(1984年DOS界面182K.运行良好)附下载 你见过 MATLAB 最早的版本吗?下载一份 MATLAB 1.0,(只有182K, 只有20来个函数) 体会一下吧.MAT ...
- 使用electron进行原生应用的打包
因为信奉一句话:JavaScript 终将一统天下,所以要想方设法开疆扩土. 今天介绍的这个electron就是一大神器,可以很方便的将网页应用打包为Mac, Win, Linux下的可执行文件,只需 ...
- Spring Data 关于Repository的介绍（四）
Repository类的定义: public interface Repository<T, ID extends Serializable> { } 1)Repository是一个空接口 ...
- ubuntu14 编译安装（升级）g++
编译安装(升级)g++ ubuntu14自带的g++为4.8.4,不支持c++11.现要将g++升至5.2.0 1.下载安装: 参考https://www.cppfans.org/1719.html ...