2014-10-13 2 views
0

Я пытался прокручивать ссылки на загрузочные навигационные ссылки на соответствующие привязки на моей странице, используя только CSS (без jquery). Этот ответ от @ jesus-bejarano (CSS: pure CSS scroll animation) с соответствием jsfiddle (http://jsfiddle.net/YYPKM/3/) кажется отличным решением, но я не могу заставить его работать. Любая помощь приветствуется.Прокрутка к якорю с чистым CSS

Вот ссылка на bootply с тем, что у меня есть: http://www.bootply.com/15Ib1TGYeV

Цените помощь.

Мой HTML:

<a id="suds"></a> 
<a id="apoth"></a> 
<a id="merch"></a> 
<div class="container-fluid container-fullwidth" id="" style=""> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <!-- <div class="container-fluid"> --> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> 
<span class="fa fa-bars fa-lg"></span> 

        <!-- <span class="icon-bar"></span> <span class="icon-bar"></span> --> 

       </button> <a class="navbar-brand" href="#"><span class="fa fa-long-arrow-left"></span></a> 

      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#suds" class="">Suds</a> 
        </li> 
        <li><a href="#apoth" class="">Apothecary and Men's Grooming</a> 
        </li> 
        <li><a href="#merch" class="">Gifts and Merchandise</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     <!-- </div> --> 
     <!-- /.container-fluid --> 
    </nav> 
    <section class="row no-gutter main"> 
     <article class="merch-cat" id="suds"> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
     </article> 
     <article class="merch-cat" id="apoth"> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
     </article> 
     <article class="merch-cat" id="merch"> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
      <div class="col-lg-4 col-sm-6 col-xs-12"> 
       <a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a> 
      </div> 
     </article> 
    </section> 
</div> 

Мой CSS:

/* add a little bottom space under the images */ 
body { 
    padding-top: 0px; 
} 


.thumbnail { 
    margin-bottom:0; 
} 

.row.no-gutter { 
    margin-left: 0; 
    margin-right: 0; 
} 

.row.no-gutter [class*='col-']:not(:first-child), 
.row.no-gutter [class*='col-']:not(:last-child) { 
    padding-right: 0; 
    padding-left: 0; 
} 

.container-fullwidth { 
     width: 100%; 
    } 

/* make nav always collapsed */ 

@media (max-width: 2000px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

/* nav opacity */ 

    nav { 
     opacity: 0.5 
    } 

/* scrolling */ 
a[ id= "suds" ]:target ~ #main article.merch-cat { 
    -webkit-transform: translateY(0px); 
    transform: translateY(0px); 
} 

a[ id= "apoth" ]:target ~ #main article.merch-cat { 
    -webkit-transform: translateY(-500px); 
    transform: translateY(-500px); 
} 
a[ id= "merch" ]:target ~ #main article.merch-cat { 
    -webkit-transform: translateY(-1000px); 
    transform: translateY(-1000px); 
} 
+0

Пожалуйста, не используйте тег «bootstrap», используйте «twitter-bootstrap», так как это означает что-то еще –

+0

Sure @daniel. Будут делать в будущем. Любые мысли о том, как заставить это работать? Любая помощь приветствуется. – dwags

ответ

0

не знаю, если это поможет вам любой .. но я использовал это на профиле моего прокручивать определенные пункты

@-webkit-keyframes buzz-out { 
    10% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    20% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    30% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    40% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    50% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    60% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    70% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    80% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    90% { 
    -webkit-transform:translateX(1px) rotate(0); 
    transform:translateX(1px) rotate(0); 
    } 

    100% { 
    -webkit-transform:translateX(-1px) rotate(0); 
    transform:translateX(-1px) rotate(0); 
    } 
} 

@keyframes buzz-out { 
    10% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    -ms-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    20% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    -ms-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    30% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    -ms-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    40% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    -ms-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    50% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    -ms-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    60% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    -ms-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    70% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    -ms-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    80% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    -ms-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    90% { 
    -webkit-transform:translateX(1px) rotate(0); 
    -ms-transform:translateX(1px) rotate(0); 
    transform:translateX(1px) rotate(0); 
    } 

    100% { 
    -webkit-transform:translateX(-1px) rotate(0); 
    -ms-transform:translateX(-1px) rotate(0); 
    transform:translateX(-1px) rotate(0); 
    } 
} 
+0

