jquery翻书交互效果
代码语言:html
所属分类:布局界面
代码描述:jquery翻书交互效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>翻书</title>
<style>
*{
padding: 0px;
margin: 0px;
font-size: 16px;
color: #333;
font-family: "Microsoft YaHei";
}
a,a:link,a:visited,a:hover,a:active{
text-decoration: none;
}
::-moz-selection {
background: #338FFF;
color: #fff;
}
::-webkit-selection {
background: #338FFF;
color: #fff;
}
::selection {
background: #338FFF;
color: #fff;
}
.clear::after{
content: "";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.response-img{
display: block;
max-width: 100%;
}
.text-overflow{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body{
width: 100%;
max-width: 1920px;
min-width: 1200px;
}
#knowledge{
width: 100%;
position: relative;
background-color: #ccc;
padding: 40px 0;
}
.bookBox{
width: 1000px;
height: 500px;
position: relative;
margin: 30px auto;
-webkit-perspective-origin: 50% 60%;
perspective-origin: 50% 60%;
-webkit-perspective: 1500px;
perspective: 1500px;
background: url(data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0