html设置笑脸,CSS笑脸css
body, html
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body
{
min-height: 500px;
background: #f5f5f5
}
/* Buttons */
.buttons
{
width: 100%;
max-width: 500px;
margin: auto;
text-align: center;
padding: 50px 0 0;
}
button
{
background: #FFCD00;
border: 0;
color: #B57700;
padding: 15px;
min-width: 60px;
font-size: 18px;
font-weight: bold;
margin: 10px
}
/
* Smiley */
.smiley
{
background: linear-gradient(135deg, rgb(255, 233, 25) 0%, rgb(251, 192, 0) 100%);
border-radius: 100%;
padding: 25px;
position: relative;
width: 100px;
borderboxheight: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(calc(-50% - 121px));
box-shadow: rgba(211, 165, 110, 0.498039) 0px 30px 30px 1px, rgb(245, 245, 245) 0px 20px 10px 1px; }
.mouth
{
width: 60%;
height: 30%;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
box-sizing: border-box;
position: absolute;
bottom: 18%;
left: 50%;
margin-left: -30%;
background: #B57700;
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.eyes
{
width: 100%;
margin-top: 15%;
box-sizing: border-box;
padding: 0 5px;
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.eyes .eye
{
width: 20px;
height: 20px;
background: #B57700;
float: left;
border-radius: 100%;
position: relative;
}
.eyes .eye:nth-of-type(2)
{
float: right;
}
.eyes .eye::after
{
content: "";
display: block;
position: absolute;
width: 0%;
height: 0%;
background: #fed800;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
top: -15px;
left: 5px;
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.eyes .eye:first-of-type::after
{
transform: rotate(0deg);
-webkit-transform: rotate(0deg); left: auto;
right: 5px;
}
/* Normal animation */
.al .mouth
{
border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; height: 10%;
width: 40%;
bottom: 25%;
margin-left: -20%;
}
.al .eyes
{
margin-top: 30%
}
/* angry animation */
.smiley.angry .mouth
{
width: 40%;
height: 20%;
border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; bottom: 18%;
left: 50%;
margin-left: -20%;
border-bottom: 0;
}
.smiley.angry .eyes
{
margin-top: 35%
}
.smiley.angry .eye::after
{
width: 120%;
height: 50%;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
top: -3px;
left: -5px;
border-radius: 0;
}
.smiley.angry .eye:first-of-type::after
{
transform: rotate(35deg);
-
webkit-transform: rotate(35deg);
left: auto;
right: -5px;
}
/* */
.smiley.happy .mouth
{
-webkit-animation: move-mouth-down .8s; animation: move-mouth-down .8s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
@-webkit-keyframes move-mouth-down {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。