【笔记】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) 它们可以分别操控元素发生平移.旋转 ...
随机推荐
- 【vijos】1750 建房子（线段树套线段树+前缀和）
https://vijos.org/p/1750 是不是我想复杂了.... 自己yy了个二维线段树,然后愉快的敲打. 但是wa了两法.......sad 原因是在处理第二维的更新出现了个小问题,sad ...
- iOS conformsToProtocol
- (BOOL)conformsToProtocol:(Protocol *)aProtocol; 是用来检查对象(包括其祖先)是否实现了指定协议类的方法. 今天遇到一个问题,一个类没有实现proto ...
- 5秒后跳转到另一个页面的js代码
今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面. 在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个respons ...
- 《转》最受欢迎的ASP.NET的CMS下载
1. Umbraco 项目地址 | 下载 Umbraco是一个开放源码的CMS内容管理系统,基于asp.net建立,使用mssql进行存储数据. 使用Umbraco ,设计师能创造出有效的XHTML标 ...
- pycharm 变量批量重命名
Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换
- JZOJ.5236【NOIP2017模拟8.7】利普希茨
Description
- 【BZOJ1367】[Baltic2004]sequence 左偏树
[BZOJ1367][Baltic2004]sequence Description Input Output 一个整数R Sample Input 7 9 4 8 20 14 15 18 Sampl ...
- 《从零开始学Swift》学习笔记（Day 62）——Core Foundation框架之内存托管对象与非托管对象
原创文章,欢迎转载.转载请注明:关东升的博客 内存托管对象 Swift中调用Core Foundation函数获得对象时候,对象分为:内存托管对象和内存非托管对象. 内存托管对象就是由编译器帮助管理内 ...
- 使用ShardingJdbc分表
项目中做个统一订单的基础服务(只记录订单的基本的公共信息),1.便与后续各种其他业务的接入~ 2.同时APP端提供统一订单信息的查询入口,后续其他业务不用升级 由于统一的订单服务,所以订单量会很大,所 ...
- 安装Vmware ESX Server5.5 ——hardware virtualization is not a feature of the cpu or is not enabled in the BIOS
Error信息: hardware virtualization is not a feature of the cpu or is not enabled in the BIOS 解决方案: F2进 ...