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

 
(47 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 {
 +
  width: 800px;
 +
  height: 500px;
 +
  overflow: hidden;
 +
}
 +
 +
.slide-item {
 +
  width: 800px;
 +
  height: 500px;
 +
  float: center;
 +
  position: relative;
 +
}
 +
 +
 +
.slider-wrapper {
 +
  width: 300%;
 +
  position: relative;
 +
  left: 0;
 +
  will-change: transform;
 +
  animation: slider 10s infinite;
 +
}
 +
 +
@keyframes slider {
 +
  0% { transform: translateX(0); }
 +
  33% { transform: translateX(-300px); }
 +
  66% { transform: translateX(-600px); }
 +
  100% { transform: translateX(0); }
 +
}
 +
 +
 +
img.n1 {
 +
  vertical-align: middle;
 +
}
 +
 +
img.n1 {
 +
  vertical-align: middle;
 +
}
  
 
.photo-show {  
 
.photo-show {  
−
     height: 300px;  
+
     margin: 30px auto; /*縦余白30pxは任意*/
−
     max-width: 100%;
+
     max-width: 90%;
 
     position: relative;
 
     position: relative;
−
    width: 300px;
 
 
}
 
}
  
Line 235: Line 272:
 
     animation: show 16s infinite;
 
     animation: show 16s infinite;
 
     -webkit-animation: show 16s infinite;
 
     -webkit-animation: show 16s infinite;
−
     border-radius: 50%;
+
     border-radius: 100%;
 
     height: auto;
 
     height: auto;
 
     max-width: 100%;
 
     max-width: 100%;
 
     opacity: 0;
 
     opacity: 0;
−
     position: absolute;  
+
     position: absolute; /*画像を全て重ねる*/
 
}
 
}
  
−
 
+
/*アニメーション*/
  
 
@keyframes show {
 
@keyframes show {
Line 258: Line 295:
 
}
 
}
  
−
 
+
/*各画像のアニメーションの開始時間をずらす*/
  
 
.photo-show img:nth-of-type(1) {
 
.photo-show img:nth-of-type(1) {
Line 266: Line 303:
  
 
.photo-show img:nth-of-type(2) {
 
.photo-show img:nth-of-type(2) {
−
     animation-delay: 2s;
+
     animation-delay: 4s;
 
     -webkit-animation-delay: 2s;
 
     -webkit-animation-delay: 2s;
 
}
 
}
  
 
.photo-show img:nth-of-type(3) {
 
.photo-show img:nth-of-type(3) {
−
     animation-delay: 4s;
+
     animation-delay: 8s;
 
     -webkit-animation-delay: 4s;
 
     -webkit-animation-delay: 4s;
 
}
 
}
  
 
.photo-show img:nth-of-type(4) {
 
.photo-show img:nth-of-type(4) {
−
     animation-delay: 6s;
+
     animation-delay: 12s;
 
     -webkit-animation-delay: 6s;
 
     -webkit-animation-delay: 6s;
 
}
 
}
  
 
.photo-show img:nth-of-type(5) {
 
.photo-show img:nth-of-type(5) {
−
     animation-delay: 8s;
+
     animation-delay: 16s;
−
     -webkit-animation-delay: 8s
+
     -webkit-animation-delay: 8s;
 
}
 
}
  
 
.photo-show img:nth-of-type(6) {
 
.photo-show img:nth-of-type(6) {
−
     animation-delay: 10s;
+
     animation-delay: 20s;
 
     -webkit-animation-delay: 10s;
 
     -webkit-animation-delay: 10s;
 
}
 
}
  
 
.photo-show img:nth-of-type(7) {
 
.photo-show img:nth-of-type(7) {
−
     animation-delay: 12s;
+
     animation-delay: 24s;
 
     -webkit-animation-delay: 12s;
 
     -webkit-animation-delay: 12s;
−
}  
+
}
 +
 
 
.photo-show img:nth-of-type(8) {
 
.photo-show img:nth-of-type(8) {
−
     animation-delay: 14s;
+
     animation-delay: 28s;
 
     -webkit-animation-delay: 14s;
 
     -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 {
 
.photo-show img {
Line 312: Line 415:
 
}
 
}
  
−
/* Ref: https://q-az.net/slideshow-only-css/ */
+
 
 +
.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