取り急ぎHTMLとCSSの勉強をしようとおもいサンプルをいじって組み合わせたりしていじっています。
JSを利用せずにボタンが沈む動きをさせたいと思ったのですが、CSSの:active
がうまく挙動しません。原因を教えていただきたいです。
HTML
1<!DOCTYPE html> 2<html lang="en" > 3<head> 4 <meta charset="UTF-8"> 5 <title>Waves</title> 6 <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 7<link rel="stylesheet" href="./style.css"> 8</head> 9<body> 10<!-- partial:index.partial.html --> 11 12 13<div id="keys"> 14 <div id="a" class="keybox"></div> 15 <div id="b" class="keybox"></div> 16 <div id="c" class="keybox"></div> 17 <div id="d" class="keybox"></div> 18 <div id="e" class="keybox"></div> 19 <div id="f" class="keybox"></div> 20 <div id="g" class="keybox"></div> 21 22</di 23 24 25</body> 26</html> 27 28
CSS
1html, body { 2 height: 100%; 3} 4 5html { 6 background: #eee; 7} 8 9body { 10 display: flex; 11 justify-content: center; 12 align-items: center; 13} 14 15.box { 16 width: 1000px; 17 height: 700px; 18 border-radius: 5px; 19 box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2); 20 background: #fbfcee; 21 position: relative; 22 overflow: hidden; 23 -webkit-transform: translate3d(0, 0, 0); 24 transform: translate3d(0, 0, 0); 25} 26 27 28.box:after { 29 content: ''; 30 display: block; 31 left: 0; 32 top: 0; 33 width: 100%; 34 height: 100%; 35 background: linear-gradient(to bottom, #ee88aa, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5)); 36 z-index: 11; 37 -webkit-transform: translate3d(0, 0, 0); 38 transform: translate3d(0, 0, 0); 39} 40 41.title { 42 position: absolute; 43 left: 0; 44 top: 0; 45 width: 100%; 46 z-index: 1; 47 line-height: 300px; 48 text-align: center; 49 -webkit-transform: translate3d(0, 0, 0); 50 transform: translate3d(0, 0, 0); 51 color: white; 52 text-transform: uppercase; 53 font-family: 'Playfair Display', serif; 54 letter-spacing: .4em; 55 font-size: 24px; 56 text-shadow: 0 1px 0 rg0ba(0, 0, 0, 0.1); 57 text-indent: .3em; 58} 59 60 61 62 63#keys{ 64 height: 116px; 65 width: 672px; 66 padding-right: 10px; 67 padding-top: 50px; 68 margin: auto; 69 position: absolute; 70 top: 0; left: 0; bottom: 0; right: 0; 71} 72 73.keybox { 74 width: 80px; 75 height: 80px; 76 margin-left: 10px; 77 float:left; 78 border-radius: 10px; 79 display: block; 80 -webkit-transition: all .15s ease-out; 81 transition: all .15s ease-out; 82} 83#a { 84 background-color: #E040FB; 85 box-shadow: 0px 6px 0px #AA00FF; 86} 87 88#b { 89 background-color: #7C4DFF; 90 box-shadow: 0px 6px 0px #6200EA; 91} 92 93#c { 94 background-color: #448AFF; 95 box-shadow: 0px 6px 0px #2962FF; 96} 97 98#d { 99 background-color: #9CCC65; 100 box-shadow: 0px 6px 0px #2E7D32; 101} 102 103#e { 104 background-color: #FFF176; 105 box-shadow: 0px 6px 0px #FFD600; 106} 107 108#f { 109 background-color: #FFB74D; 110 box-shadow: 0px 6px 0px #FF9100; 111} 112 113#g { 114 background-color: #FF7043; 115 box-shadow: 0px 6px 0px #F4511E; 116} 117 118.keybox.active { 119 box-shadow: none; 120 margin-top: 5px;active 121 transform: translateY(4px); 122 border-bottom: none; 123 124} 125 126#a.active { 127 background-color: #AA00FF; 128 129} 130 131#b.active { 132 background-color: #6200EA; 133} 134 135#c.active { 136 background-color: #2962FF; 137} 138 139#d.active { 140 background-color: #2E7D32; 141} 142 143#e.active { 144 background-color: #FFD600; 145} 146 147#f.active { 148 background-color: #FF9100; 149} 150 151#g.active { 152 background-color: #F4511E; 153} 154 155 156 157 158@-webkit-keyframes drift { 159 from { 160 -webkit-transform: rotate(0deg); 161 transform: rotate(0deg); 162 } 163 from { 164 -webkit-transform: rotate(360deg); 165 transform: rotate(360deg); 166 } 167} 168 169@keyframes drift { 170 from { 171 -webkit-transform: rotate(0deg); 172 transform: rotate(0deg); 173 } 174 from { 175 -webkit-transform: rotate(360deg); 176 transform: rotate(360deg); 177 } 178} 179
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/30 12:12
2019/08/30 12:51