CSS circle and page sliding effect (June 02, 2015)_html/css

CSS circle and page sliding effect (June 02, 2015)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:20

Original

938 people have browsed it

Background: Because I saw that many pages have the effect as shown below, click on the red line frame part, and the page will slide to another position. Looking at the source code of the page, I found that the red line frame part is a CSS rounded border. Implemented, so...

Upload the code

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>    <style>        body{            margin:0px;            padding:0px;            background-color: #1f272a;        }        /*圆角效果的实现*/        .btn-dwn {            /*            必填项            */            /*宽度和高度必须一致，才能保证是圆形*/            width: 58px;            height: 58px;            /*border-radius的属性值越大，圆形效果越明显*/            border-radius: 50%;            /*设置边框大小、样式、颜色*/            border: 2px solid rgba(255,255,255,.15);            /*            非必填项            */            color: rgba(255,255,255,.6);            text-align: center;            font-size: 18px;            position: absolute;            left: 50%;            bottom: 60px;            line-height: 58px;        }    </style>    <script>        //滑动效果        function scrollToTarget(D){            if(D == 1) // Top of page            {                D = 0;            }            else if(D == 2) // Bottom of page            {                D = $(document).height();            }            else // Specific Bloc            {                D = $(D).offset().top;            }            $('html,body').animate({scrollTop:D}, 'slow');        }    </script></head><body><a onclick="scrollToTarget('#core')" class="btn-dwn"><span class="glyphicon glyphicon-chevron-down"></span></a></body></html>

Copy after login

Achieve the effect

About sliding

Use To implement the jQuery animation effect, the scrollToTarget method in the script script can realize sliding and copy the page source code. It should be noted that there needs to be an element with the id "core" in the page. Clicking the button will slide to the corresponding position

Copy after login