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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看