翻页卡片效果swatch book

程序员文章站 2022-06-13 13:02:33

...

想要一个翻页卡片的效果么可以使用jquery + CSS3 实现此效果. 直接上代码. demo 在文章底部: HTML: div id="sb-container" class="sb-container" div span class="sb-icon icon-cog"/span h4spanAll Settings/span/h4 /div div span class="sb-icon icon-

想要一个翻页卡片的效果么… 可以使用jquery + CSS3 实现此效果.

直接上代码…. demo 在文章底部:

HTML:


    
        
        All Settings
    
    
        
        User Modes
        
    
        
        
    
    
        Profile
        We ? color

?CSS:

.sb-container {
    position: relative;
    width: 150px;
    height: 400px;
    margin: 30px auto 0 auto;
}
.sb-container div {
    position: absolute;
    top: 0;
    left: 0; 
    width: 130px;
    background: #fff;
    height: 400px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    background-image: url(../images/fabric.png);
    transform-origin: 25% 90%;
    backface-visibility: hidden;
}
.sb-container div:nth-child(1){
    background-color: #ea2a29;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(2){
    background-color: #f16729;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(3){
    background-color: #f89322;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(4){
    background-color: #ffcf14;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(5){
    background-color: #ffea0d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(6){
    background-color: #87b11d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(7){
    background-color: #008253;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(8){
    background-color: #3277b5;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(9){
    background-color: #4c549f;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(10){
    background-color: #764394;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(11){
    background-color: #ca0d86;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}
.sb-container div:last-child{
    background: #645b5c url(../images/cover.jpg) repeat center center;
    box-shadow: 
        -1px -1px 3px rgba(0,0,0,0.2),
        12px 12px 20px rgba(0,0,0,0.6),
        inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}
.sb-container div:last-child:after{
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dddddd;
    background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);
    box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1);
}
.sb-container div h4{
    color: rgba(255,255,255,0.9);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    border-top: 1px dashed rgba(0,0,0,0.1);
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    margin: 5px;
    padding: 5px;
    user-select: none;
}
.sb-container div:last-child h4{
    background: rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
.sb-container div:last-child h5{
    font-size: 50px;
    white-space: nowrap;
    text-align: left;
    margin: 0;
    padding: 0;
    position: absolute;
    line-height: 50px;
    top: 0px;
    left: 0px;
    color: #111;
    text-shadow: -1px -1px 1px rgba(255,255,255,0.1);
    text-transform: uppercase;
    transform: rotate(-90deg) translateX(-157%) translateY(73px);
    transform-origin: 0 0;
    user-select: none;
}
span.sb-icon{
    display: block;
    height: 70px;
    width: 70px;
    margin: 20px auto;
    user-select: none;
}
span.sb-icon:before {
    font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: block;
    text-decoration: inherit;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 
    line-height: 64px;
    width: 100%;
    font-size: 60px;
    color: #000;
    text-shadow: 0 0 1px #000;
}
.icon-cog:before { content: '\35'; } /* '5' */
.icon-flight:before { content: '\37'; } /* '7' */
.icon-eye:before { content: '\34'; } /* '4' */
.icon-install:before { content: '\39'; } /* '9' */
.icon-bag:before { content: '\36'; } /* '6' */
.icon-globe:before { content: '\38'; } /* '8' */
.icon-picture:before { content: '\32'; } /* '2' */
.icon-video:before { content: '\30'; } /* '0' */
.icon-download:before { content: '\41'; } /* 'A' */
.icon-mobile:before { content: '\42'; } /* 'B' */
.icon-camera:before { content: '\33'; } /* '3' */

?jquery:

$.SwatchBook.defaults = {
    // 初始个数
    center : 6,
    // 编号
    angleInc : 8,
    speed : 700,
    easing : 'ease',
    // amount in degrees for the opened item's next sibling
    proximity : 45,
    // amount in degrees between the opened item's next siblings
    neighbor : 4,
    // animate on load
    onLoadAnim : true,
    // if it should be closed by default
    initclosed : false,
    // index of the element that when clicked, triggers the open/close function
    // by default there is no such element
    closeIdx : -1,
    // open one specific item initially (overrides initclosed)
    openAt : -1
};

先写到这~~~~..困死了~~~

原文地址：翻页卡片效果swatch book, 感谢原作者分享。