Difference between revisions of "Team:Tongji-Software"

Line 1: Line 1:
−
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<!doctype html>
−
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html lang="en" class="fullHeight">
 
<head>
 
<head>
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
    <meta charset="UTF-8">
−
<title>CSS3点击显示</title>
+
    <title>demo</title>
 +
    <link rel="stylesheet" type="text/css" href="sidebar.css">
 +
</head>
 
<style>
 
<style>
−
*{ margin:0; padding:0; }
+
/**************************************************************************************************************************************************************************************************/
−
html{ height:100%; }
+
 
−
p{ padding:10px 0; }
+
 
−
body{ min-height:100%; font-family:arial; position:relative; }
+
 
−
body.sideMenu{ margin:0; -webkit-transform:none; transform:none; }
+
/**************************************************************************************************************************************************************************************************/
−
#footer {
+
/* DEFAULT WIKI SETTINGS */
−
position:relative;
+
/**************************************************************************************************************************************************************************************************/
−
bottom:0; left:0;
+
 
−
width:100%;
+
 
−
height:48px;
+
#home_logo, #sideMenu { display:none; }
−
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
+
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
padding:0;
+
 
−
border-top:1px solid #444; transition:0.25s ease-out; -webkit-transition:0.25s ease-out;
+
 
−
}
+
 
−
#sideToggle{ display:none; }
+
/* 动画定义 */
−
#sideToggle:checked + aside{ left:0; }
+
@-webkit-keyframes move_right {
−
#sideToggle:checked ~ #wrap{ padding-left:220px; }
+
    from {
−
#sideToggle:checked ~ #footer{margin-left:200px; }
+
        opacity: 0;
−
body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }
+
−
body > aside > h2{ color:#FFF; text-align:center; font-weight:normal; padding:10px; }
+
−
#wrap{ margin-left:20px; padding:10px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }
+
−
  #wrap > label{ display:inline-block; }
+
−
    #wrap > label{
+
−
      background:#f1103a;
+
−
      border-radius:50px;
+
−
      color: #FFF;
+
−
      cursor: pointer;
+
−
      display: block;
+
−
      font-family: Courier New;
+
−
      font-size: 25px;
+
−
      font-weight: bold;
+
−
      width: 30px;
+
−
      height: 30px;
+
−
      line-height: 35px;
+
−
      text-align: center;
+
−
      text-shadow: 0 -4px;
+
 
     }
 
     }
−
     #wrap > label:hover{ background:#000; }
+
     to {
−
+
        opacity: 1;
 +
        -webkit-transform: translateX(120px);
 +
        transform: translateX(120px);
 +
    }
 +
}
 +
@keyframes move_right {
 +
    from {
 +
        opacity: 0;
 +
    }
 +
    to {
 +
        opacity: 1;
 +
        -webkit-transform: translateX(120px);
 +
        transform: translateX(120px);
 +
    }
 +
}
 +
@-webkit-keyframes move_left {
 +
    from {
 +
        opacity: 1;
 +
    }
 +
    to {
 +
        opacity: 0;
 +
        -webkit-transform: translateX(-120px);
 +
        transform: translateX(-120px);
 +
    }
 +
}
 +
@keyframes move_left {
 +
    from {
 +
        opacity: 1;
 +
    }
 +
    to {
 +
        opacity: 0;
 +
        -webkit-transform: translateX(-120px);
 +
        transform: translateX(-120px);
 +
    }
 +
}
 +
@-webkit-keyframes move_up {
 +
    from {
 +
        opacity: 0;
 +
    }
 +
    to {
 +
        opacity: 1;
 +
        -webkit-transform: translateY(-250px);
 +
        transform: translateY(-250px);
 +
    }
 +
}
 +
@keyframes move_up {
 +
    from {
 +
        opacity: 0;
 +
    }
 +
    to {
 +
        opacity: 1;
 +
        -webkit-transform: translateY(-250px);
 +
        transform: translateY(-250px);
 +
    }
 +
}
 +
 
 +
/* 动画绑定 */
 +
