css3圖片牆

時間 2019-12-04

標籤 css3 css 圖片欄目 CSS 简体版

原文原文鏈接

css相關知識：

1. 使用box-shadow設置圖片陰影,爲照片加上陰影css

eg： box-shadow: 0 0 5px 3px #abchtml

2. 使用tansform-origin定義變形原點web

eg: -webkit-transform-origin: 0 1px函數

3. 使用transform變形，經常使用變形函數有scale、rotate、translateurl

eg: 
-webkit-transform: scale(0.8, 0.5);
-webkit-transform: skew(-30deg, -10deg);
-webkit-transform: rotate(30deg);
-webkit-transform: translate(10px, 10px);

定義多個變形：

-webkit-transform: rotate(30deg) translate(10px, 10px) scale(1, 2);

4. transition實現過渡效果spa

transition: transition-property || transition-duration || transition-timing-function || transition-delaycode

eg:

-webkit-transition: all 1000ms linear 500ms

過渡函數主要包括： orm

linear 一個速度

ease 先慢再快再慢

ease-in  先慢後愈來愈快

ease-out  先快後愈來愈慢

ease-in-out  開始和結束時都很慢

cubic-bezier： 速度爲貝塞爾曲線

5. 添加內容 :before :after 添加content內容htm

6. :hover添加鼠標滑過效果blog

效果：

鼠標滑過使用scale拉伸圖片，變換角度，添加內容：

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
    background: url(../images/12.jpg);
    background-size: cover;

}
#gallary{
    margin: 10px auto;
    padding: 40px;
    list-style: none;
    width:1060px;
}
#gallary li{
    float: left;
    width: 206px;
    height: 160px;
    oveflow: visible;
}
#gallary li a{
    color: #333;
    text-decoration: none;
    font-size: 4px;
    display: block;
    text-align: center;
    background-color: #FFF;
    padding: 3px;
    opacity: 0.8;
    box-shadow: 0 0 5px 2px #333;
}
#gallary li a{
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    transition: all 500ms linear;

    -webkit-transfrom-origin: 0 0;
    -moz-transfrom-origin: 0 0;
    transfrom-origin: 0 0;

    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    transform: rotate(-15deg);

}

#gallary li a img{
    width: 200px;
}
#gallary li:nth-child(3n) a{
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
}
#gallary li:nth-child(4n) a{
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
}
#gallary li:nth-child(7n) a{
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
#gallary li:nth-child(9n) a{
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
#gallary li a:hover{
    position: relative;
    z-index: 1;
    opacity: 1;
    -webkit-transform: rotate(0deg) scale(2);
    -moz-transform: rotate(0deg) scale(2);
    transform: rotate(0deg) scale(2);
}
#gallary li a:hover:after{
    content: attr(title);
}

</style>
</head>
<body>
<ul id="gallary">
    <li><a href="#" title="picture1"><img src="../images/1.jpg"></a></li>
    <li><a href="#" title="picture2"><img src="../images/2.jpg"></a></li>
    <li><a href="#" title="picture3"><img src="../images/3.jpg"></a></li>
    <li><a href="#" title="picture4"><img src="../images/4.jpg"></a></li>
    <li><a href="#" title="picture5"><img src="../images/5.jpg"></a></li>
    <li><a href="#" title="picture7"><img src="../images/7.jpg"></a></li>
    <li><a href="#" title="picture8"><img src="../images/8.jpg"></a></li>
    <li><a href="#" title="picture9"><img src="../images/9.jpg"></a></li>
    <li><a href="#" title="picture10"><img src="../images/10.jpg"></a></li>
    <li><a href="#" title="picture6"><img src="../images/11.jpg"></a></li>
    <li><a href="#" title="picture11"><img src="../images/1.jpg"></a></li>
    <li><a href="#" title="picture12"><img src="../images/2.jpg"></a></li>
    <li><a href="#" title="picture13"><img src="../images/3.jpg"></a></li>
    <li><a href="#" title="picture14"><img src="../images/4.jpg"></a></li>
    <li><a href="#" title="picture15"><img src="../images/5.jpg"></a></li>
</ul>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。