【笔记】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: 400;
    font-size: 15px;
    color: #333;
    /*溢出隐藏*/
    overflow: hidden;
    /*字体更圆滑，一般用在英文字体上*/
    -webkit-font-smoothing: antialiased;
}

/*链接样式*/
a {
    text-decoration: none; /*取消下划线*/
    color: #555;
    
}

/*定义一个清除浮动的类??*/
.clr {
    width: 0;
    height: 0;
    
    overflow: hidden;
    clear: both;
    padding: 0;
    margin: 0;
}

.st-container {
    width: 100%;
    height: 100%;
    
    position: absolute;
    left: 0;
    top: 0;
    
}

/*共同样式*/
.st-container > input,
.st-container > a {
    width: 20%;
    height: 34px;
    
    line-height: 34px;
    
    /*永远固定在最底部*/
    position: fixed;
    bottom: 0;
}

.st-container > input {
    /*把一个元素隐藏掉，消失掉*/
    /*display: none;*/
    /*占位隐藏*/
    opacity: 0.1; 
    z-index: 1000;
}

.st-container > a {
    z-index: 10;
    font-weight: 700;
    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: 0;
    height: 0;
    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: 0;
    top: 0;
    /*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: 11;

                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>

posted @ 2017-05-05 18:12 xkfx 阅读(1492) 评论(0) 编辑收藏举报

刷新页面返回顶部

【笔记】css3实现网页平滑过渡效果...

公告