.move_right {
 +
    -webkit-animation-name            : move_right;
 +
    animation-name            : move_right;
 +
    -webkit-animation-duration        : 1s;
 +
    animation-duration        : 1s;
 +
    -webkit-animation-iteration-count : 1;
 +
    animation-iteration-count : 1;
 +
    -webkit-animation-fill-mode : forwards;
 +
    animation-fill-mode : forwards;
 +
}
 +
.move_left {
 +
    -webkit-animation-name            : move_left;
 +
    animation-name            : move_left;
 +
    -webkit-animation-duration        : 1s;
 +
    animation-duration        : 1s;
 +
    -webkit-animation-iteration-count : 1;
 +
    animation-iteration-count : 1;
 +
    -webkit-animation-fill-mode : forwards;
 +
    animation-fill-mode : forwards;
 +
}
 +
.move_up {
 +
    -webkit-animation-name            : move_up;
 +
    animation-name            : move_up;
 +
    -webkit-animation-duration        : 1s;
 +
    animation-duration        : 1s;
 +
    -webkit-animation-iteration-count : 1;
 +
    animation-iteration-count : 1;
 +
    -webkit-animation-fill-mode : forwards;
 +
    animation-fill-mode : forwards;
 +
}
 +
.fadeIn {
 +
    -webkit-transform : translateX(120px);
 +
    transform : translateX(120px);
 +
    opacity: 1;
 +
}
 +
.fadeInUp {
 +
    -webkit-transform : translateY(-250px);
 +
    transform : translateY(-250px);
 +
    opacity: 1;
 +
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
 +
    transition :transform .2s ease-out, opacity .2s ease-out;
 +
}
 +
.fadeOutLeft {
 +
    -webkit-transform : translateX(-120px);
 +
    transform : translateX(-120px);
 +
    opacity: 0.0;
 +
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
 +
    transition :transform .2s ease-out, opacity .2s ease-out;
 +
}
 
</style>
 
</style>
−
</head>
+
<body class="fullHeight">
−
<body>
+
    <div class='sidebar fullHeight'>sidebar</div>
−
<input type='checkbox' id='sideToggle'>
+
    <div class="controller">
−
<aside><h2>Side Menu</h2></aside>
+
        <div>
−
<div id='wrap'>
+
            <button onclick="fadeIn()">淡进</button>
−
<label id='sideMenuControl' for='sideToggle'>=</label>
+
            <button onclick="fadeOut()">淡出</button>
−
<p>HTML5/CSS3点击显示侧边框  </p>
+
        </div>
−
</div>
+
        <div>
−
<div id="footer"></div>
+
            <button onclick="fadeInUp()">向上淡进</button>
 +
            <button onclick="fadeOutLeft()">向左淡出</button>
 +
        </div>
 +
    </div>
 +
    <script src="sidebarEffects.js"></script>
 
</body>
 
</body>
 +
 +
<script>
 +
var sidebarEl = document.querySelector(".sidebar");
 +
 +
function fadeIn (e) {
 +
    sidebarEl.className = 'sidebar fullHeight';
 +
    sidebarEl.style.top = '0px';
 +
    sidebarEl.style.left = '0px';
 +
    sidebarEl.classList.add('move_right');
 +
}
 +
function fadeOut (e) {
 +
    sidebarEl.className = 'sidebar fullHeight';
 +
    sidebarEl.style.left = '120px';
 +
    sidebarEl.classList.add('move_left');
 +
}
 +
function fadeInUp(e) {
 +
    sidebarEl.className = 'sidebar fullHeight';
 +
    sidebarEl.style.top = '250px';
 +
    sidebarEl.style.left = '120px';
 +
    sidebarEl.classList.add('move_up');
 +
 +
}
 +
function fadeOutLeft(e) {
 +
    sidebarEl.className = 'sidebar fullHeight';
 +
    sidebarEl.style.top = '0px';
 +
    sidebarEl.style.left = '120px';
 +
    sidebarEl.classList.add('move_left');
 +
 +
}
 +
</script>
 
</html>
 
</html>

Revision as of 08:49, 7 October 2018

<!doctype html> demo

sidebar