1回答

• 

  速写素

  2016-05-08 13:10:58

  css部分-------------------------------->

  @font-face{  /*将字体导入到网页*/

  font-family:"Raphaelicons" ;

  src:url("fonts/raphaelicons-webfont.eot") format('eot'),

  url("fonts/raphaelicons-webfont.svg") format('svg'),

  url("fonts/raphaelicons-webfont.ttf") format('truetype'),

  url("fonts/raphaelicons-webfont.woff") format('woff');

  font-weight:normal;

  font-style:normal;

  }

  body{

  font-family: Georgia,serif;

  background-color: #ddd;

  font-weight: 400;

  font-size: 15px;

  color: #333;

  overflow: hidden;

  -webkit-font-smoothing:antialiased; /*功能：用于设置字体的抗锯齿或者说是光滑度的属性*/

  /*语法规则：font-smoothing:subpixel-antialiased | none | antialiased*/

  /*取值说明：none用于小像素的文本，subpixel-antialiased是浏览器默认的，antialiased反锯齿*/

  }

  a{

  text-decoration: none;

  }

  /*清除浮动*/

  .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;

  font-family: "Tsentsiu Mono HT"

  }

  .st-container input,

  .st-container a{

  letter-spacing: 2px;

  width: 20%;

  height: 36px;

  line-height:36px;

  position: fixed;

  bottom: 0; 

  cursor: pointer; /*光标改成手型*/

  }

  .st-container input{

  opacity: 0; /*存在，透明度为 0 */

  z-index: 100; /*比a的等级高*/

  }

  .st-container a{

  z-index: 10; /*比input的等级低*/

  font-weight: 700;

  font-size: 16px;

  background-color: #e23a6e;

  text-align: center;

  color: #eee;

  /*text-shadow: 0 0 2px #c6a;*/

  border-top-left-radius: 6px;

  border-top-right-radius: 6px;

  }

  /*默认是重叠*/

  #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%;

  }

  .st-container input:checked + a,

  .st-container input:checked:hover + a{

  background-color: #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-color: #ad244f;

  }

  /*内容*/

  .st-scroll,

  .st-panel{

  width: 100%;

  height: 100%;

  position: relative;

  }

  .st-scroll{

  left: 0;

  top: 0;

  -webkit-transform:translate3D(0,0,0);

  -o-transform:translate3D(0,0,0);

  -moz-transform:translate3D(0,0,0);

  -ms-transform:translate3D(0,0,0);

  transform:translate3D(0,0,0);

  -webkit-backface-visibility:hidden; /*功能：定义当元素不面向屏幕时是否可见*/

  /*语法规则：backface-visibility:visible | hidden;*/

  -webkit-transition:all 0.5s ease-in-out; /*移动*/

  -o-transition:all 0.5s ease-in-out;

  -ms-transition:all 0.5s ease-in-out;

  -moz-transition:all 0.5s ease-in-out;

  transition:all 0.5s ease-in-out;

  }

  .st-panel{

  background-color: #fff;

  overflow: hidden;

  }

  #st-control-1:checked ~ .st-scroll{ 

  -webkit-transform:translateY(0%);

  -moz-transform:translateY(0%);

  -o-transform:translateY(0%);

  -ms-transform:translateY(0%);

  transform:translateY(0%);

  }

  #st-control-2:checked ~ .st-scroll{

  -webkit-transform:translateY(-100%);

  -moz-transform:translateY(-100%);

  -o-transform:translateY(-100%);

  -ms-transform:translateY(-100%);

  transform:translateY(-100%);

  }

  #st-control-3:checked ~ .st-scroll{

  -webkit-transform:translateY(-200%);

  -moz-transform:translateY(-200%);

  -o-transform:translateY(-200%);

  -ms-transform:translateY(-200%);

  transform:translateY(-200%);

  }

  #st-control-4:checked ~ .st-scroll{

  -webkit-transform:translateY(-300%);

  -moz-transform:translateY(-300%);

  -o-transform:translateY(-300%);

  -ms-transform:translateY(-300%);

  transform:translateY(-300%);

  }

  #st-control-5:checked ~ .st-scroll{

  -webkit-transform:translateY(-400%);

  -moz-transform:translateY(-400%);

  -o-transform:translateY(-400%);

  -ms-transform:translateY(-400%);

  transform:translateY(-400%);

  }

  /*设置顶部的三角形*/

  .st-desc{

  width: 200px;

  height: 200px;

  background-color: #fa96b5;

  position: absolute;

  left: 50%;

  top: 0;

  border-bottom-right-radius: 12px;

  margin-left: -100px;

  -webkit-transform:translateY(-50%) rotate(45deg);

  -moz-transform:translateY(-50%) rotate(45deg);

  -o-transform:translateY(-50%) rotate(45deg);

  transform:translateY(-50%) rotate(45deg);

  }

  /*属性选择器放在中括号之内*/

  [data-icon]:after{

  content: attr(data-icon);

  width: 200px;

  height: 200px;

  color: #fff;

  font-size: 90px;

  text-align: center;

  line-height: 200px;

  position: absolute;

  left: 50%;

  top: 50%;

  margin: -100px 0 0 -100px;

  -webkit-transform:rotate(-45deg) translateY(25%);

  -moz-transform:rotate(-45deg) translateY(25%);

  -o-transform:rotate(-45deg) translateY(25%);

  -ms-transform:rotate(-45deg) translateY(25%);

  transform:rotate(-45deg) translateY(25%);

  font-family:"Raphaelicons";

  text-shadow: 0 0 2px lightgreen;

  }

  .st-panel h2{

  color: #e23a6e;

  font-size:54px;

  line-height: 50px;

  text-align: center;

  font-weight: 900;

  letter-spacing: 2px;

  width: 80%;

  position: absolute;

  left: 10%;

  top: 40%;

  margin-top: -70px;

  text-shadow: 0 0 30px blue;

  -webkit-backface-visibility:hidden;

  }

  
  

  #st-control-1:checked ~ .st-scroll #st-panel-1 h2,

  #st-control-2:checked ~ .st-scroll #st-panel-2 h2,

  #st-control-3:checked ~ .st-scroll #st-panel-3 h2,

  #st-control-4:checked ~ .st-scroll #st-panel-4 h2,

  #st-control-5:checked ~ .st-scroll #st-panel-5 h2{

  -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

  -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

  -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

  -o-animation:moveDown 0.6s ease-in-out 0.2s backwards ;

  animation:moveDown 0.6s ease-in-out 0.2s backwards ;

  }

  @-webkit-keyframes moveDown{

  0%{

  -webkit-transform:translateY(-10px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  @-moz-keyframes moveDown{

  0%{

  -webkit-transform:translateY(-40px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  @-o-keyframes moveDown{

  0%{

  -webkit-transform:translateY(-40px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  @keyframes moveDown{

  0%{

  -webkit-transform:translateY(-40px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  .st-panel p{

  position: absolute;

  width: 100%;

  left: 25;

  top: 50%;

  font-size: 16px;

  line-height: 22px;

  padding: 0;

  text-align: center;

  -webkit-backface-visibility:hidden;

  color: #8b8b8b;

  margin-top: 10px;

  }

  #st-control-1:checked ~ .st-scroll #st-panel-1 p,

  #st-control-2:checked ~ .st-scroll #st-panel-2 p,

  #st-control-3:checked ~ .st-scroll #st-panel-3 p,

  #st-control-4:checked ~ .st-scroll #st-panel-4 p,

  #st-control-5:checked ~ .st-scroll #st-panel-5 p{

  -webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

  -moz-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

  -ms-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

  -o-animation:moveUp 0.6s ease-in-out 0.2s backwards ;

  animation:moveUp 0.6s ease-in-out 0.2s backwards ;

  }

  @-webkit-keyframes moveUp{

  0%{

  -webkit-transform:translateY(40px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  @-moz-keyframes moveUp{

  0%{

  -webkit-transform:translateY(40px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  @-o-keyframes moveUp{

  0%{

  -webkit-transform:translateY(40px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  @keyframes moveUp{

  0%{

  -webkit-transform:translateY(40px);

  opacity:0;

  }

  100%{

  -webkit-transform:translateY(0px);

  opacity: 1;

  }

  }

  .st-color{

  background-color: #fa96b5;

  }

  .st-color .st-desc{

  background-color: #fff;

  }

  .st-color [data-icon]:after{

  color: #fa96b5;

  }

  .st-color h2{

  color: #fff;

  text-shadow: 0 0 30px black;

  }

  .st-color p{

  color: #eee;

  }

  /*响应式实现自适应*/

  @media screen and (max-width: 520px) {

  .st-panel h2{

  font-size: 42px;

  }

  .st-panel p{

  width: 90%;

  left: 10%;

  margin-top: 0;

  }

  .st-container > a{

  font-size: 3px;

  }

  }

  @media screen and (max-width: 360px) {

  .st-panel h2{

  font-size: 42px;

  }

  .st-panel p{

  width: 90%;

  left: 10%;

  margin-top: 0;

  }

  .st-container > a{

  font-size: 10px;

  }

  .st-desc{

  width: 120px;

  height: 120px;

  margin-left: -60px;

  }

  [data-icon]:after{

  -webkit-transform:rotate(-45deg) translateY(16%);

  -moz-transform:rotate(-45deg) translateY(16%);

  -o-transform:rotate(-45deg) translateY(16%);

  -ms-transform:rotate(-45deg) translateY(16%);

  transform:rotate(-45deg) translateY(16%);

  }

  }

  html部分------------------------------------------->

  
  

  <!doctype html>

  <html dir="ltr"> <!-- dir属性指定文字的排列方向 -->

  <head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome = 1"> <!-- 告知IE使用最新的渲染模式 -->

  <meta name="viewport" content="width=device-width,initial-scale=1" > <!-- 强制页面适应设备的宽度，禁止缩放 -->

  <title>CSS3实现网页平滑过渡效果</title>

  <link rel="stylesheet" href="css/normalize.css">

  <link rel="stylesheet" href="css/style.css">

  </head>

  <body>

  <div>

  <div>

  <!-- nav-begin -->

  <input type="radio" name="radio-set" checked="checked" id="st-control-1">

  <a href="#st-panel-1">Serendipity</a>

  <input type="radio" name="radio-set" id="st-control-2">

  <a href="#st-panel-2">Happiness</a>

  <input type="radio" name="radio-set" id="st-control-3">

  <a href="#st-panel-3">Tranquillity</a>

  <input type="radio" name="radio-set" id="st-control-4">

  <a href="#st-panel-4">Posibility</a>

  <input type="radio" name="radio-set" id="st-control-5">

  <a href="#st-panel-5">Passion</a>

  <!-- nav-end content begin-->

  <div>

  <section id="st-panel-1">

  <div data-icon = "H"></div>

  <h2>SERENDIPITY</h2>

  <p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

  </section>

  <section class="st-panel st-color" id="st-panel-2">

  <div data-icon = "2"></div>

  <h2>HAPPINESS</h2>

  <p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

  </section>

  <section id="st-panel-3">

  <div data-icon = "B"></div>

  <h2>TRANQUILLITY</h2>

  <p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

  </section>

  <section class="st-panel st-color" id="st-panel-4">

  <div data-icon = "x"></div>

  <h2>POSIBILITY</h2>

  <p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

  </section>

  <section id="st-panel-5">

  <div data-icon = "Ç"></div>

  <h2>PASSION</h2>

  <p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>

  </section>

  </div>

  </div>

  </div>

  
  

  </body>

  </html>

  
  

  0 0