contactページ
<form action="" method="post" id="g-form"> <dl> <dt>お名前</dt> <dd><input type="text" name="" required placeholder="お名前を入力して下さい" autocomplete="name"></dd> <dt>メールアドレス</dt> <dd><input type="email" name="" required placeholder="メールアドレスを入力して下さい" autocomplete="email"></dd> <dt>お問い合わせ内容</dt> <dd><textarea name="" required placeholder="お問い合わせ内容を入力してください"></textarea></dd> </dl> <div class="btn-wrapper"> <input type="submit" value="送信"> <input type="reset" value="リセット"> </div> </form>
svgアニメーション
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字のアニメーショ</title> <style> html,body{ margin: 0; padding: 0; } body{ background-color: crimson; } .box{ width: 600px; margin: 100px auto 0; } #txt path{ stroke:#FFF; fill:crimson;/* 塗りの色 */ stroke-dasharray: 270px; stroke-dashoffset: 270px; animation: txt-anime 3s 0.5s linear forwards; } @keyframes txt-anime{ 0%{stroke-dashoffset: 270px;} 80%{stroke-dashoffset: 0;fill:crimson;} 100%{stroke-dashoffset: 0;fill:#FFF;} } </style> </head> <body> <div class="box"> <svg version="1.1" id="txt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 404 122" style="enable-background:new 0 0 404 122;" xml:space="preserve"> <path id="XMLID_153_" d="M41.4,68V50.5c4,0,6-1.5,6-4.6c0-2.8-1.5-4.2-4.6-4.2c-3.1,0-4.6,1.9-4.6,5.8V91H18.3V49.5 c0-4.3,0.4-7.8,1.3-10.6c0.9-2.8,2.3-5.3,4.4-7.7c2.3-2.6,5.3-4.7,8.8-6.3c3.5-1.5,7.1-2.3,10.9-2.3c6.8,0,12.5,2.3,17.1,6.8 c4.6,4.6,6.9,10.2,6.9,16.9c0,6.5-2.1,11.8-6.2,15.9C57.7,66.1,52,68,44.4,68L41.4,68z"/> <path id="XMLID_155_" d="M97.6,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4 c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C84.1,43.7,90.3,41.3,97.6,41.3z M97.1,59.3 c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2 c0-2.1-0.7-3.8-2.1-5.2S99.1,59.3,97.1,59.3z"/> <path id="XMLID_158_" d="M157.1,41.8v19.5c-1.3-0.7-2.4-1.1-3.5-1.1c-3.3,0-5,2.5-5,7.6V91h-18.3V64.4c0-7,1.9-12.6,5.8-16.8 c3.8-4.2,9-6.3,15.4-6.3C153,41.3,154.8,41.5,157.1,41.8z"/> <path id="XMLID_160_" d="M178.7,24.3V43h8.2v19.3h-8.2c0,3.9,0.6,6.5,1.8,8s3.5,2.2,6.7,2.2v19.2c-0.9,0-1.6,0-2.1,0 c-4.1,0-8-1-11.7-2.9c-3.7-1.9-6.6-4.5-8.8-7.8c-2.8-4.2-4.2-9.8-4.2-16.7v-40H178.7z"/> <path id="XMLID_162_" d="M222.3,53.1v19.1h-8.2V91h-18.3V49.6c0-4.7,0.8-8.6,2.4-11.9c2-4.2,5.1-7.6,9.2-10.3c4.1-2.7,8.4-4,12.9-4 l2,0v19.1c-0.4,0-0.7,0-0.9,0c-2.3,0-4.1,0.8-5.3,2.3c-1.3,1.5-1.9,3.7-1.9,6.5v1.7H222.3z"/> <path id="XMLID_164_" d="M253.4,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4 c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C239.9,43.7,246.1,41.3,253.4,41.3z M252.9,59.3 c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2 c0-2.1-0.7-3.8-2.1-5.2S254.9,59.3,252.9,59.3z"/> <path id="XMLID_167_" d="M304.5,24.3V91h-18.3V24.3H304.5z"/> <path id="XMLID_169_" d="M333.4,42.3V91h-18.3V42.3H333.4z M324.3,20.6c2.5,0,4.6,0.9,6.4,2.6c1.8,1.7,2.7,3.8,2.7,6.2 c0,2.5-0.9,4.6-2.6,6.3c-1.7,1.6-3.9,2.4-6.6,2.4c-2.7,0-4.9-0.8-6.6-2.4c-1.7-1.6-2.6-3.7-2.6-6.3c0-2.4,0.9-4.4,2.7-6.2 C319.7,21.5,321.9,20.6,324.3,20.6z"/> <path id="XMLID_172_" d="M367.2,41.3c6.9,0,12.8,2.5,17.7,7.4c4.9,5,7.4,10.9,7.4,17.8c0,7-2.5,13-7.5,18c-5,4.9-11,7.4-18.1,7.4 c-7.1,0-13.1-2.5-18.1-7.4c-5-5-7.5-10.9-7.5-17.9c0-7.1,2.5-13.1,7.5-18C353.7,43.7,359.9,41.3,367.2,41.3z M366.8,59.3 c-2,0-3.6,0.7-5,2.1s-2.1,3.1-2.1,5.2c0,2,0.7,3.7,2.1,5.2c1.4,1.4,3,2.1,5,2.1c2,0,3.6-0.7,5-2.1c1.4-1.4,2.1-3.2,2.1-5.2 c0-2.1-0.7-3.8-2.1-5.2S368.7,59.3,366.8,59.3z"/> </svg> </div> </body> </html>
