收缩我的信息框

时间：2017-06-09 13:33:40

标签： html css

我使用的是由HTML和CSS组成的信息框。我似乎无法弄清楚如何缩小盒子的大小和悬停内容。每当我缩小盒子的大小时，悬停内容就不适合里面，我看不到我错过了什么。任何人都可以让我知道如何正确改变我的盒子的大小？任何事都有帮助，欢呼。

.infobox-list {
    display: inline-block;
    text-align: center;
}

ul, ol, li {
    margin: 0;
    padding: 0;
    list-style-position: outside;
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    background-color: #fff;
    color: #555;
    min-width: 20em;
}



.info-boxes li {
    width: 245px;
    height: 245px;
    background: #3299CC;
    border: 1px solid #efefef;
    border-radius: 4px;
    margin: 0 20px 40px;
    position: relative;
    overflow: hidden;
}

.pics
{
  width:135px;
  height:135px;
}

.everything
{
  text-align:center;
}

.infobox-list li {
    display: inline-block;
    vertical-align: middle;
}

a {
    color: white;
    text-decoration: none;
  font-weight:lighter;
}

.info-boxes li .infobox {
    display: table-cell;
    vertical-align: middle;
    height: 245px;
    width: 245px;
}

.info-boxes li .shade {
    position: absolute;
    width: 245px;
    height: 245px;
    left: 0;
    top: 0px;
    background-color: #a9bd38;
    color: #fff;
    display: table;
    vertical-align: middle;
    padding: 20px 10px 0;
    transform: translateY(-240px);
      -webkit-transform: translateY(-240px);
      -moz-transform: translateY(-240px);
      -ms-transform: translateY(-240px);
    animation-name: windowshade-out;
      -webkit-animation-name: windowshade-out;
      -moz-animation-name: windowshade-out;
      -ms-animation-name: windowshade-out;
}

.info-boxes li:hover .shade {
    animation-name: windowshade;
      -webkit-animation-name: windowshade;
      -moz-animation-name: windowshade;
      -ms-animation-name: windowshade;
}

.info-boxes li .shade, 
.info-boxes li:hover .shade {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);  
  animation-duration: 1.5s;
      -webkit-animation-duration: 0.5s;
      -moz-animation-duration: 0.5s;
      -ms-animation-duration: 0.5s; 
  animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;
      -moz-animation-iteration-count: 1;
      -ms-animation-iteration-count: 1;
  animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;  
}

.info-boxes li .shade h3 {
    color: #fff;
    padding: 10px;
    font-weight: bold;
}

section p {
    line-height: 1.3em;
    color: #6d6e71;
    width: 95%;
    padding: 0 10px;
    margin-top: 5px;
    margin-left: 8px;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

img {
    max-width: 100%;
}

.infobox img {margin-bottom:7px}

.info-boxes li .shade {
  position:absolute;
  width:245px;
  height:245px;
  left:0;
  top:0;
  background-color:#4682B4;
  color:#fff;
  display:table;
  vertical-align:middle;
  padding:20px 10px 0;
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px);
  animation-name:windowshade-out
    -webkit-animation-name:windowshade-out;
    -moz-animation-name:windowshade-out;
    -ms-animation-name:windowshade-out;
}

