简单效果照片墙

Original 2019-02-19 16:23:48 191
abstract:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" />     <title>照片墙</title>    
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>照片墙</title>
    <link rel="stylesheet" type="text/css" href="static/css/zhaopianqiang.css">
</head>
<body>
<div>
    <div><img src="static/images/3.jpg"></div>
    <div><img src="static/images/4.jpg"></div>
    <div><img src="static/images/3.jpg"></div>
    <div><img src="static/images/4.jpg"></div>
    <div><img src="static/images/3.jpg"></div>
    <div><img src="static/images/4.jpg"></div>
    <div><img src="static/images/3.jpg"></div>
    <div><img src="static/images/4.jpg"></div>
    <div><img src="static/images/3.jpg"></div>
    <div><img src="static/images/4.jpg"></div>
</div>
</body>
</html>
*{margin:0px;padding:0px}
.content{;width:1000px;margin:0px auto;background: #ccc;margin-top:30px;}
.pic{width:170px;height:85px;float:left;border:1px solid blue;margin:5px 10px;box-shadow: 10px 10px 5px #888888;}
.pic:hover img{
    -webkit-transition: all .5s;
    -webkit-transform: scale(1.2);
}


Correcting teacher:灭绝师太Correction time:2019-02-19 16:26:52
Teacher's summary:就是简单的css3动画,运用得当就是很好的效果,继续加油!

Release Notes

Popular Entries