16
December
animation2（キーフレームアニメーション）
opening animation1
2秒で全面画像が徐々に出現する
opening animation2
opening animation3
以下の要素を伴ったheader
使用テキスト
Tokyo Travel Agency
HOME
ABOUT
TROUS
ACCESS
CONTACT
sns icons
Explore the World!
We support Customers.
Start Tour
html&css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
<style> /* Reset */ *{ margin:0; padding: 0; } body{ line-height: 1; font-family: sans-serif; } ul{ list-style: none; } a{ text-decoration: none; color: inherit; } body{ background: rgb(147, 4, 144); } .container{ max-width:1000px; margin: 0 auto; } /* Header */ header{ height: 100vh; color: #fff; background: url(../img/paris.jpg) no-repeat center/cover; opacity: 0; animation:fadeIn 1s 1s forwards; } @keyframes fadeIn{ 100%{opacity:1;} } .header-top{ background: rgba(120, 0, 100,0.8); margin-bottom: 20px; } .header-top .container{ display: flex; align-items: flex-end; justify-content: space-between; padding: 20px 0; } h1{ font-family: 'Great Vibes', cursive; } /* Navigation */ .pcnav ul{ display: flex; } .pcnav li + li{ margin-left: 10px; } /* SNS icons */ .sns{ display: flex; justify-content: flex-end; gap: 15px; } .sns a{ display: block; } .sns i{ font-size:50px; color: #ccc; line-height: 44px; } /* Copy */ .copy{ position: absolute; width:fit-content; top: 30vh; left: 0; right: 0; margin:auto; text-align: center; color: #fff; font-family: 'Great Vibes', cursive; font-size: 5em; line-height: 1.5; text-shadow: 3px 3px 3px #000; opacity: 0; scale:0; animation:copy 1s forwards; } @keyframes copy{ 100%{ opacity:1; scale:1; rotate:1turn; } } /* Startボタン */ .start{ width:300px; line-height: 50px; color: #fff; background:#f50; text-align: center; font-size: 24px; font-weight: bold; border-radius: 5px; position: absolute; right: 0; left:0; bottom:20vh; margin:auto; } /*矢印*/ .arrowBounce{ width:fit-content; position: absolute; right:0; left: 0; bottom: 10vh; margin: auto; } .arrowBounce i{ font-size: 50px; color:#fc0; } </sytle> <header> <div class="header-top"> <div class="container"> <h1>Tokyo Travel Agency</h1> <nav class="pcnav"> <ul> <li><a href="#"å>HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">TROUS</a></li> <li><a href="#">ACCESS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> </div> <aside class="container"> <ul class="sns"> <li><a href="#"><i class="fab fa-facebook-square"></i></a></li> <li><a href="#"><i class="fab fa-twitter-square"></i></a></li> <li><a href="#"><i class="fa-brands fa-line"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> </ul> </aside> <p class="start"><a href="#"><i class="fas fa-plane"></i>Start Tour</a></p> <div class="arrowBounce"> <i class="fas fa-arrow-down"></i> </div> </header> <p class="copy"> Explore the World!<br> We support Customers. </p> |
Other animation
5秒でタイトルを回転
