|
|
第1行: |
第1行: |
| <body>
| | |
| <div id="wrap">
| |
| <h2>暂时没有测试中的功能!</h2>
| |
| <br><br><br>
| |
| <div id="form-wrap">
| |
| <form>
| |
| <p>HELLO JOE,</p>
| |
| <label for="email">Your Message:</label>
| |
| <textarea name="message" id="message" value="Your Message"></textarea>
| |
|
| |
| <p>BEST,</p>
| |
| <label for="name">Name:</label>
| |
| <input type="text" name="name" value="" id="name" />
| |
|
| |
| <label for="email">Email:</label>
| |
| <input type="text" name="email" value="" id="email" />
| |
|
| |
| <input type="submit" name="submit" value="NOW, I SEND THANKS!" />
| |
| </form>
| |
| </div>
| |
| </div>
| |
| </body>
| |
| <style>
| |
| #wrap p{
| |
| font-family: tahoma;
| |
| font-size: 24px;
| |
| color: #757575;
| |
| }
| |
| #wrap{
| |
| width: 530px;
| |
| margin: 20px auto 0;
| |
| height: 1000px;
| |
| }
| |
| #wrap h2{
| |
| margin-bottom: 20px;
| |
| text-align: center;
| |
| font-size: 35px;
| |
| font-family: tahoma;
| |
| color: black;
| |
| }
| |
| #form-wrap{
| |
| height: 447px;
| |
| position: relative;
| |
| top: 0px;
| |
| transition: all 1s ease-in-out .3s;
| |
| }
| |
| #form-wrap:before{
| |
| content: "";
| |
| position: absolute;
| |
| bottom: 128px;
| |
| left: 0px;
| |
| background: url('https://www.hmoegirl.info/images/a/a9/Before.png');
| |
| width: 530px;
| |
| height: 317px;
| |
| }
| |
| #form-wrap:after{
| |
| content: "";
| |
| position: absolute;
| |
| bottom: 0px;
| |
| left: 0;
| |
| background: url('https://www.hmoegirl.info/images/c/c6/After.png');
| |
| width: 530px;
| |
| height: 259px;
| |
| }
| |
| #form-wrap.hide:after,
| |
| #form-wrap.hide:before{
| |
| display: none;
| |
| }
| |
| #form-wrap:hover{
| |
| height: 777px;
| |
| top: -200px;
| |
| }
| |
| #wrap form{
| |
| background: url('https://www.hmoegirl.info/images/c/cf/Letter_bg.png');
| |
| position: relative;
| |
| top: 200px;
| |
| height: 200px;
| |
| width: 400px;
| |
| margin: 0px auto;
| |
| padding: 20px;
| |
| border: 1px solid white;
| |
| border-right: 3px;
| |
| transition: all 1s ease-in-out .3s;
| |
| }
| |
| #form-wrap:hover form{
| |
| height: 530px;
| |
| }
| |
| #wrap lable{
| |
| margin: 11px 20px 0 0;
| |
| font-size: 15px;
| |
| color: gray;
| |
| text-transform: uppercase;
| |
| }
| |
| #wrap input[type=text], textarea{
| |
| font: 14px normal uppercase, arial, serif;
| |
| color: dimgray;
| |
| background: none;
| |
| width: 380px;
| |
| height: 37px;
| |
| padding: 0px 10px;
| |
| margin: 0 0 10px 0;
| |
| border: 1px solid #BDBDBD;
| |
| border-radius: 5px;
| |
| }
| |
| #wrap textarea{
| |
| height: 80px;
| |
| padding-top: 14px;
| |
| }
| |
| #form-wrap input[type=submit]{
| |
| position: relative;
| |
| font-family: tahoma;
| |
| font-size: 24px;
| |
| color: gray;
| |
| width: 300px;
| |
| text-align: center;
| |
| opacity: 0;
| |
| cursor: pointer;
| |
| border-radius: 3px;
| |
| transition: opacity 0.7s ease-in-out 0s;
| |
| }
| |
| #form-wrap:hover input[type=submit]{
| |
| z-index: 1;
| |
| opacity: 1;
| |
| transition: opacity 0.5s ease-in-out 1.3s;
| |
| }
| |
| #form-wrap.hide:before{
| |
| display: none;
| |
| }
| |
| </style>
| |