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

می نویسم تا شاید جاودانه شود ...

در اینجا می توانید به آموزش های مفیدی در زمینه های وبلاگ نویسی و برنامه نویسی دسته پیدا کنید

به همراه دست نوشته ها و روزمرگی های خودم:)

هر قالبی رو دیدی فقط کافیه آدرسشو بفرستی و من برات با کمترین هزینه ترجمه کنم برای هر سرویسی اعم از ورپرس،بلاگفا،بلاگ،رزبلاگ،میهن بلاگ و ...

زیر مجموعه گروه راشنو

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

  • شنبه, ۶ ارديبهشت ۱۳۹۹، ۰۵:۱۱ ب.ظ

سلام . دوستان کد 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>

 

تعداد نظرات:(۵)

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
  1. Radmehr Sadri۱۰ ارديبهشت ۹۹

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

    • رحمت حاجی سعدین۱۰ ارديبهشت ۹۹

      از طریق خود همین صفحه

      http://rahmathajisaadin.ir/page/contact-us

  2. Radmehr Sadri۱۰ ارديبهشت ۹۹

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

    • رحمت حاجی سعدین۱۰ ارديبهشت ۹۹

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

  3. arshia theme۰۶ ارديبهشت ۹۹

    سلام

    خیلی جالب بود

    • رحمت حاجی سعدین۰۶ ارديبهشت ۹۹

  4. محمد صدرا عبدالعلی زاده۰۶ ارديبهشت ۹۹

    چخفن

    • رحمت حاجی سعدین۰۶ ارديبهشت ۹۹

  5. محمد صدرا عبدالعلی زاده۰۶ ارديبهشت ۹۹

    چیکار میکنه؟

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

    • رحمت حاجی سعدین۰۶ ارديبهشت ۹۹

      هیچی فقط نگات میکنه! موس ببر روش یا کلیک کن روش سرشو تکون میده گوشاشو تکون میده خخخخ