html5鼠标移动图片3d效果,图片立体动画特效炫酷风格!
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
</head>
<body>
<div class="site-content">
<h2 class="section-title">Demo 1</h2>
<div class="project-list">
<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="images/1.jpg" <html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" href="css/style.css" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-content">
<h2 class="section-title">Demo 1</h2>
<div class="project-list">
<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="images/1.jpg" width="600" height="400" alt="" /></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>
<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="images/2.jpg" width="600" height="400" alt="" /></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>
</div>
<h2 class="section-title">Demo 2</h2>
<div class="movie">
<div class="movie__card">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.hover3d.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".project").hover3d({
selector: ".project__card",
shine: true,
});
$(".movie").hover3d({
selector: ".movie__card",
shine: true,
sensitivity: 20,
});
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791