用HTML做的照片墙怎么用手机打开

html-css049

用HTML做的照片墙怎么用手机打开,第1张

输入QQ号码和密码，点击登录登录成功后点击正下方“动态”找到并点击“好友动态”进入好友动态，点击正上方的背景图片进入背景商城，找到并点击“照片墙”进入照片墙，点击右上角的“添加”，你可以选择从手机里或者从空间相册里添加照片

Ge1doot.js超酷3D立体照片墙

查看源代码以及演示请登录：http://www.sucaihuo.com/js/447.html

HTML

<canvas id="canvas"></canvas>

引入ge1doot.js3D相册插件

<script type="text/javascript" src="js/ge1doot.js"></script>

自定义图片代码，大约在index.html第260行

imgdata:[ 

    // north 

    {img: 'imgs/1.jpg', x: -1000, y: 0, z: 1500, nx: 0, nz: 1}, 

    {img: 'imgs/2.jpg', x: 0, y: 0, z: 1500, nx: 0, nz: 1}, 

    {img: 'imgs/3.jpg', x: 1000, y: 0, z: 1500, nx: 0, nz: 1}, 

]

纯CSS实现这样的动画必须得用CSS3，我写了个DEMO：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.wrap {position: relative width: 800px padding: 10px 0 0 10px margin: 0 auto}

.wrap img {position: absolute max-width: 300px margin: 0 10px 10px 0 cursor: pointer transition: ease-in-out .2s}

.wrap img:hover {margin-top: 15px}

</style>

</head>

<body>

<div class="wrap">

<img src="../img/cpu.png" alt="" style="top:10px left:10px">

<img src="../img/cartoon.jpg" alt="" style="top:50px right:10px">

</div>

</body>

</html>

主要用到CSS3中的transition这个声明来实现简单动画，如果需要实现更复杂的动画，就需要使用CSS3中的@keyframe了