Можете ли вы показать полный рабочий пример, используя эти ключевые кадры? – misterManSam

+0

Спасибо @joshua, но я не совсем уверен, как это помогает. – dwags

+0

да дайте мне 30 минут, и я получу его для вас – jerry

0

@misterManSam

@charset "UTF-8"; 

html { 
    background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/back.png) no-repeat center 0,#000 url(https://googledrive.com/host/t0B6ETuSl1xvFHZVY1TGlFb0dlLVE/back.gif) left top; 
} 

img { 
    -webkit-border-radius:8px; 
    -moz-border-radius:8px; 
    border-radius:8px; 
} 

.mnmembers { 
    margin:50px -20px; 
} 

body { 
    font-family:Trebuchet MS,Arial,Helvetica; 
    text-align:center; 
} 

body,td { 
    color:#fff; 
    font-size:12px; 
} 

.friends_value img { 
    border:0; 
} 

td .clock { 
    font-size:23px; 
} 

.container_padding { 
    height:100%; 
} 

.gallery_image img { 
    margin:5px; 
} 

.gallery_image { 
    border:0; 
} 

.container_transparency { 
    height:100%; 
    width:100%; 
} 

.container { 
    height:100%; 
    background-color:transparent; 
} 

.container .heading { 
    color:#FF00CC; 
    text-shadow:2px 2px 2px rgba(255,255,255,0.2); 
    font-weight:bold; 
    font-family:Cabin Sketch,sans-serif; 
    font-size:20px; 
} 

.about_me .value { 
    color:#FF00CC; 
    font-size:15px; 
} 

.container table { 
    margin:15px; 
} 

.container table table { 
    border:0; 
    background:none; 
} 

#framepo { 
    text-align:center; 
    margin:0 150px; 
} 

#myvid { 
    margin:1000px 10px 0; 
} 

#stuff { 
    width:1194px; 
    overflow:hidden; 
    position:relative; 
    margin:1000px 0 0; 
    text-align:center; 
} 

.container table tr td.key { 
    background:#4a4057; 
    border-bottom:1px solid #443b50; 
    border-right:1px solid #383143; 
} 

.container table tr td.key,.container table tr td.friends_key { 
    padding:8px 8px 8px 20px; 
} 

.container table tr td.status_key,.container table tr td.blurb_key { 
    padding:3px 3px 3px 50px; 
} 

.wall_options textarea { 
    border:1px solid #0061aa; 
    background:rgba(0,0,0,0.25); 
    margin-top:20px 0 -20px 0; 
} 

a,a:link,a:active,a:visited,a:hover { 
    color:#fff; 
} 

.bottom_footer_wrapper { 
    bordet-top:#352f40 5px solid; 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    z-index:9999; 
} 

#videocontainer { 
    z-index:1; 
} 

.bottom_footer_wrapper .bottom_footer { 
    background-color:#fff; 
    border-top:3px solid #fb15d3; 
    height:80px; 
    text-align:center; 
} 

.container a.desc-img img { 
    -moz-transform:rotate(-2deg); 
    -webkit-transform:rotate(-2deg); 
} 

div.gallery_content:hover { 
    bottom:0; 
} 

div.gallery_content .gallery_image { 
    font-size:12px; 
    width:175px; 
    text-align:center; 
    margin:0!important; 
} 

input[name='strip_links'] { 
    margin-bottom:170px; 
} 

input[type='submit'] { 
    background:none; 
    display:block; 
    margin-top:25px; 
    letter-spacing:-1px; 
    border-width:1px; 
    border-style:solid; 
    border-color:#ccC#444 #111; 
    border-color:rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.7); 
    font:bold 21px1em Arial; 
    color:white; 
    padding:.48em 2em; 
    cursor:pointer; 
    text-shadow:rgba(0,0,0,0.45) 0 -1px 0; 
    -webkit-box-shadow:rgba(0,0,0,0.75) 0 0 3px; 
    -moz-box-shadow:rgba(0,0,0,0.75) 0 0 3px; 
    box-shadow:rgba(0,0,0,0.75) 0 0 3px; 
    -webkit-border-radius:7px; 
    -moz-border-radius:7px; 
    border-radius:7px; 
    background:transparent -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.6)),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.5,rgba(255,255,255,0.01)),to(transparent)); 
    background:transparent -moz-linear-gradient(top,rgba(255,255,255,0.6),rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.01) 50%,transparent); 
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorstr='#80FFFFFF',EndColorstr='#00FFFFFF'); 
    -webkit-background-clip:padding-box; 
} 

