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;
	transform:rotate(120deg)
}
#stickers .sticker-3 .sticker-clip {
	width:169.7075756307px;
	height:169.7075756307px
}
#stickers .sticker-3 .sticker-front,#stickers .sticker-3 .sticker-back {
	left:24.8537878154px;
	top:24.8537878154px;
	width:120px;
	height:120px;
	border-radius:0
}
#stickers .sticker-3 .sticker-clip {
	transform:translateX(2.9093358225px)
}
#stickers .sticker-3 .sticker-front {
	transform:rotate(-120deg) translateX(1.4546679112px) translateY(-2.5195587304px)
}
#stickers .sticker-3 .sticker-back {
	transform:rotate(300deg) translateX(-83.4000492847px) translateY(-144.4513005883px)
}
#stickers .sticker-3:hover .sticker-clip {
	transform:translateX(35.6871166196px)
}
#stickers .sticker-3:hover .sticker-front {
	transform:rotate(-120deg) translateX(17.8435583098px) translateY(-30.9059495804px)
}
#stickers .sticker-3:hover .sticker-back {
	transform:rotate(300deg) translateX(-67.0109762521px) translateY(-116.0649514758px)
}
#stickers .sticker-3 .sticker-front {
	background-color:#9b59b6
}
#stickers .sticker-3 .sticker-back {
	background-color:#8e44ad
}
#stickers .sticker-4 {
	width:120px;
	height:120px
}
#stickers .sticker-4 .sticker-container {
	width:169.7075756307px;
	height:169.7075756307px;
	top:-24.8537878154px;
	left:-24.8537878154px;
	transform:rotate(0deg)
}
#stickers .sticker-4 .sticker-wrapper {
	width:169.7075756307px;
	height:169.7075756307px;
	transform:rotate(120deg)
}
#stickers .sticker-4 .sticker-clip {
	width:169.7075756307px;
	height:169.7075756307px
}
#stickers .sticker-4 .sticker-front,#stickers .sticker-4 .sticker-back {
	left:24.8537878154px;
	top:24.8537878154px;
	width:120px;
	height:120px;
	border-radius:60px
}
#stickers .sticker-4 .sticker-clip {
	transform:translateX(24.4325038789px)
}
#stickers .sticker-4 .sticker-front {
	transform:rotate(-120deg) translateX(12.2162519394px) translateY(-21.1591690372px)
}
#stickers .sticker-4 .sticker-back {
	transform:rotate(300deg) translateX(-72.6383453319px) translateY(-125.811717688px)
}
#stickers .sticker-4:hover .sticker-clip {
	transform:translateX(121.1065581772px)
}
#stickers .sticker-4:hover .sticker-front {
	transform:rotate(-120deg) translateX(60.5532790886px) translateY(-104.8813559464px)
}
#stickers .sticker-4:hover .sticker-back {
	transform:rotate(300deg) translateX(.........完整代码请登录后点击上方下载按钮下载查看