依田 テスト
書き方うる覚えです
いろいろテストいたします。
コードからプレビュー?に切り替えるとコードの並びが崩れる。
エディタとしては不向きおそらく、別のエディタで作成し、コピペをする運用方法になる
レイヤード要らずのカットソーBW
名前 | 年齢 | 血液型 |
さとう | 19 | A型 |
のざわ | 24 | O型 |
まなべ | 20 | B型 |
|
|
|
/*全体*/html, body {background: rgb(20,20,20);text-align: center;height: 100%;overflow: hidden;}/*ボタンの表示位置*/.svg-wrapper {position: relative;top: 50%;transform: translateY(-50%);margin: 0 auto;width: 320px;}/*初期表示のラインとラインの動き*/.shape {stroke-dasharray: 140 540;stroke-dashoffset: -474;stroke-width: 8px;fill: transparent;stroke: #19f6e8;border-bottom: 5px solid black;transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;}/*文字*/.text {font-family: 'Roboto Condensed';font-size: 8px;line-height: 16px;letter-spacing: 1px;color: #fff;top: -48px;position: relative;}/*ラインの動き*/@keyframes draw {0% {stroke-dasharray: 140 540;stroke-dashoffset: -474;stroke-width: 8px;}100% {stroke-dasharray: 760;stroke-dashoffset: 0;stroke-width: 2px;}}/*マウスオンした時の動き*/.svg-wrapper:hover .shape {-webkit-animation: 0.5s draw linear forwards;animation: 0.5s draw linear forwards;}May FORCE will guide you. I meant ME.