رحمت حاجی سعدین

سایت شخصی رحمت حاجی سعدین


سورس گوسفندی!

سلام . دوستان کد css و html  گوسفند مهربون رو براتون قرار دادم .

css

font-weight: 100;
}
@keyframes bob {
    0% {
        top: 0;
    }
    50% {
        top: 0.2em;
    }
}
.im-sheep {
    display: inline-block;
    position: relative;
    font-size: 1em;
    margin-bottom: 70px;
    direction: ltr;
}
.im-sheep * {
    transition: transform 0.3s;
}
.im-sheep .top {
    position: relative;
    top: 0;
    animation: bob 1s infinite;
}
.im-sheep:hover .head {
    transform: rotate(0deg);
}
.im-sheep:hover .head .im-eye {
    width: 1.25em;
    height: 1.25em;
}
.im-sheep:hover .head .im-eye:before {
    right: 30%;
}
.im-sheep:hover .top {
    animation-play-state: paused;
}
.im-sheep .head {
    display: inline-block;
    width: 5em;
    height: 5em;
    border-radius: 100%;
    background: #253858;
    vertical-align: middle;
    position: relative;
    top: 1em;
    transform: rotate(30deg);
}
.im-sheep .head:before {
    content: '';
    display: inline-block;
    width: 80%;
    height: 50%;
    background: #253858;
    position: absolute;
    bottom: 0;
    right: -10%;
    border-radius: 50% 40%;
}
.im-sheep .head:hover .im-ear.one, .im-sheep .head:hover .im-ear.two {
    transform: rotate(0deg);
}
.im-sheep .head .im-eye {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    background: white;
    position: absolute;
    overflow: hidden;
}
.im-sheep .head .im-eye:before {
    content: '';
    display: inline-block;
    background: black;
    width: 50%;
    height: 50%;
    border-radius: 100%;
    position: absolute;
    right: 10%;
    bottom: 10%;
    transition: all 0.3s;
}
.im-sheep .head .im-eye.one {
    right: -2%;
    top: 1.7em;
}
.im-sheep .head .im-eye.two {
    right: 2.5em;
    top: 1.7em;
}
.im-sheep .head .im-ear {
    background: #253858;
    width: 50%;
    height: 30%;
    border-radius: 100%;
    position: absolute;
}
.im-sheep .head .im-ear.one {
    left: -10%;
    top: 5%;
    transform: rotate(-30deg);
}
.im-sheep .head .im-ear.two {
    top: 2%;
    right: -5%;
    transform: rotate(20deg);
}
.im-sheep .body {
    display: inline-block;
    width: 7em;
    height: 7em;
    border-radius: 100%;
    background: #0054D1;
    position: relative;
    vertical-align: middle;
    margin-right: -3em;
}
.im-sheep .im-legs {
    display: inline-block;
    position: absolute;
    top: 80%;
    left: 10%;
    z-index: -1;
}
.im-sheep .im-legs .im-leg {
    display: inline-block;
    background: #141214;
    width: 0.5em;
    height: 2.5em;
    margin: 0.2em;
}
.im-sheep::before {
    left: 0;
    content: '';
    display: inline-block;
    position: absolute;
    top: 112%;
    width: 100%;
    height: 18%;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.2);
}

html

<div class="im-sheep">
<div class="top">
<div class="body"></div>
<div class="head">
<div class="im-eye one"></div>
<div class="im-eye two"></div>
<div class="im-ear one"></div>
<div class="im-ear two"></div>
</div>
</div>
<div class="im-legs">
<div class="im-leg"></div>
<div class="im-leg"></div>
<div class="im-leg"></div>
<div class="im-leg"></div>
</div>
</div>

 

pharketab@gmail.com‬  همون ایمیلی که تو پشتیبانی گفتید

از طریق خود همین صفحه
http://rahmathajisaadin.ir/page/contact-us

سلام آقای حاج سعدین ایمیل ما رو دریافت نکردید؟

سلام علیک ، به چه ادرسی ارسال کردین؟اها رفتم دیدم و پیام فرستادم براشون خواهشا از طریق صفحه تماس با ما در ارتباط باشیم باهم

سلام

خیلی جالب بود

شنبه ۶ ارديبهشت ۹۹ , ۱۷:۳۳ محمد صدرا عبدالعلی زاده

چخفن

شنبه ۶ ارديبهشت ۹۹ , ۱۷:۲۷ محمد صدرا عبدالعلی زاده

چیکار میکنه؟

+اسمش منو کشته :||||

هیچی فقط نگات میکنه! موس ببر روش یا کلیک کن روش سرشو تکون میده گوشاشو تکون میده خخخخ
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
سایت شخصی رحمت حاجی سعدین
دانلود قالب بلاگ
آموزش بلاگ نویسی
دست نوشته ها و ...
پیوندها
Designed By Erfan Powered by Bayan