使用纯CSS滚动到锚点

时间：2014-10-13 19:41:12

标签： html css twitter-bootstrap

我一直在尝试使用CSS（无jquery）从引导导航链接滚动到我页面上的匹配锚点。来自@ jesus-bejarano（CSS: pure CSS scroll animation）的匹配jsfiddle（http://jsfiddle.net/YYPKM/3/）的答案似乎是一个很好的解决方案，但我似乎无法让它发挥作用。任何帮助将不胜感激。

以下链接指向了我已经拥有的内容：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 );
}

2 个答案:

答案 0 :(得分：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);
  }
}

答案 1 :(得分：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;
}
相关问题
最新问题