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

Line 263: Line 263:
 
}
 
}
  
−
#aspslide{
+
.photo-show {  
−
      position: relative;    
+
    height: 440px; /*表示したい大きさ*/
−
      width: 900px;
+
    margin: 30px auto; /*縦余白30pxは任意*/
−
      height: 318px;
+
    max-width: 100%;
−
      overflow:hidden;
+
    position: relative;
−
      padding:0!important;
+
    width: 440px; /*表示したい大きさ、height と合わせる*/
 
}
 
}
  
−
.slideshow{
+
.photo-show img {  
−
      position: absolute;
+
    animation: show 16s infinite;
−
      top: 0;
+
    -webkit-animation: show 16s infinite;
−
      left: 0;
+
    border-radius: 50%;
−
      width: 100%;
+
    height: auto;
−
      height: 100%;
+
    max-width: 100%;
−
      padding:0!important;
+
    opacity: 0;
−
}  
+
    position: absolute; /*画像を全て重ねる*/
 +
}
  
 +
/*アニメーション*/
  
−
#slideshow1{
+
@keyframes show {
−
      -moz-animation: fadeinout 15s 0s infinite;
+
    0% {opacity:0}
−
      -webkit-animation: fadeinout 15s 0s infinite;
+
    5% {opacity:1}
−
      -o-animation: fadeinout 15s 0s infinite;
+
    10% {opacity:1}
−
      -ms-animation: fadeinout 15s 0s infinite;
+
    20% {opacity:0}
−
      animation: fadeinout 15s 0s infinite;
+
}
 +
 
 +
@-webkit-keyframes show {
 +
    0% {opacity:0}
 +
    5% {opacity:1}
 +
    10% {opacity:1}
 +
    20% {opacity:0}
 
}
 
}
  
−
#slideshow2{
+
/*各画像のアニメーションの開始時間をずらす*/
−
      -moz-animation: fadeinout 15s 10s infinite;
+
 
−
      -webkit-animation: fadeinout 15s 10s infinite;
+
.photo-show img:nth-of-type(1) {
−
      -o-animation: fadeinout 15s 10s infinite;
+
    animation-delay: 0s;
−
      -ms-animation: fadeinout 15s 10s infinite;
+
    -webkit-animation-delay: 0s;
−
      animation: fadeinout 15s 10s infinite;
+
}
 +
 
 +
.photo-show img:nth-of-type(2) {
 +
    animation-delay: 2s;
 +
    -webkit-animation-delay: 2s;
 +
}
 +
 
 +
.photo-show img:nth-of-type(3) {
 +
    animation-delay: 4s;
 +
    -webkit-animation-delay: 4s;
 +
}
 +
 
 +
 
 +
/*マウスが画像に重なった際、動きを止めて四角くする*/
 +
 
 +
.photo-show img {
 +
    transition: 0.2s;
 +
    -webkit-transition: 0.2s;
 
}
 
}
  
−
#slideshow3{
+
.photo-show:hover img {
−
      -moz-animation: fadeinout 15s 15s infinite;
+
    animation-play-state: paused;
−
      -webkit-animation: fadeinout 15s 10s infinite;
+
    -webkit-animation-play-state: paused;
−
      -o-animation: fadeinout 15s 15s infinite;
+
    border-radius: 0;
−
      -ms-animation: fadeinout 15s 15s infinite;
+
−
      animation: fadeinout 15s 15s infinite;
+
 
}
 
}
 
</style>
 
</style>
  
 
</html>
 
</html>

Revision as of 17:35, 31 October 2017