.info-boxes li .shade h3 {color:#fff;padding:10px;font-weight:bold}
.info-boxes li .shade p {color:#fff;line-height:1.4em;font-weight:normal}

.info-boxes li:hover .shade{
  -webkit-animation-name:windowshade;
  -moz-animation-name:windowshade;
  -ms-animation-name:windowshade;
  animation-name:windowshade}

.ie9 .info-boxes li:hover .shade {top:245px}
.info-boxes li:hover a {text-decoration:none}

@-webkit-keyframes windowshade{
  0%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-moz-keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-ms-keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-webkit-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@-moz-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@-ms-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}
<br/>
<br/>
<div class="everything">
<section class="info-boxes">
  <ul class="infobox-list">
    <li>
      <a href="#">
        <div class="infobox">
          <img class="pics" src=""><br>
                    </div>
        <div class="shade">
          <h3>My Profile</h3>
          <p>Get real-time feedback to improve products, services, and business overall</p>
          <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
        </div>
      </a>
    </li>
    
    <li>
      <a href="#">
        <div class="infobox">
          <img class="pics" src=""><br>
        </div>
        <div class="shade">
          <h3>My Performance</h3>
          <p>Assess the key drivers of talent retention to build an effective company culture</p>
          <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
       </a>
    </li>
    <li>
                <a href="/mp/event-planning-surveys/?ut_source=homepage&amp;ut_source2=home_oz_uk"><div class="infobox"><img class="pics" src=""><br>
                    </div>
                    <div class="shade">
                        <h3>My Learning</h3>
                        <p>Gather attendee feedback to perfect the planning process and win more contracts</p>
                        <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
                    </div>
                </a>
            </li>
    <li>
<a href="/mp/education-surveys/?ut_source=homepage&amp;ut_source2=home_oz_uk">
   <div class="infobox"><img class="pics" src=""><br>
                    </div>
                    <div class="shade">
                        <h3>My Team</h3>
                        <p>Get answers to improve programs, processes, and academic achievement</p>
                        <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png"><br>
                    </div>
                </a>
            </li>      
</ul> 
</section>
</div>

2 个答案:

答案 0 :(得分：0)

我已将尺寸调整为150x150并调整字体大小以使文字合适 删除了重复的CSS。

＆＃13;
＆＃13; 
.infobox-list {
  display: inline-block;
  text-align: center;
}

ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style-position: outside;
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
ol,
form,
fieldset {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul,
menu,
dir {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 40px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #555;
  min-width: 20em;
}

.info-boxes li {
  width: 150px;
  height: 150px;
  background: #3299CC;
  border: 1px solid #efefef;
  border-radius: 4px;
  /* margin: 0 20px 40px; */
  position: relative;
  overflow: hidden;
}

.pics {
  width: 135px;
  height: 135px;
  /* margin-bottom: 7px; */
  max-width: 100%;
}

.everything {
  text-align: center;
}

.infobox-list li {
  display: inline-block;
  vertical-align: middle;
}

a {
  color: white;
  text-decoration: none;
  font-weight: lighter;
}

.info-boxes li .infobox {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 150px;
  width: 150px;
}

.info-boxes li .shade {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 0;
  top: 0px;
  background-color: #a9bd38;
  color: #fff;
  display: table;
  vertical-align: middle;
  padding: 0;
  transform: translateY(-150px);
  -webkit-transform: translateY(-150px);
  -moz-transform: translateY(-150px);
  -ms-transform: translateY(-150px);
  animation-name: windowshade-out;
  -webkit-animation-name: windowshade-out;
  -moz-animation-name: windowshade-out;
  -ms-animation-name: windowshade-out;
}

.info-boxes li:hover .shade {
  animation-name: windowshade;
  -webkit-animation-name: windowshade;
  -moz-animation-name: windowshade;
  -ms-animation-name: windowshade;
}

.info-boxes li .shade,
.info-boxes li:hover .shade {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-duration: 1.5s;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -ms-animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
}

.info-boxes li .shade h3 {
  color: #fff;
  font-size: 1em;
  padding: 10px;
  font-weight: bold;
}

section p {
  line-height: 1.3em;
  color: #6d6e71;
  width: 95%;
  padding: 0 10px;
  margin-top: 5px;
  margin-left: 8px;
}

p {
  display: block;
  margin: 1em 0;
}

.info-boxes li .shade p {
  color: #fff;
  line-height: 1em;
  font-size: .8em;
  font-weight: normal
}

.info-boxes li:hover .shade {
  -webkit-animation-name: windowshade;
  -moz-animation-name: windowshade;
  -ms-animation-name: windowshade;
  animation-name: windowshade
}

.ie9 .info-boxes li:hover .shade {
  top: 245px
}

.info-boxes li:hover a {
  text-decoration: none
}

@-webkit-keyframes windowshade {
  0% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}

@-moz-keyframes windowshade {
  0% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}

@-ms-keyframes windowshade {
  0% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes windowshade {
  0% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes windowshade-out {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  100% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
}

@-moz-keyframes windowshade-out {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  100% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
}

@-ms-keyframes windowshade-out {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  100% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
}

@keyframes windowshade-out {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  100% {
    -webkit-transform: translateY(-240px);
    -moz-transform: translateY(-240px);
    -ms-transform: translateY(-240px);
    transform: translateY(-240px)
  }
}
＆＃13; 
<div class="everything">
  <section class="info-boxes">
    <ul class="infobox-list">
      <li>
        <a href="#">
          <div class="infobox">
            <img class="pics" src="">
          </div>
          <div class="shade">
            <h3>My Profile</h3>
            <p>Get real-time feedback to improve products, services, and business overall</p>
            <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png">
            <br>
          </div>
        </a>
      </li>

      <li>
        <a href="#">
          <div class="infobox">
            <img class="pics" src="">
          </div>
          <div class="shade">
            <h3>My Performance</h3>
            <p>Assess the key drivers of talent retention to build an effective company culture</p>
            <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png">
            <br>
          </div>
        </a>
      </li>
      <li>
        <a href="/mp/event-planning-surveys/?ut_source=homepage&amp;ut_source2=home_oz_uk">
          <div class="infobox"><img class="pics" src="">
          </div>
          <div class="shade">
            <h3>My Learning</h3>
            <p>Gather attendee feedback to perfect the planning process and win more contracts</p>
            <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png">
            <br>
          </div>
        </a>
      </li>
      <li>
        <a href="/mp/education-surveys/?ut_source=homepage&amp;ut_source2=home_oz_uk">
          <div class="infobox"><img class="pics" src="">
            <br>
          </div>
          <div class="shade">
            <h3>My Team</h3>
            <p>Get answers to improve programs, processes, and academic achievement</p>
            <img src="https://secure.surveymonkey.com/smassets/anonweb/anonweb/0.0.0.709/assets/homepage/link-arrow-white.png">
          </div>
        </a>
      </li>
    </ul>
  </section>
</div>
＆＃13;
＆＃13;
＆＃13;

小提琴here

答案 1 :(得分：0)

所以，如果我理解你的话：你想让你的盒子里面的东西变小吗？好吧，你在很多不同的地方使用了px值（有时在翻译中），所以你必须根据你想要的大小来改变它们。

你也可以缩小它们：

var box = Box(Nothing) //This will return an Error

这是更新后的代码：

.info-boxes li {
// your other stuff
transform: scale(.9);           
}

.infobox-list {
    display: inline-block;
    text-align: center;
}

ul, ol, li {
    margin: 0;
    padding: 0;
    list-style-position: outside;
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    background-color: #fff;
    color: #555;
    min-width: 20em;
}



.info-boxes li {
    width: 245px;
    height: 245px;
    background: #3299CC;
    border: 1px solid #efefef;
    border-radius: 4px;
    margin: 0 20px 40px;
    position: relative;
    overflow: hidden;
    transform: scale(.9);
}

.pics
{
  width:135px;
  height:135px;
}

.everything
{
  text-align:center;
}

.infobox-list li {
    display: inline-block;
    vertical-align: middle;
}

a {
    color: white;
    text-decoration: none;
  font-weight:lighter;
}

.info-boxes li .infobox {
    display: table-cell;
    vertical-align: middle;
    height: 245px;
    width: 245px;
}

.info-boxes li .shade {
    position: absolute;
    width: 245px;
    height: 245px;
    left: 0;
    top: 0px;
    background-color: #a9bd38;
    color: #fff;
    display: table;
    vertical-align: middle;
    padding: 20px 10px 0;
    transform: translateY(-240px);
      -webkit-transform: translateY(-240px);
      -moz-transform: translateY(-240px);
      -ms-transform: translateY(-240px);
    animation-name: windowshade-out;
      -webkit-animation-name: windowshade-out;
      -moz-animation-name: windowshade-out;
      -ms-animation-name: windowshade-out;
}

.info-boxes li:hover .shade {
    animation-name: windowshade;
      -webkit-animation-name: windowshade;
      -moz-animation-name: windowshade;
      -ms-animation-name: windowshade;
}

.info-boxes li .shade, 
.info-boxes li:hover .shade {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);  
  animation-duration: 1.5s;
      -webkit-animation-duration: 0.5s;
      -moz-animation-duration: 0.5s;
      -ms-animation-duration: 0.5s; 
  animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;
      -moz-animation-iteration-count: 1;
      -ms-animation-iteration-count: 1;
  animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;  
}

.info-boxes li .shade h3 {
    color: #fff;
    padding: 10px;
    font-weight: bold;
}

section p {
    line-height: 1.3em;
    color: #6d6e71;
    width: 95%;
    padding: 0 10px;
    margin-top: 5px;
    margin-left: 8px;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

img {
    max-width: 100%;
}

.infobox img {margin-bottom:7px}

.info-boxes li .shade {
  position:absolute;
  width:245px;
  height:245px;
  left:0;
  top:0;
  background-color:#4682B4;
  color:#fff;
  display:table;
  vertical-align:middle;
  padding:20px 10px 0;
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px);
  animation-name:windowshade-out
    -webkit-animation-name:windowshade-out;
    -moz-animation-name:windowshade-out;
    -ms-animation-name:windowshade-out;
}

.info-boxes li .shade h3 {color:#fff;padding:10px;font-weight:bold}
.info-boxes li .shade p {color:#fff;line-height:1.4em;font-weight:normal}

.info-boxes li:hover .shade{
  -webkit-animation-name:windowshade;
  -moz-animation-name:windowshade;
  -ms-animation-name:windowshade;
  animation-name:windowshade}

.ie9 .info-boxes li:hover .shade {top:245px}
.info-boxes li:hover a {text-decoration:none}

@-webkit-keyframes windowshade{
  0%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-moz-keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-ms-keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@keyframes windowshade{
  0%{
  -webkit-transform:translateY(-240px);
  -moz-transform:translateY(-240px);
  -ms-transform:translateY(-240px);
  transform:translateY(-240px)}
  100%{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0)}
}

@-webkit-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@-moz-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@-ms-keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

@keyframes windowshade-out{
  0%{
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)}
  100%{
    -webkit-transform:translateY(-240px);
    -moz-transform:translateY(-240px);
    -ms-transform:translateY(-240px);
    transform:translateY(-240px)}
}

相关问题
最新问题