css实现各种形状鼠标悬浮折叠折角效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css实现各种形状鼠标悬浮折叠折角效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
html,body {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        overflow:hidden;
        font-family:sans-serif
}
#stickers {
        background:#2c3e50;
        height:100%;
        width:100%;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:space-around;
        align-items:center;
        align-content:flex-start;
        padding:50px;
        box-sizing:border-box
}
#stickers .sticker {
        flex:0 0 auto;
        margin:50px;
        -webkit-tap-highlight-color:transparent
}
#stickers .sticker * {
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        pointer-events:none
}
#stickers .sticker .sticker-container {
        position:relative;
        transform-style:preserve-3d
}
#stickers .sticker .sticker-wrapper {
        position:absolute;
        top:0;
        left:0
}
#stickers .sticker .sticker-clip {
        position:absolute;
        left:0;
        top:0;
        overflow:hidden
}
#stickers .sticker .sticker-front,#stickers .sticker-back {
        position:absolute;
        overflow:hidden;
        pointer-events:all
}
#stickers .sticker .sticker-front {
        z-index:1;
        background-position:center;
        background-size:100% 100%;
        background-repeat:no-repeat
}
#stickers .sticker .sticker-back {
        z-index:2
}
#stickers .sticker .sticker-clip {
        transition:500ms ease-in-out transform
}
#stickers .sticker .sticker-front,#stickers .sticker .sticker-back {
        transition:500ms ease-in-out transform
}
#stickers .sticker-1 {
        width:150px;
        height:100px
}
#stickers .sticker-1 .sticker-container {
        width:180.2817635663px;
        height:180.2817635663px;
        top:-40.1408817831px;
        left:-15.1408817831px;
        transform:rotate(0deg)
}
#stickers .sticker-1 .sticker-wrapper {
        width:180.2817635663px;
        height:180.2817635663px;
        transform:rotate(45deg)
}
#stickers .sticker-1 .sticker-clip {
        width:180.2817635663px;
        height:180.2817635663px
}
#stickers .sticker-1 .sticker-front,#stickers .sticker-1 .sticker-back {
        left:15.1408817831px;
        top:40.1408817831px;
        width:150px;
        height:100px;
        border-radius:0
}
#stickers .sticker-1 .sticker-clip {
        transform:translateX(1.7667326358px)
}
#stickers .sticker-1 .sticker-front {
        transform:rotate(-45deg) translateX(-1.2492686273px) translateY(-1.2492686273px)
}
#stickers .sticker-1 .sticker-back {
        transform:rotate(225deg) translateX(126.2291871024px) translateY(-126.2291886046px)
}
#stickers .sticker-1:hover .sticker-clip {
        transform:translateX(90.1408817831px)
}
#stickers .sticker-1:hover .sticker-front {
        transform:rotate(-45deg) translateX(-63.739228771px) translateY(-63.739228771px)
}
#stickers .sticker-1:hover .sticker-back {
        transform:rotate(225deg) translateX(63.7392278559px) translateY(-63.7392286144px)
}
#stickers .sticker-1 .sticker-front {
        background-color:#2ecc71
}
#stickers .sticker-1 .sticker-back {
        background-color:#27ae60
}
#stickers .sticker-2 {
        width:150px;
        height:100px
}
#stickers .sticker-2 .sticker-container {
        width:180.2817635663px;
        height:180.2817635663px;
        top:-40.1408817831px;
        left:-15.1408817831px;
        transform:rotate(0deg)
}
#stickers .sticker-2 .sticker-wrapper {
        width:180.2817635663px;
        height:180.2817635663px;
        transform:rotate(60deg)
}
#stickers .sticker-2 .sticker-clip {
        width:180.2817635663px;
        height:180.2817635663px
}
#stickers .sticker-2 .sticker-front,#stickers .sticker-2 .sticker-back {
        left:15.1408817831px;
        top:40.1408817831px;
        width:150px;
        height:100px;
        border-radius:20px
}
#stickers .sticker-2 .sticker-clip {
        transform:translateX(16.5488110638px)
}
#stickers .sticker-2 .sticker-front {
        transform:rotate(-60deg) translateX(-8.2744055319px) translateY(-14.3316907837px)
}
#stickers .sticker-2 .sticker-back {
        transform:rotate(240deg) translateX(81.8664694016px) translateY(-141.7968950532px)
}
#stickers .sticker-2:hover .sticker-clip {
        transform:translateX(75.4224676393px)
}
#stickers .sticker-2:hover .sticker-front {
        transform:rotate(-60deg) translateX(-37.7112338196px) translateY(-65.3177729917px)
}
#stickers .sticker-2:hover .sticker-back {
        transform:rotate(240deg) translateX(52.4296435768px) translateY(-90.8108132948px)
}
#stickers .sticker-2 .sticker-front {
        background-color:#3498db
}
#stickers .sticker-2 .sticker-back {
        background-color:#2980b9
}
#stickers .sticker-3 {
        width:120px;
        height:120px
}
#stickers .sticker-3 .sticker-container {
        width:169.7075756307px;
        height:169.7075756307px;
        top:-24.8537878154px;
        left:-24.8537878154px;
        transform:rotate(0deg)
}
#stickers .sticker-3 .sticker-wrapper {
        width:169.7075756307px;
        height:169.7075756307px;
        tran.........完整代码请登录后点击上方下载按钮下载查看