如何在html中加入食品,HTML5 培根（食物）生成器

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Bangers);

html,

body {

height: 100%;

padding: 0;

margin: 0;

font-family: "Bangers", cursive;

}

body {

background: #be4a02;

overflow: hidden;

}

body:before {

opacity: 0.5;

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/bedge_grunge.png);

box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 200px;

}

main {

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

max-width: 800px;

height: 100%;

margin: auto;

}

section {

position: absolute;

top: 12px;

left: 12px;

width: 100%;

text-align: center;

}

.bacon {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 10%;

height: 0;

padding-bottom: 15%;

-webkit-transform: skew(5deg);

transform: skew(5deg);

background: -webkit-linear-gradient(left, #be4a02, #be4a02 25%, #fd9a5c 25%, #feb98e 40%, #fc6b10 40%, #fc6b10 60%, #feb98e 60%, #fd9a5c 75%, #be4a02 75%, #be4a02 100%);

background: linear-gradient(to right, #be4a02, #be4a02 25%, #fd9a5c 25%, #feb98e 40%, #fc6b10 40%, #fc6b10 60%, #feb98e 60%, #fd9a5c 75%, #be4a02 75%, #be4a02 100%);

box-shadow: inset rgba(0, 0, 0, 0.2) 0 0 40px, rgba(0, 0, 0, 0.1) 4px 0 2px;

-webkit-transition: 1s ease-out;

transition: 1s ease-out;

}

.bacon:before,

.bacon:after {

content: '';

position: absolute;

display: block;

width: 100%;

height: 100%;

background: -webkit-linear-gradient(left, #be4a02, #be4a02 25%, #fd9a5c 25%, #feb98e 40%, #fc6b10 40%, #fc6b10 60%, #feb98e 60%, #fd9a5c 75%, #be4a02 75%, #be4a02 100%);

background: linear-gradient(to right, #be4a02, #be4a02 25%, #fd9a5c 25%, #feb98e 40%, #fc6b10 40%, #fc6b10 60%, #feb98e 60%, #fd9a5c 75%, #be4a02 75%, #be4a02 100%);

-webkit-transform: skew(-14deg);

transform: skew(-14deg);

}

.bacon:before {

bottom: 99%;

right: -18%;

box-shadow: inset rgba(0, 0, 0, 0.2) 0 0 40px, rgba(0, 0, 0, 0.1) 4px -2px 2px;

border-radius: 8px 8px 0 0;

}

.bacon:after {

top: 99%;

left: -18%;

box-shadow: inset rgba(0, 0, 0, 0.2) 0 0 40px, rgba(0, 0, 0, 0.1) 4px 2px 2px;

border-radius: 0 0 8px 8px;

}

button {

position: relative;

border: none;

background-color: #be4a02;

color: #feb98e;

padding: 6px 24px;

text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0;

font-family: "Bangers", cursive;

font-size: 24px;

letter-spacing: 1px;

border-radius: 4px;

box-shadow: inset #d25202 0 -1px 0, #a03e02 0 3px 0;

cursor: pointer;

outline: none;

overflow: hidden;

}

button:before {

opacity: 0.05;

content: '';

position: absolute;

right: 0;

bottom: 0;

left: 0;

background-color: white;

width: 100%;

height: 50%;

}

button:active {

box-shadow: #a03e02 0 0 0;

-webkit-transform: translateY(3px);

transform: translateY(3px);

}

.amount-of {

position: absolute;

right: 0;

bottom: 12px;

left: 0;

margin: auto;

display: block;

text-align: center;

font-size: 20px;

color: #592301;

}

p {

padding: 12px 24px;

font-size: 16px;

color: #592301;

}