(22 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: | + | 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 234: | Line 234: | ||
width: 800px; | width: 800px; | ||
height: 500px; | height: 500px; | ||
− | float: | + | float: center; |
position: relative; | position: relative; | ||
} | } | ||
Line 272: | Line 272: | ||
animation: show 16s infinite; | animation: show 16s infinite; | ||
-webkit-animation: show 16s infinite; | -webkit-animation: show 16s infinite; | ||
− | border-radius: | + | border-radius: 100%; |
height: auto; | height: auto; | ||
max-width: 100%; | max-width: 100%; | ||
Line 309: | Line 309: | ||
.photo-show img:nth-of-type(3) { | .photo-show img:nth-of-type(3) { | ||
animation-delay: 8s; | animation-delay: 8s; | ||
− | -webkit-animation-delay: | + | -webkit-animation-delay: 4s; |
} | } | ||
Line 327: | Line 327: | ||
} | } | ||
+ | .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; | ||
+ | } | ||
/*マウスが画像に重なった際、動きを止めて四角くする*/ | /*マウスが画像に重なった際、動きを止めて四角くする*/ | ||
Line 341: | Line 414: | ||
border-radius: 0; | 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