input[type='submit']:hover { 
    border-top-color:rgba(255,255,255,0.65); 
    background:-webkit-gradient(linear,left top,left bottom,from(rgba(220,220,220,0.6)),color-stop(0.5,rgba(100,100,100,0.2)),color-stop(0.5,rgba(0,0,0,0.21)),to(rgba(0,0,0,0.20))); 
    background:-moz-linear-gradient(top,rgba(220,220,220,0.6),rgba(100,100,100,0.2) 50%,rgba(0,0,0,0.21) 50%,rgba(0,0,0,0.20)); 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#99dcdcdc',EndColorStr='#33000000'); 
    -webkit-background-clip:padding-box; 
} 

textarea { 
    color:#666; 
    font-size:14px; 
    -moz-border-radius:8px; 
    -webkit-border-radius:8px; 
    padding:0 10px; 
    margin:15px 0; 
    border:#999 1px solid; 
    font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif; 
    transition:all .25s ease-in-out; 
    -webkit-transition:all .25s ease-in-out; 
    -moz-transition:all .25s ease-in-out; 
    box-shadow:0 0 5px rgba(81,203,238,0); 
    -webkit-box-shadow:0 0 5px rgba(81,203,238,0); 
    -moz-box-shadow:0 0 5px rgba(81,203,238,0); 
} 

textarea#styleid:focus { 
    color:#000; 
    outline:none; 
    border:#35a5e5 1px solid; 
    font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif; 
    box-shadow:0 0 5px rgba(81,203,238,1); 
    -webkit-box-shadow:0 0 5px rgba(81,203,238,1); 
    -moz-box-shadow:0 0 5px rgba(81,203,238,1); 
} 

.container .interests_body a img,.container img.thumbnail { 
    -moz-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); 
} 

#schedule table { 
    margin-top:10px; 
    text-align:center; 
    border:1px solid #81729a; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    border-top-left-radius:5px; 
    -webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.05); 
    -moz-box-shadow:0 1px 3px 1px rgba(0,0,0,.05); 
    box-shadow:0 1px 3px 1px rgba(0,0,0,.05); 
} 

#schedule tr:last-child td { 
    border-bottom:none!important; 
} 

#schedule tr:first-child td { 
    border-top:none!important; 
} 

#schedule td:last-child { 
    border-right:none!important; 
} 

#schedule td { 
    border-top:2px solid #81729a; 
    border-bottom:1px solid #81729a; 
    border-right:1px solid #81729a; 
    padding:13px 8px; 
} 

#profile { 
    width:1202px; 
    left:50%; 
    position:absolute; 
    text-align:left; 
    margin-left:-601px; 
} 

#profile_schedule { 
    position:absolute; 
    top:2060px; 
    left:220px; 
    color:#000; 
    text-transform:uppercase; 
    z-index:0; 
    width:auto; 
} 

#profile_friends { 
    position:absolute; 
    left:0; 
    top:0; 
    color:#fff; 
} 

#profile_password_photo_galleries { 
    position:absolute; 
    top:2600px; 
    width:100%; 
} 

#profile_password_photo_galleries .heading { 
    font-size:20px; 
} 

#profile_schedule .heading { 
    color:#ff0084; 
    font-size:25px; 
    margin:0; 
} 

#profile_schedule > .profile_section_content .container { 
    padding:2px 0; 
    display:block; 
} 

#profile_schedule > .profile_section_content .container .label { 
    width:150px; 
    color:#d25581; 
    display:inline-block; 
    float:left; 
} 

#profile_main_photo,.flagCounter,#username_container,#gender_container,#body_type_container,#ethnicity_container,#cam_score_container,#hair_container,#eyes_container,#weight_container,#age_container,#country_container,#sexual_preference_container,#smoke_container,#drink_container,#occupation_container,#school_container,#favorite_food_container,#pets_container,#automobile_container,#tags_container,#profile_about_me .label,#profile_about_me > .heading { 
    display:none; 
} 

#profile_main_about_holder { 
    display:block; 
} 

#profile_photo_galleries { 
    position:absolute; 
    top:2900px; 
    width:100%; 
} 

#profile_friends { 
    position:absolute; 
    left:220px; 
    top:2300px; 
    color:#fff; 
    width:1000px; 
    font-size:12px; 
} 

