SHARE
TWEET

【4K画面】 gmindex3.html

basictomonokai Oct 3rd, 2016 (edited) 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html >
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS 3D Flipping Cards/Tiles</title>
  6.    
  7.    
  8.  
  9.    
  10.         <style>
  11.       /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
  12.       html, body {
  13.   background: #2c3e50;
  14. }
  15.  
  16. .container {
  17.   width: 90%;
  18. }
  19. .container h1, .container h2,.container h4 {
  20.   text-align: center;
  21.   color: white;
  22. }
  23. .container a {
  24.   color: inherit;
  25. }
  26.  
  27. .tiles {
  28.   width: 100%;
  29.   height: 100%;
  30. }
  31.  
  32. li {
  33.   width: 100px;
  34.   height: 100px;
  35.   display: inline-block;
  36.   position: relative;
  37.   -webkit-perspective: 800;
  38.   margin: 1px 2px;
  39. }
  40.  
  41. .tile {
  42.   width: 100%;
  43.   height: 100%;
  44.   position: absolute;
  45.   -webkit-transform-style: preserve-3d;
  46.   -webkit-transition: -webkit-transform 0.6s;
  47. }
  48. .tile .tile-front, .tile .tile-back {
  49.   position: absolute;
  50.   height: 100%;
  51.   width: 100%;
  52.   -webkit-backface-visibility: hidden;
  53. }
  54. .tile .tile-front {
  55.   background: #8e44ad;
  56.   -webkit-transition: -webkit-transform 0.3s;
  57. }
  58. .tile .tile-front:hover {
  59.   background: #9b59b6;
  60.   -webkit-transform: scale(1.0);
  61. }
  62. .tile .tile-back {
  63.   background-color: orange;
  64.   -webkit-transform: rotateY(180deg);
  65. }
  66. .tile .tile-back:hover {
  67.   background: #ffb733;
  68. }
  69. .tile .tile-back img {
  70.   width: 100%;
  71.   height: 100%;
  72. }
  73.  
  74. .tile.flipped {
  75.   -webkit-transform: rotateY(180deg);
  76. }
  77.  
  78. .disabled {
  79.   pointer-events: none;
  80.   opacity: 0.5;
  81. }
  82.  
  83.     </style>
  84.  
  85.    
  86. <style type="text/css">
  87. <!--
  88.  
  89. input {
  90.   width:80%;
  91.   font-size:1em;
  92.   border:1px solid #225588;
  93.   padding:10px 10px 10px 10px;
  94.   border-radius:5px;
  95.   margin-bottom:10px;
  96. }
  97.  
  98. #buttonx {
  99.   width:20%;
  100.   color:#ffffff;
  101.   background:#337fcc;
  102.   font-family: fantasy,sans-serif;
  103.   font-size:24px;
  104.   font-weight:bold;
  105.   text-shadow:0 1px 0px #143352,0 2px 0px #143352;
  106.   text-align:center;
  107.   display:inline-block;
  108.   text-decoration:none;
  109.   border:1px solid #225588;
  110.   padding:15px 0 12px 0;
  111.   border-radius:5px;
  112.   margin-bottom:10px;
  113. }
  114.  
  115. -->
  116.  
  117.  
  118. </style>    
  119.  
  120.  
  121. <script type="text/javascript">
  122.     function doDataLink(data) {
  123.         // alert(data);
  124.         Android.dataLink(data);
  125.     }
  126. </script>
  127.    
  128.   </head>
  129.  
  130.   <body>
  131.  
  132.     <div class="container">
  133.         <h1>4K衰弱</h1>
  134. <h4>きつい!苦しい!厳しい!気が重い! 4枚一致でOK!</h4>
  135.         <ul class="tiles"></ul>
  136.     </div>
  137.  
  138. <div>
  139. <a id="buttonx" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//x//')">やめる</a>
  140. </div>
  141.  
  142.     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  143.  
  144.         <script src="gmindex3.js"></script>
  145.  
  146.    
  147.    
  148.    
  149.   </body>
  150. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top