Блог

Главная - Вопросы по программированию - Как я создаю этот эффект скручивания страницы CSS3?

Как я создаю этот эффект скручивания страницы CSS3?

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать эффект скручивания страницы с помощью CSS3. Этот эффект должен быть чем-то похож на этот —

введите описание изображения здесь

Я пытался заставить его работать, но не смог разобраться.

Это мой код sofar 

 .nav {
    width: 200px;
    background: #353942;
    height: 50px;
    position: relative;

}
.curl {
    width:70px;
    height:50px;
    position: absolute;
    top:0;
    right:0;
    background: linear-gradient(
      25deg, 
      #4c4c4c 0%,
      #474747 39%,
      #2c2c2c 50%,
      #000000 51%,
      #111111 60%,
      #2b2b2b 76%,
      #1c1c1c 91%,
      #131313 100%);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
    transition: all .5s ease;
}
.curl:before,
.curl:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 12.5%;
    bottom: 5.8%;
    width: 70%;
    max-width: 300px;
    max-height: 100px;
    height: 55%;
    box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
    transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
    left: auto;
    right: 5.8%;
    bottom: auto;
    top: 14.16%;
    transform: skew(-25deg) rotate(-84deg);
}

.curl:hover {
    width: 120px;
    height: 50px;
}
.curl:hover:before,
.curl:hover:after {
    box-shadow: 0 24px 30px rgba(0, 0, 0, 0.3);
}

Это JS BIN

Кто-нибудь может сказать мне, как я это понимаю?

Любые идеи будут высоко оценены.

Спасибо.

Комментарии:

1. Вот пример Это не мой форк, но я нашел его в Google.

2. @TylerH что это? Это не то, что я искал…

3. Попробуйте этот codepen : codepen.io/JoostKiens/pen/sIwmb

4. Пожалуйста, проверьте свой ответ, если ваша проблема решит ответ. спасибо

5. Проверьте, поможет ли это вам. cssdeck.com/labs/pure-css3-page-flip-effect

Ответ №1:

проверьте это.

 .nav {
width: 200px;
background: #353942;
height: 50px;
position: relative;

}
 .curl {
width:120px;
height:120px;
position: absolute;
top:0;
left:0;
background : 
    linear-gradient(
        135deg, 
        #fff, 
        #f3f3f3 45%, 
        #ddd 50%, 
        #aaa 50%, 
        #bbb 56%, 
        #ccc 62%, 
        #f3f3f3 80%,
        #fff 100%
    );
box-shadow : 0 0 10px rgba(0, 0, 0, .5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-15deg) rotate(-84deg);
}

.curl:hover {
width: 240px;
height: 240px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}