#profile .profile_row:first-child { 
    display:none; 
    position:absolute; 
    left:412px; 
    top:420px; 
    color:#000!important; 
    width:400px; 
} 

#profile .profile_row:first-child a:link,#profile .profile_row:first-child a:active,#profile .profile_row:first-child a:visited,#profile .profile_row:first-child a:hover { 
    color:#f99dde; 
} 

#profile_interests_content { 
    display:none; 
} 

#profile_comments { 
    position:absolute; 
    top:2950px; 
    width:auto; 
    width:100%; 
} 

.wall_post { 
    background:RGBa(0,0,0,0.8); 
    padding:10px; 
    margin:0 0 20px; 
} 

#photo_gallery_previews { 
} 

#header_bar { 
    display:none; 
} 

#footer_bar { 
    display:none; 
} 

a.button { 
    position:absolute; 
    display:block; 
} 

a.button.amazon-link { 
    width:250px; 
    height:87px; 
    background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/amazon.png); 
    top:750px; 
    left:620px; 
} 

a.button.twitter-link { 
    width:250px; 
    height:87px; 
    background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/twitter.png); 
    top:750px; 
    left:50px; 
} 

a.button.offtip-link { 
    width:250px; 
    height:89px; 
    background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/offtip.png); 
    top:750px; 
    left:340px; 
} 

/* Gallery */ 
.photo_gallery_preview { 
    color:#fff; 
    width:160px; 
} 

.photo_gallery_preview > a { 
    -webkit-transition:all .5s ease; 
    -moz-transition:all .5s ease; 
    -o-transition:all .5s ease; 
    transition:all .5s ease; 
} 

.photo_gallery_preview > a:hover { 
    opacity:.7; 
    -moz-transform:rotate(-10deg); 
    -webkit-transform:rotate(-10deg); 
} 

.photo_gallery_preview .photo_gallery_count { 
    font-size:14px; 
} 

.photo_gallery_preview a,.photo_gallery_preview a:link,.photo_gallery_preview a:active,.photo_gallery_preview a:hover,.photo_gallery_preview a:visited { 
    color:#fff; 
    text-decoration:none; 
    white-space:nowrap; 
} 

#buttons.resize { 
    width:10%; 
/* you can use % */ 
    height:auto; 
} 

/* Nav and target */ 
#about_me_target { 
    position:absolute; 
    top:1000px; 
} 

ul.nav-profile { 
    background:#000000; 
    padding:20px; 
    -webkit-border-radius:30px; 
    -moz-webkit-border-radius:20px; 
    -ms-webkit-border-radius:20px; 
    -o-webkit-border-radius:20px; 
    webkit-border-radius:20px; 
    position:absolute; 
    top:630px; 
    left:480px; 
    width:660px; 
    opacity:.8; 
    filter:alpha(opacity=80); 
} 

ul.nav-profile li { 
    float:left; 
    margin-right:35px; 
    list-style:none; 
} 

ul.nav-profile li a,ul.nav-profile li a:link,ul.nav-profile li a:visited,ul.nav-profile li a:active,ul.nav-profile li a:hover { 
    color:#fff; 
    font-weight:bold; 
    font-size:22px; 
    -webkit-transition:all .5s ease; 
    -moz-transition:all .5s ease; 
    -o-transition:all .5s ease; 
    transition:all .5s ease; 
    text-decoration:none; 
} 

ul.nav-profile li a:hover { 
    color:#8B008B; 
} 

.frame { 
    width:920px; 
    height:540px; 
    overflow:auto; 
    background:#e5e5e5; 
    position:relative; 
} 

.frame-border { 
    width:920px; 
    height:540px; 
    background:#e5e5e5; 
    padding:10px; 
    border-radius:20px; 
    -moz-border-radius:12px; 
    -webkit-border-radius:20px; 
    -o-border-radius:12px; 
    margin:0 125px; 
} 

.firstvid { 
    margin-right:20px; 
} 

div.hover_icon_container { 
    width:430px; 
    height:107px; 
    position:relative; 
    float:left; 
    margin-bottom:10px; 
} 

div.hover_icon_container a.hover_icon { 
    display:none; 
    width:430px; 
    height:107px; 
    position:absolute; 
    top:0; 
    left:0; 
} 

div.hover_icon_container:hover a.hover_icon { 
    display:block; 
} 

.frame::-webkit-scrollbar { 
    -webkit-appearance:none; 
    width:12px; 
    height:12px; 
} 

.frame::-webkit-scrollbar-thumb { 
    border-radius:8px; 
    border:2px solid white; 
    background-color:#C71585; 
} 

div.gif1 { 
    position:absolute; 
    left:140px; 
    top:472px; 
} 

div.gif2 { 
    position:absolute; 
    left:310px; 
    top:472px; 
} 

div.gif3 { 
    position:absolute; 
    left:480px; 
    top:472px; 
} 

div.gif4 { 
    position:absolute; 
    left:650px; 
    top:472px; 
} 

#blackBar { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:60px; 
    background-color:black; 
} 

@-webkit-keyframes buzz-out { 
    10% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    20% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    30% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    40% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    50% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    60% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    70% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    80% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    90% { 
    -webkit-transform:translateX(1px) rotate(0); 
    transform:translateX(1px) rotate(0); 
    } 

    100% { 
    -webkit-transform:translateX(-1px) rotate(0); 
    transform:translateX(-1px) rotate(0); 
    } 
} 

@keyframes buzz-out { 
    10% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    -ms-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    20% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    -ms-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    30% { 
    -webkit-transform:translateX(3px) rotate(2deg); 
    -ms-transform:translateX(3px) rotate(2deg); 
    transform:translateX(3px) rotate(2deg); 
    } 

    40% { 
    -webkit-transform:translateX(-3px) rotate(-2deg); 
    -ms-transform:translateX(-3px) rotate(-2deg); 
    transform:translateX(-3px) rotate(-2deg); 
    } 

    50% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    -ms-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    60% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    -ms-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    70% { 
    -webkit-transform:translateX(2px) rotate(1deg); 
    -ms-transform:translateX(2px) rotate(1deg); 
    transform:translateX(2px) rotate(1deg); 
    } 

    80% { 
    -webkit-transform:translateX(-2px) rotate(-1deg); 
    -ms-transform:translateX(-2px) rotate(-1deg); 
    transform:translateX(-2px) rotate(-1deg); 
    } 

    90% { 
    -webkit-transform:translateX(1px) rotate(0); 
    -ms-transform:translateX(1px) rotate(0); 
    transform:translateX(1px) rotate(0); 
    } 

    100% { 
    -webkit-transform:translateX(-1px) rotate(0); 
    -ms-transform:translateX(-1px) rotate(0); 
    transform:translateX(-1px) rotate(0); 
    } 
} 

.button { 
    display:inline-block; 
    -webkit-transform:translateZ(0); 
    -ms-transform:translateZ(0); 
    transform:translateZ(0); 
    box-shadow:0 0 1px rgba(0,0,0,0); 
} 

.button:hover { 
    -webkit-animation-name:buzz-out; 
    animation-name:buzz-out; 
    -webkit-animation-duration:.75s; 
    animation-duration:.75s; 
    -webkit-animation-timing-function:linear; 
    animation-timing-function:linear; 
    -webkit-animation-iteration-count:1; 
    animation-iteration-count:1; 
} 

.framen { 
    width:600px; 
    height:200px; 
    overflow:auto; 
    background:#000; 
    border-radius:20px; 
    position:relative; 
    margin:70px 20px 0; 
    padding:10px; 
} 

.frame-bordern { 
    width:920px; 
    height:300px; 
    background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/about.png); 
    padding:10px; 
    border-radius:20px; 
    -moz-border-radius:12px; 
    -webkit-border-radius:20px; 
    -o-border-radius:12px; 
    margin:0 125px; 
} 

.framen::-webkit-scrollbar { 
    -webkit-appearance:none; 
    width:12px; 
    height:12px; 
} 

.framen::-webkit-scrollbar-thumb { 
    border-radius:8px; 
    background-color:#C71585; 
} 

#profile_schedule { 
    display:none; 
} 

#new_comment { 
    display:none; 
} 

a.button.insta-link { 
    width:250px; 
    height:85px; 
    background:url(https://5a2e1bf9a2ce6e1087dbd9512e595cd127bfe686.googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/instagram.png); 
    top:750px; 
    left:900px; 
} 

.design a { 
    text-decoration:none; 
} 

.design h1 { 
    font-size:14px; 
    font-family:"Franklin Gothic Medium","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif; 
} 
Смежные вопросы