Difference between revisions of "Template:TokyoTech/css/main"

 
(40 intermediate revisions by the same user not shown)
Line 30: Line 30:
 
/* End extract */
 
/* End extract */
 
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
 
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
−
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
+
h1{font-size:32px}h2{font-size:28px}h3{font-size:26px}h4{font-size:24px}h5{font-size:20px}h6{font-size:16px}.w3-serif{font-family:serif}
−
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
+
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0;line-height: 150%}.w3-wide{letter-spacing:4px}
 
hr{border:0;border-top:1px solid #eee;margin:20px 0}
 
hr{border:0;border-top:1px solid #eee;margin:20px 0}
 
.w3-image{max-width:100%;height:auto}img{margin-bottom:-5px}a{color:inherit}
 
.w3-image{max-width:100%;height:auto}img{margin-bottom:-5px}a{color:inherit}
Line 224: Line 224:
 
ul.click_menu_checkbox ul { display: none; }
 
ul.click_menu_checkbox ul { display: none; }
 
ul.click_menu_checkbox input:checked ~ ul { display: block; }
 
ul.click_menu_checkbox input:checked ~ ul { display: block; }
−
 
  
 
#css-slider {
 
#css-slider {
Line 235: Line 234:
 
   width: 800px;
 
   width: 800px;
 
   height: 500px;
 
   height: 500px;
−
   float: left;
+
   float: center;
 
   position: relative;
 
   position: relative;
 
}
 
}
Line 263: Line 262:
 
   vertical-align: middle;
 
   vertical-align: middle;
 
}
 
}
 +
 +
.photo-show {
 +
    margin: 30px auto; /*縦余白30pxは任意*/
 +
    max-width: 90%;
 +
    position: relative;
 +
}
 +
 +
.photo-show img {
 +
    animation: show 16s infinite;
 +
    -webkit-animation: show 16s infinite;
 +
    border-radius: 100%;
 +
    height: auto;
 +
    max-width: 100%;
 +
    opacity: 0;
 +
    position: absolute; /*画像を全て重ねる*/
 +
}
 +
 +
/*アニメーション*/
 +
 +
@keyframes show {
 +
    0% {opacity:0}
 +
    5% {opacity:1}
 +
    10% {opacity:1}
 +
    20% {opacity:0}
 +
}
 +
 +
@-webkit-keyframes show {
 +
    0% {opacity:0}
 +
    5% {opacity:1}
 +
    10% {opacity:1}
 +
    20% {opacity:0}
 +
}
 +
 +
/*各画像のアニメーションの開始時間をずらす*/
 +
 +
.photo-show img:nth-of-type(1) {
 +
    animation-delay: 0s;
 +
    -webkit-animation-delay: 0s;
 +
}
 +
 +
.photo-show img:nth-of-type(2) {
 +
    animation-delay: 4s;
 +
    -webkit-animation-delay: 2s;
 +
}
 +
 +
.photo-show img:nth-of-type(3) {
 +
    animation-delay: 8s;
 +
    -webkit-animation-delay: 4s;
 +
}
 +
 +
.photo-show img:nth-of-type(4) {
 +
    animation-delay: 12s;
 +
    -webkit-animation-delay: 6s;
 +
}
 +
 +
.photo-show img:nth-of-type(5) {
 +
    animation-delay: 16s;
 +
    -webkit-animation-delay: 8s;
 +
}
 +
 +
.photo-show img:nth-of-type(6) {
 +
    animation-delay: 20s;
 +
    -webkit-animation-delay: 10s;
 +
}
 +
 +
.photo-show img:nth-of-type(7) {
 +
    animation-delay: 24s;
 +
    -webkit-animation-delay: 12s;
 +
}
 +
 +
.photo-show img:nth-of-type(8) {
 +
    animation-delay: 28s;
 +
    -webkit-animation-delay: 14s;
 +
}
 +
 +
.photo-show img:nth-of-type(9) {
 +
    animation-delay: 32s;
 +
    -webkit-animation-delay: 16s;
 +
}
 +
 +
.photo-show img:nth-of-type(10) {
 +
    animation-delay: 36s;
 +
    -webkit-animation-delay: 18s;
 +
}
 +
 +
.photo-show img:nth-of-type(12) {
 +
    animation-delay: 40s;
 +
    -webkit-animation-delay: 20s;
 +
}
 +
 +
.photo-show img:nth-of-type(13) {
 +
    animation-delay: 44s;
 +
    -webkit-animation-delay: 22s;
 +
}
 +
 +
.photo-show img:nth-of-type(14) {
 +
    animation-delay: 48s;
 +
    -webkit-animation-delay: 24s;
 +
}
 +
 +
.photo-show img:nth-of-type(15) {
 +
    animation-delay: 52s;
 +
    -webkit-animation-delay: 26s;
 +
}
 +
 +
.photo-show img:nth-of-type(16) {
 +
    animation-delay: 56s;
 +
    -webkit-animation-delay: 28s;
 +
}
 +
 +
.photo-show img:nth-of-type(17) {
 +
    animation-delay: 60s;
 +
    -webkit-animation-delay: 30s;
 +
}
 +
 +
.photo-show img:nth-of-type(18) {
 +
    animation-delay: 64s;
 +
    -webkit-animation-delay: 32s;
 +
}
 +
 +
.photo-show img:nth-of-type(19) {
 +
    animation-delay: 68s;
 +
    -webkit-animation-delay: 34s;
 +
}
 +
 +
.photo-show img:nth-of-type(20) {
 +
    animation-delay: 72s;
 +
    -webkit-animation-delay: 36s;
 +
}
 +
 +
.photo-show img:nth-of-type(21) {
 +
    animation-delay: 76s;
 +
    -webkit-animation-delay: 38s;
 +
}
 +
 +
.photo-show img:nth-of-type(22) {
 +
    animation-delay: 80s;
 +
    -webkit-animation-delay: 40s;
 +
}
 +
 +
/*マウスが画像に重なった際、動きを止めて四角くする*/
 +
 +
.photo-show img {
 +
    transition: 0.2s;
 +
    -webkit-transition: 0.2s;
 +
}
 +
 +
.photo-show:hover img {
 +
    animation-play-state: paused;
 +
    -webkit-animation-play-state: paused;
 +
    border-radius: 0;
 +
}
 +
 +
 +
.scale img {
 +
    -moz-transition: -moz-transform 0.5s linear;
 +
    -webkit-transition: -webkit-transform 0.5s linear;
 +
    -o-transition: -o-transform 0.5s linear;
 +
    -ms-transition: -ms-transform 0.5s linear;
 +
    transition: transform 0.5s linear;
 +
}
 +
.scale img:hover {
 +
    -webkit-transform: scale();
 +
    -moz-transform: scale(1.2);
 +
    -o-transform: scale(1.2);
 +
    -ms-transform: scale(1.2);
 +
    transform: scale(1.2);
 +
}
 +
 +
#loader-bg {
 +
  display: none;
 +
  position: fixed;
 +
  width: 100%;
 +
  height: 100%;
 +
  top: 0px;
 +
  left: 0px;
 +
  background: #fff;
 +
  z-index: 1;
 +
}
 +
#loader {
 +
  display: none;
 +
  position: fixed;
 +
  top: 50%;
 +
  left: 50%;
 +
  width: 300px;
 +
  height: 300px;
 +
  margin-top:-200px;
 +
  margin-left:-200px
 +
  text-align: center;
 +
  color: #333333;
 +
  z-index: 2;
 +
}
 +
  
 
</style>
 
</style>
  
 
</html>
 
</html>

Latest revision as of 11:44, 1 November 2017