project link: http://chuanshuoge1-css.surge.sh/
image.jpg
ticket.jpg
travel.jpg
//style.css
@font-face {
font-family: 'THEDREAM';
src: url('font/THEDREAM.eot');
src: local('THEDREAM'), url('font/THEDREAM.woff') format('woff'), url('font/THEDREAM.ttf') format('truetype');
}
.webfont {
font-family: 'THEDREAM' !important;
font-size:3em;
}
#title {
text-align: center;
}
body {
min-width: 400px;
background-color: aliceblue;
animation-name: body_color;
animation-duration: 20s;
animation-iteration-count: infinite;
}
@keyframes body_color {
0% {
background-color: aliceblue;
}
25% {
background-color: lemonchiffon;
}
50% {
background-color: mistyrose;
}
75% {
background-color: floralwhite;
}
100% {
background-color: aliceblue;
}
}
.menu {
display: block;
height: 30px;
width: 100%;
margin-top: 0;
margin-left: 0;
background-color: wheat;
position: fixed;
}
.menu > div {
display: inline-block;
}
.menu > div > a {
display: block;
height: 20px;
width: 100px;
text-align: center;
padding: 5px;
background-color: lightgreen;
transition: width 1s ease-out;
cursor: pointer;
}
.menu > div > a:hover {
width: 120px;
}
.sub_menu {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100px;
height: 25px;
text-align: center;
z-index: 3;
}
.sub_menu a {
padding: 5px;
display: block;
box-shadow: 2px 2px 1px lightgrey;
cursor: pointer;
}
.sub_menu a:nth-child(even) {
background-color: lightgreen;
}
.sub_menu a:nth-child(even):hover {
background-color: #f1f1f1
}
.sub_menu a:nth-child(odd) {
background-color: lightyellow;
}
.sub_menu a:nth-child(odd):hover {
background-color: #f1f1f1
}
#menu_cuisine:hover .sub_menu {
display: block;
}
@media screen and (max-width: 650px) {
#breakfast, #dinner,#drink {
width: 100%;
}
#dinner {
padding-top: 600px;
}
#drink{
padding-top:1400px;
}
.plate, .knife_folk {
left: 50%;
}
#b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
left: 50%;
}
.platter {
right: 50%;
}
.menu {
width: 60px;
}
.menu > div {
display: block;
margin-left: -40px;
transition: margin 1s ease-in-out;
border: 1px groove wheat;
}
.menu > div:hover {
margin-left: 0;
}
#title {
font-size: 25px;
}
}
@media screen and (min-width: 651px) and (max-width:1300px) {
#breakfast, #dinner {
width: 50%;
}
#drink{
width:100%;
padding-top:600px;
}
.plate, .knife_folk {
left: 25%;
}
#b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
left: 25%;
}
.platter {
right: 25%;
}
#title {
padding-top: 50px;
}
}
@media screen and (min-width: 1301px) {
#breakfast, #dinner {
width: 33%;
}
.plate, .knife_folk {
left: 16.5%;
}
#b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
left: 16.5%;
}
.platter {
right: 16.5%;
}
#title {
padding-top: 50px;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
height: 100px;
width: 100px;
display: inline-block;
}
input[type=checkbox]:checked + label {
}
#breakfast {
text-align: center;
float: left;
}
.plate {
width: 100px;
height: 100px;
background: url("image.jpg") no-repeat;
position: absolute;
z-index: 2;
transition: all 1s linear;
}
.plate:hover {
border: 5px dashed red;
}
.breakfast1 {
background-position: 0 0;
margin-left: -160px;
margin-top: 0;
}
.breakfast2 {
background-position: 0 -100px;
margin-left: -50px;
margin-top: 0;
}
.breakfast3 {
background-position: 0 -200px;
margin-left: 60px;
margin-top: 0;
}
.breakfast4 {
background-position: 0 -300px;
margin-left: -160px;
margin-top: 170px;
}
.breakfast5 {
background-position: 0 -400px;
margin-left: -50px;
margin-top: 170px;
}
.breakfast6 {
background-position: 0 -500px;
margin-left: 60px;
margin-top: 170px;
}
#b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
position: absolute;
margin-left: -50px;
margin-top: 350px;
font-size: 0;
}
.knife_folk {
background: url("image.jpg") no-repeat;
background-position: -100px 0;
position: absolute;
margin-top: 310px;
margin-left: -141px;
}
#breakfast > div {
height: 200px;
width: 283px;
z-index: 1;
}
#breakfast > h3::before {
width: 30px;
height: 30px;
background: url("image.jpg") no-repeat;
position: absolute;
background-position: -100px -200px;
margin-left: -40px;
margin-top: -10px;
content: url("");
}
#breakfast > h3::after {
width: 30px;
height: 30px;
background: url("image.jpg") no-repeat;
background-position: -100px -200px;
position: absolute;
margin-left: 10px;
margin-top: -10px;
content: url("");
}
#dinner {
float: right;
}
#dinner * {
text-align: center;
}
.platter {
width: 200px;
height: 200px;
background: url("image.jpg") no-repeat;
position: absolute;
transition: width 2s, height 2s;
}
.platter:hover {
opacity: 0.8;
}
.platter:active {
height: 0;
}
.platter:before {
opacity: 0;
width: 121px;
height: 121px;
background: url("image.jpg") no-repeat;
background-position: -429px 0;
position: absolute;
margin-left: -10px;
margin-top: 200px;
content: url("");
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 2s;
transition: all 2s;
}
.platter:active:before {
opacity: 1;
margin-top: 0;
}
.dinner1 {
background-position: -146px -215px;
margin-right: -100px;
margin-top: 0;
}
.dinner2 {
background-position: -346px -200px;
margin-right: -100px;
margin-top: 200px;
}
.dinner3 {
background-position: -146px -430px;
margin-right: -100px;
margin-top: 400px;
}
#drink {
text-align: center;
}
.cheers{
width:100px;
height:100px;
padding-top:100px;
position:absolute;
left:50%;
text-align:center;
margin-left:-50px;
}
.cheers > b {
opacity:0;
animation-name: cheers_word;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes cheers_word{
80% {
opacity:0;
}
100%{
opacity:1;
}
}
.cheers:before {
width: 80px;
height: 200px;
background: url("image.jpg") no-repeat;
background-position: -470px -400px;
position: absolute;
content: url("");
margin-left: -100px;
margin-top: -100px;
animation-name: cheers_before;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes cheers_before {
30% {
margin-left: -200px;
margin-top: -100px;
transform: rotate(-720deg) rotateY(0deg);
}
40% {
margin-left: -200px;
margin-top: -100px;
transform: rotateY(-180deg);
}
50% {
margin-left: -200px;
margin-top: -100px;
transform: rotateY(0deg);
}
60% {
margin-left: -200px;
margin-top: -140px;
}
67% {
margin-left: -200px;
margin-top: -60px;
}
70% {
margin-left: -200px;
margin-top: -100px;
transform: skew(0deg);
}
73% {
margin-left: -200px;
transform: skew(-30deg);
}
80% {
margin-left: -200px;
transform: skew(30deg)
}
85% {
margin-left: -200px;
transform: rotate(30deg) skew(0deg);
}
}
.cheers:after {
width: 80px;
height: 200px;
background: url("image.jpg") no-repeat;
background-position: -470px -400px;
position: absolute;
content: url("");
margin-left: 10px;
margin-top: -100px;
animation-name: cheers_after;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes cheers_after {
30% {
margin-left:110px;
margin-top:-100px;
transform: rotate(720deg) rotateY(0deg);
}
40% {
margin-left: 110px;
margin-top: -100px;
transform: rotateY(180deg);
}
50% {
margin-left: 110px;
margin-top: -100px;
transform: rotateY(0deg);
}
60% {
margin-left: 110px;
margin-top: -60px;
}
67% {
margin-left: 110px;
margin-top: -140px;
}
70% {
margin-left: 110px;
margin-top: -100px;
transform: skew(0deg);
}
73% {
margin-left: 110px;
transform: skew(30deg);
}
80% {
margin-left: 110px;
transform: skew(-30deg)
}
85%{
margin-left:110px;
transform:rotate(-30deg) skew(0deg);
}
}
#travel {
text-align: center;
width: 100%;
}
.earth {
width: 450px;
height: 450px;
left: 50%;
background: url("travel.jpg") no-repeat;
position: absolute;
margin-left: -225px;
}
.earth:after {
width: 50px;
height: 50px;
background: url("travel.jpg") no-repeat;
background-position: -450px 0;
position: absolute;
content: url("");
margin-left: 250px;
margin-top: 200px;
animation-name: fly;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: -250px;
}
@keyframes fly {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#travel a {
text-decoration: underline;
}
.ticket {
height: 25px;
width: 50px;
opacity: 0;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -25px;
margin-bottom: 200px;
color: blue;
cursor: pointer;
background: url("ticket.png") no-repeat;
background-size: contain;
transition: transform 0.5s linear;
}
.ticket:active {
opacity: 1;
margin-top: -100px;
transform: scale(8) rotate(1440deg);
}
#game {
height: 400px;
width: 400px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -200px;
}
.target_trace {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
animation-name: trace;
animation-duration: 8s;
animation-iteration-count: infinite;
}
@keyframes trace {
0% {
left: 0;
top: 200px;
}
20% {
left: 400px;
top: 400px;
}
40% {
left: 200px;
top: 0;
}
60% {
left: 0;
top: 400px;
}
80% {
left: 400px;
top: 200px;
}
100% {
left: 0;
top: 200px;
}
}
.target_trace:active {
animation-play-state: paused;
}
.target_trace:after {
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(white 2%, red 10%, orange 20%, yellow 30%, green 40%, cyan 50%, blue 60%, purple 70%,black 80%);
background-size: contain;
position: absolute;
content: url("");
margin-left: 0;
margin-top: 0;
animation-name: target_rotate;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@keyframes target_rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.target_trace:hover:after {
cursor: crosshair;
}
.target_trace:active:after {
animation-play-state: paused;
}
--------------------------------------------------------------------
//default.html
<!DOCTYPE html>
<html>
<head>
<title>Cuisine</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
<div class="menu">
<div id="menu_cuisine">
<a href="default.html">Cuisine</a>
<div class="sub_menu">
<a href="default.html#breakfast">Breakfast</a>
<a href="default.html#dinner">Dinner</a>
<a href="default.html#drink">Drink</a>
</div>
</div>
<div><a href="game.html">Game</a></div>
<div><a href="travel.html">Travel</a></div>
</div>
<h1 id="title" class="webfont">Enjoyment of a day</h1>
<div id="breakfast">
<h3>Breakfast</h3>
<input type="checkbox" id="b1" name="b1">
<label for="b1" class="breakfast1 plate"><br /><br /><br /><br /><br /><br />Meat Pepper</label>
<input type="checkbox" id="b2" name="b2">
<label for="b2" class="breakfast2 plate"><br /><br /><br /><br /><br /><br />Onion Bread</label>
<input type="checkbox" id="b3" name="b3">
<label for="b3" class="breakfast3 plate"><br /><br /><br /><br /><br /><br />Lotty Cafe</label>
<input type="checkbox" id="b4" name="b4">
<label for="b4" class="breakfast4 plate"><br /><br /><br /><br /><br /><br />Berry Flakes</label>
<input type="checkbox" id="b5" name="b5">
<label for="b5" class="breakfast5 plate"><br /><br /><br /><br /><br /><br />Croissant Coffee</label>
<input type="checkbox" id="b6" name="b6">
<label for="b6" class="breakfast6 plate"><br /><br /><br /><br /><br /><br />Bacon Pancake</label>
<div class="knife_folk"><br /><br /><br /><br /><br /><br /><br /><br />Enjoy!</div>
</div>
<div id="dinner">
<h3>Dinner</h3>
<div class="platter dinner1">Canadian Style</div>
<div class="platter dinner2">Indian___Style</div>
<br /><br />
<div class="platter dinner3">Chinese Style</div>
</div>
<div id="drink">
<h3>Champagne</h3>
<div class="cheers"><b>Cheers!</b></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
---------------------------------------------------------------------
//game.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>gaming</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
<div class="menu">
<div id="menu_cuisine">
<a href="default.html">Cuisine</a>
<div class="sub_menu">
<a href="default.html#breakfast">Breakfast</a>
<a href="default.html#dinner">Dinner</a>
<a href="default.html#drink">Drink</a>
</div>
</div>
<div><a href="game.html">Game</a></div>
<div><a href="travel.html">Travel</a></div>
</div>
<h1 id="title" class="webfont">Enjoyment of a day</h1>
<div id="game">
<h3>Play games</h3>
<h4>Shoot the bulls eye</h4>
<div class="target_trace"></div>
</div>
</body>
</html>
----------------------------------------------------------
//travel.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Travel</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
<div class="menu">
<div id="menu_cuisine">
<a href="default.html">Cuisine</a>
<div class="sub_menu">
<a href="default.html#breakfast">Breakfast</a>
<a href="default.html#dinner">Dinner</a>
<a href="default.html#drink">Drink</a>
</div>
</div>
<div><a href="game.html">Game</a></div>
<div><a href="travel.html">Travel</a></div>
</div>
<h1 id="title" class="webfont">Enjoyment of a day</h1>
<div id="travel">
<h3>Travel</h3>
<br /><br />
<div class="earth"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>Congratulaiton! You win a free trip to Hawaii.</p>
<a>Claim it</a>
<div class="ticket"></div>
</div>
</body>
</html>
reference:
https://stackoverflow.com/questions/9980531/center-image-in-div-horizontally
https://www.w3schools.com/css/css3_transitions.asp
https://www.photojoiner.net/
http://resizeimage.net/
https://css-tricks.com/almanac/selectors/c/checked/
https://stackoverflow.com/questions/7203697/before-and-background-image-should-it-work
https://stackoverflow.com/questions/22985737/css-active-selector-using-after-pseudo-element
https://stackoverflow.com/questions/19579340/css-transition-after-a-pseudo-element-how-to-transition-content-that-shows-o
No comments:
Post a Comment