【笔记】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) 它们可以分别操控元素发生平移.旋转 ...
随机推荐
- Windows下RabbitMQ安装，部署，配置
安装部署 1.当前环境以及参考资料出处 部署环境:windows server 2008 r2 enterprise 官方安装部署文档:http://www.rabbitmq.com/install- ...
- （转）java位运算
转自:http://aijuans.iteye.com/blog/1850655 Java 位运算(移位.位与.或.异或.非) public class Test { public static ...
- 说说常见的几个js疑难点
JavaScript match() 方法 定义和使用方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正則表達式的匹配. 该方法类似 indexOf() 和 lastIndexOf ...
- ChemDraw 15.1 Pro插入阿尔法可以这样做
在理工科学科学习过程中,大家都会遇到各种希腊字母,而阿尔法(α)又是最常见的一个.最新版本ChemDraw 15.1 Pro的功能更加卓越,在很多功能上都进行了优化,操作更简便.其中,就可以很好的在公 ...
- MySQL Error: Illegal mix of collations for operation 'concat'
在使用concat连接字符串时出现错误:MySQL Error: Illegal mix of collations for operation 'concat' 原因:字段操作默认为UTF8的编码, ...
- Linux CentOS7.2下安装Redis && 配置Redis开机自启动
1.安装redis 第一步:下载redis安装包 wget http://download.redis.io/releases/redis-4.0.11.tar.gz 第二步:解压压缩包 tar -z ...
- homebrew常用指令
其它Homebrew指令: brew list —列出已安装的软件 brew update —更新Homebrew brew home *—用浏览器打开 brew info *—显示软件 ...
- [LintCode] 用栈实现队列
class Queue { public: stack<int> stack1; stack<int> stack2; Queue() { // do intializatio ...
- [HackerRank] The Longest Common Subsequence
This is the classic LCS problem. Since it requires you to print one longest common subsequence, just ...
- angualar入门学习-- 自定义指令 认识属性
个AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用 2.作为一个元素的属性来使用 3.作为一个元素的类来使用 4.作为注释来使用 一.创建指令 angul ...