css3之制作个性照片墙

在学习了css3之后，是不是觉得css3的功能竟然如此强大，话不多说，下面我就给大家讲讲如何利用css3制作一个个性化的照片墙。
需要用到的知识：
rotate()方法
transform:rotate(度数)
度数为正，表示元素相对原点中心顺时针旋转；度数为负，则表示元素相对原点中心进行逆时针旋转。
结构伪类选择器：
E：first-child 选择父元素的第一个子元素
E：last-child 选择父元素的最后一个子元素
E：nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为数字，odd,even
代码如下：

<!DOCTYPE html>
<html>
<head><title></title>
<style>
#div1{position:relative;width:800px;height:500px;margin:0 auto;border:10px groove rgb(240,235,213);background-color:rgb(255,192,203);}
#div1 img{position:absolute;width:180px;height:160px;padding:10px;background-color: white;}
#div1 img:first-child{left:100px;top: 60px;-webkit-transform:rotate(30deg);}
#div1 img:nth-child(2){left:300px;top:60px;-webkit-transform:rotate(-30deg);}
#div1 img:nth-child(3){left:480px; top:60px; -webkit-transform:rotate(40deg);}#div1 img:nth-child(4){left:100px; top:280px; -webkit-transform:rotate(-30deg);}#div1 img:nth-child(5){left:300px; top:280px; -webkit-transform:rotate(0);}#div1 img:last-child{left:480px; top:280px;-webkit-transform:rotate(30deg);}
</style>
</head>
<body>
<div id="div1">
<img src="C:\Users\asus\Desktop\2/1.jpg"/>
<img src="C:\Users\asus\Desktop\2/2.png"/>
<img src="C:\Users\asus\Desktop\2/3.jpg"/>
<img src="C:\Users\asus\Desktop\2/4.jpg"/>
<img src="C:\Users\asus\Desktop\2/5.jpg"/>
<img src="C:\Users\asus\Desktop\2/6.jpeg"/>
</div>
</body>
</html>

效果图如下：

css3之制作个性照片墙相关推荐

css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
【教程】超漂亮的CSS3按钮制作教程
利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看的渐变按钮.按钮的大小可以通过CSS属性就能轻松的修改,而且 ...
生日快乐程序_别@官方了！云开发教你制作个性头像小程序，以后过节想加啥就加啥！...
导语别再@官方啦!云开发教你轻松制作个性头像小程序,趣味挂件.个性icon--想加啥就加啥!以后的每个节日,不求官方只求自己!快来get一下! 今年是祖国成立70周年(1949-2019) 提前祝祖 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
ppt模板如何制作个性人物海报？
ppt模板功能也是很强大的,基本上你能想到的,都能做出来,今天我们来了解一下用ppt模板制作海报的方法,如何制作个性人物海报?ppt家园就来给大家分享一下制作技巧. 模板入口:https://www ...
怎么制作出好玩的头像？教你制作个性头像小技巧
怎么制作出好玩的个性头像呢?大家在一些社交媒体上都会有自己的专属头像,如果自己的头像给别人撞了就会非常尴尬,为了避免这种情况,我们可以自己制作头像,制作头像可以突出你的个性,让你在社交网络中更加突出. ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
css 会飞的蝴蝶,CSS3怎么制作蝴蝶飞舞的动画
CSS3怎么制作蝴蝶飞舞的动画?蝴蝶飞舞的动画效果是什么样的?CSS3制作蝴蝶飞舞的动画需要注意哪些方面?今天给大家用CSS3做一个蝴蝶飞舞的动画. CSS3制作蝴蝶飞舞动画 body{ backgr ...

css3之制作个性照片墙

css3之制作个性照片墙相关推荐

最新文章

热门文章