daily pastebin goal
33%
SHARE
TWEET

【2K画面】 gmindex.html

basictomonokai Oct 3rd, 2016 (edited) 78 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: #0077ea;
  14. }
  15.  
  16.  
  17. .container {
  18.   width: 90%;
  19. }
  20. .container h1, .container h2,.container h4 {
  21.   text-align: center;
  22.   color: white;
  23. }
  24. .container a {
  25.   color: inherit;
  26. }
  27.  
  28. .tiles {
  29.   width: 100%;
  30.   height: 100%;
  31. }
  32.  
  33. li {
  34.   width: 100px;
  35.   height: 100px;
  36.   display: inline-block;
  37.   position: relative;
  38.   -webkit-perspective: 800;
  39.   margin: 1px 2px;
  40. }
  41.  
  42. .tile {
  43.   width: 100%;
  44.   height: 100%;
  45.   position: absolute;
  46.   -webkit-transform-style: preserve-3d;
  47.   -webkit-transition: -webkit-transform 0.6s;
  48. }
  49. .tile .tile-front, .tile .tile-back {
  50.   position: absolute;
  51.   height: 100%;
  52.   width: 100%;
  53.   -webkit-backface-visibility: hidden;
  54. }
  55. .tile .tile-front {
  56.   background: dodgerblue;
  57.   -webkit-transition: -webkit-transform 0.3s;
  58. }
  59. .tile .tile-front:hover {
  60.   background: #51a9ff;
  61.   -webkit-transform: scale(1.0);
  62. }
  63. .tile .tile-back {
  64.   background-color: orange;
  65.   -webkit-transform: rotateY(180deg);
  66. }
  67. .tile .tile-back:hover {
  68.   background: #ffb733;
  69. }
  70. .tile .tile-back img {
  71.   width: 100%;
  72.   height: 100%;
  73. }
  74.  
  75. .tile.flipped {
  76.   -webkit-transform: rotateY(180deg);
  77. }
  78.  
  79. .disabled {
  80.   pointer-events: none;
  81.   opacity: 0.5;
  82. }
  83.  
  84.     </style>
  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. <script type="text/javascript">
  121.     function doDataLink(data) {
  122.         // alert(data);
  123.         Android.dataLink(data);
  124.     }
  125. </script>    
  126.  
  127.    
  128.   </head>
  129.  
  130.   <body>
  131.  
  132.     <div class="container">
  133.         <h1>2K衰弱</h1>
  134. <h4>簡単♪簡単♪ 2枚一致でOK!普通の神経衰弱</h4>
  135. <h4>codepen.ioのゲームをバグ修正しただけ…</h4>
  136.         <ul class="tiles"></ul>
  137.     </div>
  138.  
  139. <div>
  140. <a id="buttonx" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//x//')">やめる</a>
  141. </div>
  142.  
  143.  
  144.  
  145.     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  146.  
  147.         <script src="gmindex.js"></script>
  148.  
  149.    
  150.    
  151.    
  152.   </body>
  153. </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