CSS3 可爱的小鸡仔动画图标

2014-05-01 08:53:26 -0400

此代码仅供参考

代码说明

CSS3 可爱的小鸡仔动画图标

html代码

<style type="text/css">
body {
    background-color: #ecf0f1;
}
#wrapper {
    margin: 100px 50%;
}
#round {
    border: 1px solid #2b2b2b;
    background: white;
    width: 40px;
    height: 30px;
    border-radius: 50%;
    animation: float 1.5s infinite;
    animation-timing-function: ease-in-out;
}
#shadow {
    background: #b5b5b5;
    width: 20px;
    height: 7px;
    border-radius: 50%;
    margin-left: 11px;
    margin-top: 15px;
    animation: shadow 1.5s infinite;
    animation-timing-function: ease-in-out;
    box-shadow: 0px 0px 3px 0px #b5b5b5;
}
#left-eye,
#right-eye {
    background: black;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 9px;
}
#left-eye {
    float: left;
    margin-left: 8px;
}
#right-eye {
    float: right;
    margin-right: 8px;
}
#left-eye::before,
#right-eye::before {
    content: "";
    background: white;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    display: block;
    margin-top: 1px;
    margin-left: 1px;
}
#mouth {
    width: 4px;
    height: 4px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-radius: 2px;
    margin-top: 15px;
    margin-left: 17px;
    transform: rotate(45deg);
}
.blush {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #f288af;
}
#blush1 {
    float: left;
    margin-left: -10px;
    margin-top: 16px;
}
#blush2 {
    float: right;
    margin-top: -6px;
    margin-right: 4px;
}
@keyframes float {
    0%, 100% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, 10px);
    }
}
@keyframes shadow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
        background: #a8a8a8;
    }
}
</style>

<div id="wrapper">
    <div id="round">
        <div id="left-eye"></div>
        <div id="right-eye"></div>
        <div class="blush" id="blush1"></div>
        <div id="mouth"></div>
        <div class="blush" id="blush2"></div>
    </div>
    <div id="shadow"></div>
</div>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N