WP

WP-Recall

Yworld Prime Designer
Дополнение к PrimeForum

WP

WP-Recall

Yworld PF Motivation
Дополнение к PrimeForum

WP

WP-Recall

Prime Yworld PRO
Дополнение к PrimeForum

Интересный прелоадер с использованием css и html

Оригинальное решение и симпатично смотрящееся опишу ниже. В принципе применение для своих сайтов найти можно всегда.

CSS к сожалению минимизированные.

html{height:100%}body{background-image:radial-gradient(circle farthest-corner at center,#3c4b57 0,#1c262b 100%)}.preloader{position:relative;margin-top:5%;margin-left:5%;width:90%;height:300px}.boxForRabbit{position:absolute;bottom:10%;left:2%;width:100%;height:260px}.rabbit{float:left;width:100px;height:100%}.earLeft,.earRight{position:absolute;width:0;height:0;border-style:solid;-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}.earLeft{top:-40%;left:20%;border-width:50px 0 10px 20px;-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);border-color:transparent transparent transparent #fff}@-webkit-keyframes leftEar{0%,100%{top:-40%;-webkit-transform:rotate(5deg);transform:rotate(5deg)}25%{top:-70%;-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}35%{top:-70%;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}65%{top:-50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}75%{top:-40%;-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes leftEar{0%,100%{top:-40%;-webkit-transform:rotate(5deg);transform:rotate(5deg)}25%{top:-70%;-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}35%{top:-70%;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}65%{top:-50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}75%{top:-40%;-webkit-transform:rotate(10deg);transform:rotate(10deg)}}.earRight{top:-40%;left:45%;border-width:10px 0 50px 20px;-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);border-color:transparent transparent #fff}@-webkit-keyframes rightEar{0%,100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}25%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}35%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}65%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}75%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@keyframes rightEar{0%,100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}25%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}35%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}65%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}75%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}.rabbit:nth-child(1) .earRight{-webkit-animation:rightEar 1300ms linear 100ms infinite normal,rainbowRightEar 6s linear 100ms infinite;animation:rightEar 1300ms linear 100ms infinite normal,rainbowRightEar 6s linear 100ms infinite}.rabbit:nth-child(1) .earLeft{-webkit-animation:leftEar 1300ms linear 100ms infinite normal,rainbowLeftEar 6s linear 100ms infinite;animation:leftEar 1300ms linear 100ms infinite normal,rainbowLeftEar 6s linear 100ms infinite}.rabbit:nth-child(1) .bodyR{-webkit-animation:bodyTrans 1300ms linear 100ms infinite normal,rainbow 6s linear 100ms infinite;animation:bodyTrans 1300ms linear 100ms infinite normal,rainbow 6s linear 100ms infinite}.rabbit:nth-child(2) .earRight{-webkit-animation:rightEar 1300ms linear 200ms infinite normal,rainbowRightEar 6s linear 200ms infinite;animation:rightEar 1300ms linear 200ms infinite normal,rainbowRightEar 6s linear 200ms infinite}.rabbit:nth-child(2) .earLeft{-webkit-animation:leftEar 1300ms linear 200ms infinite normal,rainbowLeftEar 6s linear 200ms infinite;animation:leftEar 1300ms linear 200ms infinite normal,rainbowLeftEar 6s linear 200ms infinite}.rabbit:nth-child(2) .bodyR{-webkit-animation:bodyTrans 1300ms linear 200ms infinite normal,rainbow 6s linear 200ms infinite;animation:bodyTrans 1300ms linear 200ms infinite normal,rainbow 6s linear 200ms infinite}.rabbit:nth-child(3) .earRight{-webkit-animation:rightEar 1300ms linear 300ms infinite normal,rainbowRightEar 6s linear 300ms infinite;animation:rightEar 1300ms linear 300ms infinite normal,rainbowRightEar 6s linear 300ms infinite}.rabbit:nth-child(3) .earLeft{-webkit-animation:leftEar 1300ms linear 300ms infinite normal,rainbowLeftEar 6s linear 300ms infinite;animation:leftEar 1300ms linear 300ms infinite normal,rainbowLeftEar 6s linear 300ms infinite}.rabbit:nth-child(3) .bodyR{-webkit-animation:bodyTrans 1300ms linear 300ms infinite normal,rainbow 6s linear 300ms infinite;animation:bodyTrans 1300ms linear 300ms infinite normal,rainbow 6s linear 300ms infinite}.rabbit:nth-child(4) .earRight{-webkit-animation:rightEar 1300ms linear 400ms infinite normal,rainbowRightEar 6s linear 400ms infinite;animation:rightEar 1300ms linear 400ms infinite normal,rainbowRightEar 6s linear 400ms infinite}.rabbit:nth-child(4) .earLeft{-webkit-animation:leftEar 1300ms linear 400ms infinite normal,rainbowLeftEar 6s linear 400ms infinite;animation:leftEar 1300ms linear 400ms infinite normal,rainbowLeftEar 6s linear 400ms infinite}.rabbit:nth-child(4) .bodyR{-webkit-animation:bodyTrans 1300ms linear 400ms infinite normal,rainbow 6s linear 400ms infinite;animation:bodyTrans 1300ms linear 400ms infinite normal,rainbow 6s linear 400ms infinite}.rabbit:nth-child(5) .earRight{-webkit-animation:rightEar 1300ms linear 500ms infinite normal,rainbowRightEar 6s linear 500ms infinite;animation:rightEar 1300ms linear 500ms infinite normal,rainbowRightEar 6s linear 500ms infinite}.rabbit:nth-child(5) .earLeft{-webkit-animation:leftEar 1300ms linear 500ms infinite normal,rainbowLeftEar 6s linear 500ms infinite;animation:leftEar 1300ms linear 500ms infinite normal,rainbowLeftEar 6s linear 500ms infinite}.rabbit:nth-child(5) .bodyR{-webkit-animation:bodyTrans 1300ms linear 500ms infinite normal,rainbow 6s linear 500ms infinite;animation:bodyTrans 1300ms linear 500ms infinite normal,rainbow 6s linear 500ms infinite}.rabbit:nth-child(6) .earRight{-webkit-animation:rightEar 1300ms linear 600ms infinite normal,rainbowRightEar 6s linear 600ms infinite;animation:rightEar 1300ms linear 600ms infinite normal,rainbowRightEar 6s linear 600ms infinite}.rabbit:nth-child(6) .earLeft{-webkit-animation:leftEar 1300ms linear 600ms infinite normal,rainbowLeftEar 6s linear 600ms infinite;animation:leftEar 1300ms linear 600ms infinite normal,rainbowLeftEar 6s linear 600ms infinite}.rabbit:nth-child(6) .bodyR{-webkit-animation:bodyTrans 1300ms linear 600ms infinite normal,rainbow 6s linear 600ms infinite;animation:bodyTrans 1300ms linear 600ms infinite normal,rainbow 6s linear 600ms infinite}.rabbit:nth-child(7) .earRight{-webkit-animation:rightEar 1300ms linear 700ms infinite normal,rainbowRightEar 6s linear 700ms infinite;animation:rightEar 1300ms linear 700ms infinite normal,rainbowRightEar 6s linear 700ms infinite}.rabbit:nth-child(7) .earLeft{-webkit-animation:leftEar 1300ms linear 700ms infinite normal,rainbowLeftEar 6s linear 700ms infinite;animation:leftEar 1300ms linear 700ms infinite normal,rainbowLeftEar 6s linear 700ms infinite}.rabbit:nth-child(7) .bodyR{-webkit-animation:bodyTrans 1300ms linear 700ms infinite normal,rainbow 6s linear 700ms infinite;animation:bodyTrans 1300ms linear 700ms infinite normal,rainbow 6s linear 700ms infinite}.rabbit:nth-child(8) .earRight{-webkit-animation:rightEar 1300ms linear 800ms infinite normal,rainbowRightEar 6s linear 800ms infinite;animation:rightEar 1300ms linear 800ms infinite normal,rainbowRightEar 6s linear 800ms infinite}.rabbit:nth-child(8) .earLeft{-webkit-animation:leftEar 1300ms linear 800ms infinite normal,rainbowLeftEar 6s linear 800ms infinite;animation:leftEar 1300ms linear 800ms infinite normal,rainbowLeftEar 6s linear 800ms infinite}.rabbit:nth-child(8) .bodyR{-webkit-animation:bodyTrans 1300ms linear 800ms infinite normal,rainbow 6s linear 800ms infinite;animation:bodyTrans 1300ms linear 800ms infinite normal,rainbow 6s linear 800ms infinite}.rabbit:nth-child(9) .earRight{-webkit-animation:rightEar 1300ms linear 900ms infinite normal,rainbowRightEar 6s linear 900ms infinite;animation:rightEar 1300ms linear 900ms infinite normal,rainbowRightEar 6s linear 900ms infinite}.rabbit:nth-child(9) .earLeft{-webkit-animation:leftEar 1300ms linear 900ms infinite normal,rainbowLeftEar 6s linear 900ms infinite;animation:leftEar 1300ms linear 900ms infinite normal,rainbowLeftEar 6s linear 900ms infinite}.rabbit:nth-child(9) .bodyR{-webkit-animation:bodyTrans 1300ms linear 900ms infinite normal,rainbow 6s linear 900ms infinite;animation:bodyTrans 1300ms linear 900ms infinite normal,rainbow 6s linear 900ms infinite}.rabbit:nth-child(10) .earRight{-webkit-animation:rightEar 1300ms linear 1000ms infinite normal,rainbowRightEar 6s linear 1000ms infinite;animation:rightEar 1300ms linear 1000ms infinite normal,rainbowRightEar 6s linear 1000ms infinite}.rabbit:nth-child(10) .earLeft{-webkit-animation:leftEar 1300ms linear 1000ms infinite normal,rainbowLeftEar 6s linear 1000ms infinite;animation:leftEar 1300ms linear 1000ms infinite normal,rainbowLeftEar 6s linear 1000ms infinite}.rabbit:nth-child(10) .bodyR{-webkit-animation:bodyTrans 1300ms linear 1000ms infinite normal,rainbow 6s linear 1000ms infinite;animation:bodyTrans 1300ms linear 1000ms infinite normal,rainbow 6s linear 1000ms infinite}.rabbit:nth-child(11) .earRight{-webkit-animation:rightEar 1300ms linear 1100ms infinite normal,rainbowRightEar 6s linear 1100ms infinite;animation:rightEar 1300ms linear 1100ms infinite normal,rainbowRightEar 6s linear 1100ms infinite}.rabbit:nth-child(11) .earLeft{-webkit-animation:leftEar 1300ms linear 1100ms infinite normal,rainbowLeftEar 6s linear 1100ms infinite;animation:leftEar 1300ms linear 1100ms infinite normal,rainbowLeftEar 6s linear 1100ms infinite}.rabbit:nth-child(11) .bodyR{-webkit-animation:bodyTrans 1300ms linear 1100ms infinite normal,rainbow 6s linear 1100ms infinite;animation:bodyTrans 1300ms linear 1100ms infinite normal,rainbow 6s linear 1100ms infinite}.rabbit:nth-child(12) .earRight{-webkit-animation:rightEar 1300ms linear 1200ms infinite normal,rainbowRightEar 6s linear 1200ms infinite;animation:rightEar 1300ms linear 1200ms infinite normal,rainbowRightEar 6s linear 1200ms infinite}.rabbit:nth-child(12) .earLeft{-webkit-animation:leftEar 1300ms linear 1200ms infinite normal,rainbowLeftEar 6s linear 1200ms infinite;animation:leftEar 1300ms linear 1200ms infinite normal,rainbowLeftEar 6s linear 1200ms infinite}.rabbit:nth-child(12) .bodyR{-webkit-animation:bodyTrans 1300ms linear 1200ms infinite normal,rainbow 6s linear 1200ms infinite;animation:bodyTrans 1300ms linear 1200ms infinite normal,rainbow 6s linear 1200ms infinite}.rabbit:nth-child(13) .earRight{-webkit-animation:rightEar 1300ms linear 1300ms infinite normal,rainbowRightEar 6s linear 1300ms infinite;animation:rightEar 1300ms linear 1300ms infinite normal,rainbowRightEar 6s linear 1300ms infinite}.rabbit:nth-child(13) .earLeft{-webkit-animation:leftEar 1300ms linear 1300ms infinite normal,rainbowLeftEar 6s linear 1300ms infinite;animation:leftEar 1300ms linear 1300ms infinite normal,rainbowLeftEar 6s linear 1300ms infinite}.rabbit:nth-child(13) .bodyR{-webkit-animation:bodyTrans 1300ms linear 1300ms infinite normal,rainbow 6s linear 1300ms infinite;animation:bodyTrans 1300ms linear 1300ms infinite normal,rainbow 6s linear 1300ms infinite}.bodyR{position:relative;margin-left:10%;margin-top:100%;height:90px;width:60px;border-radius:50%;box-shadow:inset 6px 2px 30px 0 rgba(36,36,36,.5);background-color:#fff}@-webkit-keyframes bodyTrans{0%,100%{margin-top:100%;height:90px;width:60px;border-radius:50%}25%{margin-top:145%;height:50px;width:70px;border-radius:50% 50% 30% 30%}35%{margin-top:145.5%;height:45px;width:75px;border-radius:50% 50% 30% 30%}65%{margin-top:25%;height:80px;width:65px;border-radius:50% 50% 40% 40%}75%{margin-top:20%;height:100px;width:60px;border-radius:50%}}@keyframes bodyTrans{0%,100%{margin-top:100%;height:90px;width:60px;border-radius:50%}25%{margin-top:145%;height:50px;width:70px;border-radius:50% 50% 30% 30%}35%{margin-top:145.5%;height:45px;width:75px;border-radius:50% 50% 30% 30%}65%{margin-top:25%;height:80px;width:65px;border-radius:50% 50% 40% 40%}75%{margin-top:20%;height:100px;width:60px;border-radius:50%}}.eyes{position:absolute;top:30%;left:9%;width:100%;height:20%}.eye{float:left;margin-left:4%;width:20px;height:20px;border-radius:50%;border:1px solid black;background-color:#fff}.eyePupil{margin-top:40%;margin-left:35%;width:8px;height:8px;border-radius:50%;background-color:#000}span{float:left;font-size:1.5em;color:white}.box{position:absolute;width:100%;height:10%;left:40%;bottom:20%}.dot{float:left;margin-top:20px;margin-left:4px;width:5px;height:5px;border-radius:50%;background-color:white;opacity:0}.dot:nth-child(2){-webkit-animation:disappearing 1s linear 0ms infinite alternate;animation:disappearing 1s linear 0ms infinite alternate}.dot:nth-child(3){-webkit-animation:disappearing 1s linear 300ms infinite alternate;animation:disappearing 1s linear 300ms infinite alternate}.dot:nth-child(4){-webkit-animation:disappearing 1s linear 600ms infinite alternate;animation:disappearing 1s linear 600ms infinite alternate}@-webkit-keyframes disappearing{0%,100%{opacity:0}30%,70%{opacity:1}}@keyframes disappearing{0%,100%{opacity:0}30%,70%{opacity:1}}@-webkit-keyframes rainbow{0%{background:#f20d0d}25%{background:#7ff20d}50%{background:#0df2f2}75%{background:#7f0df2}100%{background:#f20d0d}}@keyframes rainbow{0%{background:#f20d0d}25%{background:#7ff20d}50%{background:#0df2f2}75%{background:#7f0df2}100%{background:#f20d0d}}@-webkit-keyframes rainbowRightEar{0%{border-color:transparent transparent #f20d0d}25%{border-color:transparent transparent #7ff20d}50%{border-color:transparent transparent #0df2f2}75%{border-color:transparent transparent #7f0df2}100%{border-color:transparent transparent #f20d0d}}@keyframes rainbowRightEar{0%{border-color:transparent transparent #f20d0d}25%{border-color:transparent transparent #7ff20d}50%{border-color:transparent transparent #0df2f2}75%{border-color:transparent transparent #7f0df2}100%{border-color:transparent transparent #f20d0d}}@-webkit-keyframes rainbowLeftEar{0%{border-color:transparent transparent transparent #f20d0d}25%{border-color:transparent transparent transparent #7ff20d}50%{border-color:transparent transparent transparent #0df2f2}75%{border-color:transparent transparent transparent #7f0df2}100%{border-color:transparent transparent transparent #f20d0d}}@keyframes rainbowLeftEar{0%{border-color:transparent transparent transparent #f20d0d}25%{border-color:transparent transparent transparent #7ff20d}50%{border-color:transparent transparent transparent #0df2f2}75%{border-color:transparent transparent transparent #7f0df2}100%{border-color:transparent transparent transparent #f20d0d}}.shadowBox{position:absolute;bottom:18%;left:-34px;width:100%;height:20px}.shadows{float:left;margin-left:50px;margin-top:4px;width:50px;height:10px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.3) 30%,rgba(0,0,0,.1) 70%);-webkit-animation:sadowMove 1300ms linear 100ms infinite normal;animation:sadowMove 1300ms linear 100ms infinite normal}.shadows:nth-child(1){-webkit-animation:sadowMove 1300ms linear 100ms infinite normal;animation:sadowMove 1300ms linear 100ms infinite normal}.shadows:nth-child(2){-webkit-animation:sadowMove 1300ms linear 200ms infinite normal;animation:sadowMove 1300ms linear 200ms infinite normal}.shadows:nth-child(3){-webkit-animation:sadowMove 1300ms linear 300ms infinite normal;animation:sadowMove 1300ms linear 300ms infinite normal}.shadows:nth-child(4){-webkit-animation:sadowMove 1300ms linear 400ms infinite normal;animation:sadowMove 1300ms linear 400ms infinite normal}.shadows:nth-child(5){-webkit-animation:sadowMove 1300ms linear 500ms infinite normal;animation:sadowMove 1300ms linear 500ms infinite normal}.shadows:nth-child(6){-webkit-animation:sadowMove 1300ms linear 600ms infinite normal;animation:sadowMove 1300ms linear 600ms infinite normal}.shadows:nth-child(7){-webkit-animation:sadowMove 1300ms linear 700ms infinite normal;animation:sadowMove 1300ms linear 700ms infinite normal}.shadows:nth-child(8){-webkit-animation:sadowMove 1300ms linear 800ms infinite normal;animation:sadowMove 1300ms linear 800ms infinite normal}.shadows:nth-child(9){-webkit-animation:sadowMove 1300ms linear 900ms infinite normal;animation:sadowMove 1300ms linear 900ms infinite normal}.shadows:nth-child(10){-webkit-animation:sadowMove 1300ms linear 1000ms infinite normal;animation:sadowMove 1300ms linear 1000ms infinite normal}.shadows:nth-child(11){-webkit-animation:sadowMove 1300ms linear 1100ms infinite normal;animation:sadowMove 1300ms linear 1100ms infinite normal}.shadows:nth-child(12){-webkit-animation:sadowMove 1300ms linear 1200ms infinite normal;animation:sadowMove 1300ms linear 1200ms infinite normal}.shadows:nth-child(13){-webkit-animation:sadowMove 1300ms linear 1300ms infinite normal;animation:sadowMove 1300ms linear 1300ms infinite normal}@-webkit-keyframes sadowMove{0%,100%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(1.8);transform:scale(1.8)}35%{-webkit-transform:scale(.6);transform:scale(.6)}65%{-webkit-transform:scale(1.2);transform:scale(1.2)}75%{-webkit-transform:scale(.8);transform:scale(.8)}}@keyframes sadowMove{0%,100%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(1.8);transform:scale(1.8)}35%{-webkit-transform:scale(.6);transform:scale(.6)}65%{-webkit-transform:scale(1.2);transform:scale(1.2)}75%{-webkit-transform:scale(.8);transform:scale(.8)}}

HTML

<div class="preloader">
    <div class="boxForRabbit">
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
           
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
           
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
          <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
          <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
          <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>
            <div class="rabbit">
            <div class="bodyR">
                <div class="earLeft"></div>
                <div class="earRight"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                    <div class="eye">
                        <div class="eyePupil"></div>
                    </div>
                </div>
            </div>
        </div>

		<div class="shadowBox">
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
			<div class="shadows"></div>
		</div>

    </div>

    <div class="box">
        <span>Loading</span>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>

Я немного ужал и вот тут ширина 100%

.rabbit {
    float: left;
    width: 50px;
    height: 100%;
}

Надеюсь пригодится вам. Автор Andry Zirka

Loading
5

Автор публикации: Игорь logo

95 публикаций 100500 Идей :)

Весь спектр SEO услуг, реклама, продвижение в социальных сетях. Изготовление сайтов.

Обратится в PM Отзывы Подписаться

Ответить

Войти с помощью: