Created
May 17, 2018 05:08
-
-
Save Iruyan-Zak/aad7ad8682af377e708242eb1bae0e52 to your computer and use it in GitHub Desktop.
New gender selection form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <title>Spin radio button</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="forms-area"> | |
| <h3>性別</h3> | |
| <div class="classic-area"> | |
| <div class="" ><input type="radio" name="classic-gender" value="1"> 男性</div> | |
| <div class="" ><input type="radio" name="classic-gender" value="2"> 女性</div> | |
| <div class="" ><input type="radio" name="classic-gender" value="9"> その他</div> | |
| </div> | |
| <div class="gender-area"> | |
| <div class="radio " id="gender9"><input type="radio" name="gender" value="9"> その他</div> | |
| <div class="radio " id="gender2"><input type="radio" name="gender" value="2"> 女性</div> | |
| <div class="radio " id="gender1"><input type="radio" name="gender" value="1"> 男性</div> | |
| </div> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| width: 80%; | |
| margin: auto; | |
| } | |
| h3 { | |
| border-bottom-style: solid; | |
| border-width: 1.5px; | |
| } | |
| .forms-area{ | |
| margin-top: 24px; | |
| } | |
| .gender-area{ | |
| position: relative; | |
| margin-top: 80px; | |
| margin-left: 96px; | |
| } | |
| .radio { | |
| position: absolute; | |
| transform-origin: left; | |
| width: 160px; | |
| } | |
| #gender1 { | |
| -webkit-animation: spin1 8s linear infinite; | |
| animation: spin1 8s linear infinite; | |
| } | |
| #gender2 { | |
| -webkit-animation: spin2 8s linear infinite; | |
| animation: spin2 8s linear infinite; | |
| } | |
| #gender9 { | |
| -webkit-animation: spin9 8s linear infinite; | |
| animation: spin9 8s linear infinite; | |
| } | |
| @-webkit-keyframes spin1 { | |
| 0% {-webkit-transform: rotate(0deg);} | |
| 100% {-webkit-transform: rotate(360deg);} | |
| } | |
| @keyframes spin1 { | |
| 0% {transform: rotate(0deg);} | |
| 100% {transform: rotate(360deg);} | |
| } | |
| @-webkit-keyframes spin2 { | |
| 0% {-webkit-transform: rotate(120deg);} | |
| 100% {-webkit-transform: rotate(480deg);} | |
| } | |
| @keyframes spin2 { | |
| 0% {transform: rotate(120deg);} | |
| 100% {transform: rotate(480deg);} | |
| } | |
| @-webkit-keyframes spin9 { | |
| 0% {-webkit-transform: rotate(240deg);} | |
| 100% {-webkit-transform: rotate(600deg);} | |
| } | |
| @keyframes spin9 { | |
| 0% {transform: rotate(240deg);} | |
| 100% {transform: rotate(600deg);} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
These codes are license free so you can use these for any purpose.
But leaving comments when these help you or you use these, I'll be glad : )