HTML5+CSS3

本周以HTML5与css3为基础写了一个随机动态相册，其中网页加载完后自动循环播放音乐，导航栏使用伪类3d旋转，背景使用js定时随机更换，照片在原区域附近可移动，效果图如下：

收获：

1.   学会插入媒体：

   <audio src="mp3.mp3" autoplay="autoplay" loop="loop"></audio>

   
   
2. 加深对选择器的理解运用，使代码更为简洁：

   #content li,#content .wrapper,#content li img,#contrnt li span{ }
   #content li:hover .wrapper{ }
   .img_div1:hover,.img_div2:hover,.img_div3:hover,.img_div4:hover,.img_div5:hover,.img_div6:hover,.img_div7:hover,.img_div8:hover,.img_div9:hover{ }

3. 学会一些简单的3d布局：transform-style: ;规定如何在 3D 空间中呈现被嵌套的元素，其值preserve-3d会使子元素将保留其 3D 位置。perspective:属性定义 3D 元素距视图的距离，以像素计。background: linear-gradient(top,#E0E0E0,#989898);设置渐变方式方法。
4. 学会使用@keyframes创建动画，其中百分号代表动画播放的时间进程，其后为该时间点的对象样式。需要与animation属性绑定。

   @keyframes css3{
   	0%{border-bottom: 1px solid #009966;}
   	25%{border-bottom: 2px solid #339966;}
   	50%{border-bottom: 3px solid #CC9966;}
   	100%{border-bottom: 4px solid #9900FF;}
   }
   

5. 学会通过js改变对象背景，URL中用+添加图片地址：

   function fun2(){
   	var img=["img/img1.jpg",
   				"img/img2.jpg",
   				"img/img3.jpg",
   				 "img/img4.jpg",
   				 "img/img5.jpg"];
   	var a = document.getElementById("main_div");
   	
   	a.style.backgroundImage= "url("+img[x]+")";
   }
   

问题：

1.  没有更好的方法控制图片移动大致区域，现方法导致图片运动存在规律。
2. 无法用js与伪类同时改变样式，否则过渡属性无用，导致突变。
3. 无法真正随机图片移动距离大小，js中过多for导致网页卡顿。