Chuanshuoge: css final

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>

</head>

<body>

<a href="default.html">Cuisine</a>

<a href="default.html#breakfast">Breakfast</a>

<a href="default.html#dinner">Dinner</a>

<a href="default.html#drink">Drink</a>

</div>

<div><a href="travel.html">Travel</a></div>

</div>

<h1 id="title" class="webfont">Enjoyment of a day</h1>

<h3>Breakfast</h3>

<label for="b1" class="breakfast1 plate"><br /><br /><br /><br /><br /><br />Meat Pepper</label>

<label for="b2" class="breakfast2 plate"><br /><br /><br /><br /><br /><br />Onion Bread</label>

<label for="b3" class="breakfast3 plate"><br /><br /><br /><br /><br /><br />Lotty Cafe</label>

<label for="b4" class="breakfast4 plate"><br /><br /><br /><br /><br /><br />Berry Flakes</label>

<label for="b5" class="breakfast5 plate"><br /><br /><br /><br /><br /><br />Croissant Coffee</label>

<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>

<h3>Dinner</h3>

<div class="platter dinner1">Canadian Style</div>

<div class="platter dinner2">Indian___Style</div>

<div class="platter dinner3">Chinese Style</div>

</div>

<h3>Champagne</h3>

<div class="cheers"><b>Cheers!</b></div>

</div>

</body>

</html>

---------------------------------------------------------------------

//game.html

<!DOCTYPE html>

<html>

<head>

<title>gaming</title>

</head>

<body>

<a href="default.html">Cuisine</a>

<a href="default.html#breakfast">Breakfast</a>

<a href="default.html#dinner">Dinner</a>

<a href="default.html#drink">Drink</a>

</div>

<div><a href="travel.html">Travel</a></div>

</div>

<h1 id="title" class="webfont">Enjoyment of a day</h1>

<h3>Play games</h3>

<h4>Shoot the bulls eye</h4>

</div>

</body>

</html>

----------------------------------------------------------

//travel.html

<!DOCTYPE html>

<html>

<head>

<title>Travel</title>

</head>

<body>

<a href="default.html">Cuisine</a>

<a href="default.html#breakfast">Breakfast</a>

<a href="default.html#dinner">Dinner</a>

<a href="default.html#drink">Drink</a>

</div>

<div><a href="travel.html">Travel</a></div>

</div>

<h1 id="title" class="webfont">Enjoyment of a day</h1>

<h3>Travel</h3>

<p>Congratulaiton! You win a free trip to Hawaii.</p>

<a>Claim it</a>

</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

Chuanshuoge

Saturday, 3 June 2017

css final

No comments:

Post a Comment

Chuanshuoge, Calgary, Canada, Earth, Solar system, Milky Way Galaxy

_ChuanShuo^Ge - _传说^哥