今天没有什么新的内容和大家说，因为今天一天我们都是在忙碌在作业当中，所以说也就没有上新的内容，接下来我就和大家简简单单讲解一些作业吧！
1.制作多彩照片
2.制作多彩照片HTML代码样式
</head>
<body>
<div>
<!-- 图片 -->
<a href="#">
<img src="../1.jpg" alt="">
<img src="../3.jpg" alt="">
<img src="../10.jpg" alt="">
<img src="../8.jpg" alt="">
<img src="../4.jpg" alt="">
</a>
</div>
</body>
</html>
3.制作多彩照片css样式
<style >
*{
margin: 0;
padding: 0;
}
/* 整体图片 */
div img{
border:2px #CCCCCC solid;
padding:10px;
background-color:white;
position:absolute;
transition:all 0.8s ease-in-out;
}
/* 第一张 */
div img:nth-child(1){
top:150px;
left:300px;
width: 350px;
transform:rotate(20deg);
}
/* 第二张 */
div img:nth-child(2){
top:150px;
left:100px;
width: 360px;
transform:rotate(-20deg);
}
/* 第三张 */
div img:nth-child(3){
top:150px;
left:600px;
width: 320px;
transform:rotate(5deg);
}
/* 第四张 */
div img:nth-child(4){
top:400px;
left:600px;
width: 300px;
transform:rotate(-30deg);
}
/* 第五张 */
div img:nth-child(5){
top: 200px;
left: 900px;
width: 250px;
transform: rotate(25deg);
}
/*鼠标放上去的效果*/
div img:hover{
z-index: 99;
transform:rotate(360deg) scale(1.5);
}
</style>今天的内容就到这了，感谢大家的观看！
扫一扫
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
