求源代碼啊
能提供一下源代碼嗎， 光看你寫是看不懂的，要拿來研究一下！
___騎豬去美國
2015-04-19
1 回答
舉報(bào)
0/150
提交
取消
2015-04-20
<html>
<head lang="zh">
? ?<meta charset="UTF-8" />
? ?<meta http-equiv="x-ua-compatible" content="IE-edge,chrome=1"/>
? ?<meta name="viewport" content="width=device-width,initial-scale=1"/>
? ?<link rel="stylesheet" >
? ?<link rel="stylesheet" href="{{ asset('css/normalise.css') }}"/>
? ?<link rel="stylesheet" href="{{ asset('css/home.css') }}"/>
? ?<title>css3</title>
</head>
<body>
<div class="container">
? ?<div class="st-container">
? ? ? ?<input type="radio" name="radio-set" id="st-control-1" checked="checked"/>
? ? ? ?<a href="#st-panel-1">首頁</a>
? ? ? ?<input type="radio" name="radio-set" id="st-control-2"/>
? ? ? ?<a href="#st-panel-2">Plane</a>
? ? ? ?<input type="radio" name="radio-set" id="st-control-3"/>
? ? ? ?<a href="#st-panel-3">Moon</a>
? ? ? ?<input type="radio" name="radio-set" id="st-control-4"/>
? ? ? ?<a href="#st-panel-4">Lock</a>
? ? ? ?<input type="radio" name="radio-set" id="st-control-5"/>
? ? ? ?<a href="#st-panel-5">Home</a>
? ? ? ?<div class="st-scroll">
? ? ? ? ? ?<section class="st-panel" id="st-panel-1">
{{--<div><i class="fa fa-heart"></i></div>--}}
? ? ? ? ? ? ? ?{{--<h2>怦然心動(dòng)</h2>--}}
? ? ? ? ? ? ? ?{{--<p>當(dāng)我看見你的第一眼，你、讓我怦然心動(dòng)。</p>--}}
<div class="baidu">
? ? ? ? ? ? ? ? ? ?<img src="https://www.baidu.com/img/bd_logo1.png" alt="baidu"/>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="search">
? ? ? ? ? ? ? ? ? ?<input type="text" id="search-content"/>
? ? ? ? ? ? ? ? ? ?<input type="submit" id="search-btn"/>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</section>
? ? ? ? ? ?<section class="st-panel st-color" id="st-panel-2">
? ? ? ? ? ? ? ?<div class="st-desc"><i class="fa fa-paper-plane"></i></div>
? ? ? ? ? ? ? ?<h2></h2>
? ? ? ? ? ? ? ?<p>
</p>
? ? ? ? ? ?</section>
? ? ? ? ? ?<section class="st-panel" id="st-panel-3">
? ? ? ? ? ? ? ?<div class="st-desc"><i class="fa fa-moon-o"></i></div>
? ? ? ? ? ? ? ?<h2></h2>
? ? ? ? ? ? ? ?<p></p>
? ? ? ? ? ?</section>
? ? ? ? ? ?<section class="st-panel st-color" id="st-panel-4">
? ? ? ? ? ? ? ?<div class="st-desc"><i class="fa fa-lock"></i></div>
? ? ? ? ? ? ? ?<h2></h2>
? ? ? ? ? ? ? ?<p></p>
? ? ? ? ? ?</section>
? ? ? ? ? ?<section class="st-panel" id="st-panel-5">
? ? ? ? ? ? ? ?<div class="st-desc"><i class="fa fa-home"></i></div>
? ? ? ? ? ? ? ?<h2></h2>
? ? ? ? ? ? ? ?<p></p>
? ? ? ? ? ?</section>
? ? ? ?</div>
? ?</div>
</div>
</body>
</html>
body{
? ?font-family: Georgia,serif;
? ?background-color: #ddd;
? ?font-weight: 400;
? ?font-size: 15px;
? ?color: #333333;
? ?overflow: hidden;
? ?-webkit-font-smoothing: antialiased;
? ?-moz-font-smoothing: antialiased;
? ?-ms-font-smoothing: antialiased;
? ?-o-font-smoothing: antialiased;
? ?font-smoothing: antialiased;
}
a{
? ?text-decoration: none;
? ?color: #555555;
}
.clr{
? ?width: 0;
? ?height: 0;
? ?overflow: hidden;
? ?clear: both;
? ?padding: 0;
? ?margin: 0;
}
.st-container{
? ?width: 100%;
? ?height: 100%;
? ?position: absolute;
? ?overflow: hidden;
? ?left: 0;
? ?top: 0;
? ?font-family: "Josefin Slab","Myriad Pro",arial, sans-serif;
}
.st-container>input,
.st-container>a{
? ?width: 20%;
? ?height: 34px;
? ?line-height: 34px;
? ?position: fixed;
? ?bottom: 0;
? ?cursor: pointer;
}
.st-container>input{
? ?opacity: 0;
? ?z-index: 999;
}
.st-container>a{
? ?z-index: 5;
? ?font-weight: bold;
? ?font-size: 24px;
? ?background: #e23a6e;
? ?text-align: center;
? ?color: #FFFFFF;
? ?text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
#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: #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: #ad244f;
}
.st-scroll,.st-panel{
? ?width: 100%;
? ?height: 100%;
? ?position: relative;
}
.st-scroll{
? ?left: 0;
? ?top: 0;
? ?transform: translate3d(0,0,0);
? ?-webkit-transform: translate3d(0,0,0);
? ?-moz-transform: translate3d(0,0,0);
? ?-ms-transform: translate3d(0,0,0);
? ?-o-transform: translate3d(0,0,0);
? ?-webkit-backface-visibility: hidden;
? ?-webkit-transition: all 0.6s ease-in-out;
? ?-moz-transition: all 0.6s ease-in-out;
? ?-ms-transition: all 0.6s ease-in-out;
? ?-o-transition: all 0.6s ease-in-out;
? ?transition: all 0.6s ease-in-out;
}
.st-panel{
? ?background: #FFFFFF;
? ?overflow: hidden;
}
#st-control-1:checked ~ .st-scroll{
? ?-webkit-transform: translateY(0%);
? ?-moz-transform: translateY(0%);
? ?-ms-transform: translateY(0%);
? ?-o-transform: translateY(0%);
? ?transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
? ?-webkit-transform: translateY(-100%);
? ?-moz-transform: translateY(-100%);
? ?-ms-transform: translateY(-100%);
? ?-o-transform: translateY(-100%);
? ?transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
? ?-webkit-transform: translateY(-200%);
? ?-moz-transform: translateY(-200%);
? ?-ms-transform: translateY(-200%);
? ?-o-transform: translateY(-200%);
? ?transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
? ?-webkit-transform: translateY(-300%);
? ?-moz-transform: translateY(-300%);
? ?-ms-transform: translateY(-300%);
? ?-o-transform: translateY(-300%);
? ?transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
? ?-webkit-transform: translateY(-400%);
? ?-moz-transform: translateY(-400%);
? ?-ms-transform: translateY(-400%);
? ?-o-transform: translateY(-400%);
? ?transform: translateY(-400%);
}
.st-desc{
? ?width: 200px;
? ?height: 200px;
? ?background: #fa96b5;
? ?position: absolute;
? ?top: 0;
? ?left: 50%;
? ?margin-left: -100px;
? ?-webkit-transform: translateY(-50%) rotate(45deg);
? ?-moz-transform: translateY(-50%) rotate(45deg);
? ?-o-transform: translateY(-50%) rotate(45deg);
? ?-ms-transform: translateY(-50%) rotate(45deg);
? ?transform: translateY(-50%) rotate(45deg);
}
.fa{
? ?width: 200px;
? ?height: 200px;
? ?line-height: 200px;
? ?text-align: center;
? ?margin: -60px 0px 0px -60px;
? ?color: #FFFFFF;
? ?font-size: 90px;
? ?position: absolute;
? ?left: 50%;
? ?top:50%;
? ?transform: rotate(-45deg);
}
.st-panel h2 {
? ?color: #e23a6e;
? ?font-size: 54px;
? ?line-height: 50px ;
? ?text-align : center;
? ?font-weight : 900;
? ?width: 80%;
? ?position: absolute;
? ?left: 10%;
? ?top: 50%;
? ?margin-top: -70px;
? ?text-shadow: 1px 1px 1px rgba(151, 24, 16, 0.2);
? ?-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.7s ease-in-out 0.2s backwards;
? ?-moz-animation: moveDown 0.7s ease-in-out 0.2s backwards;
? ?-o-animation: moveDown 0.7s ease-in-out 0.2s backwards;
? ?-ms-animation: moveDown 0.7s ease-in-out 0.2s backwards;
? ?animation: moveDown 0.7s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown {
? ?0%{
? ? ? ?-webkit-transform: translateY(-40px);
? ? ? ?opacity: 0;
? ?}
? ?100%{
? ? ? ?-webkit-transform: translateY(0px);
? ? ? ?opacity: 1;
? ?}
}
@-moz-keyframes moveDown {
? ?0%{
? ? ? ?-moz-transform: translateY(-40px);
? ? ? ?opacity: 0;
? ?}
? ?100%{
? ? ? ?-moz-transform: translateY(0px);
? ? ? ?opacity: 1;
? ?}
}
@-o-keyframes moveDown {
? ?0%{
? ? ? ?-o-transform: translateY(-40px);
? ? ? ?opacity: 0;
? ?}
? ?100%{
? ? ? ?-o-transform: translateY(0px);
? ? ? ?opacity: 1;
? ?}
}
@-ms-keyframes moveDown {
? ?0%{
? ? ? ?-ms-transform: translateY(-40px);
? ? ? ?opacity: 0;
? ?}
? ?100%{
? ? ? ?-ms-transform: translateY(0px);
? ? ? ?opacity: 1;
? ?}
}
.st-panel p{
? ?position: absolute;
? ?min-width: 50px;
? ?left: 25%;
? ?right: 25%;
? ?top:50%;
? ?padding:0px;
? ?font-size: 30px;
? ?line-height: 30px;
? ?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.7s ease-in-out 0.2s backwards;
? ?-moz-animation: moveUp 0.7s ease-in-out 0.2s backwards;
? ?-o-animation: moveUp 0.7s ease-in-out 0.2s backwards;
? ?-ms-animation: moveUp 0.7s ease-in-out 0.2s backwards;
? ?animation: moveUp 0.7s 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%{
? ? ? ?-moz-transform: translateY(40px);
? ? ? ?opacity: 0;
? ?}
? ?100%{
? ? ? ?-moz-transform: translateY(0px);
? ? ? ?opacity: 1;
? ?}
}
@-o-keyframes moveUp {
? ?0%{
? ? ? ?-o-transform: translateY(40px);
? ? ? ?opacity: 0;
? ?}
? ?100%{
? ? ? ?-o-transform: translateY(0px);
? ? ? ?opacity: 1;
? ?}
}
@-ms-keyframes moveUp {
? ?0%{
? ? ? ?-ms-transform: translateY(40px);
? ? ? ?opacity: 0;
? ?}
? ?100%{
? ? ? ?-ms-transform: translateY(0px);
? ? ? ?opacity: 1;
? ?}
}
.st-color{
? ?background:#fa96b5 ;
}
.st-color .st-desc{
? ?background: #FFFFFF;
}
.st-color .fa{
? ?color: #fa96b5;
}
.st-color h2{
? ?color: #FFFFFF;
? ?text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p{
? ?color: #FFFFFF;
}
@media screen and (max-width: 580px){
? ?.st-panel h2{
? ? ? ?font-size: 42px;
? ?}
? ?.st-panel p{
? ? ? ?width: 90%;
? ? ? ?left: 5%;
? ? ? ?right: 5%;
? ? ? ?margin-top: 10px;
? ?}
? ?.st-container>a{
? ? ? ?font-size: 8px;
? ?}
}
自己看著改