纯css完成相片墙三d实际效果的示例编码

日期:2020-10-16 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

本篇文章内容便是展现1个相片墙的实际效果。因此空话很少说,立即上编码随后展现殊效。有兴趣爱好的道友能够自身练练手试试。

立即上编码

1.提前准备原材料:

提前准备原材料便是没甚么原材料,自身麻溜赶紧的去:百度搜索找几张漂亮美女的相片来检测便可。

2.html编码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻"/>
    <title>相片墙</title>
    <link href="Content/index.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <前端开发学习培训沟通交流QQ群:461593224>
        <!--漂亮美女的相片自身提前准备,小样的相片百度搜索有 :)-->
        <img class="img img1" src="img/1.jpg" />
        <img class="img img2" src="img/2.jpg" />
        <img class="img img3" src="img/3.jpg" />
        <img class="img img4" src="img/4.jpg" />
        <img class="img img5" src="img/5.jpg" />
        <img class="img img6" src="img/6.jpg" />
        <img class="img img7" src="img/7.jpg" />
        <img class="img img8" src="img/8.jpg" />
        <img class="img img9" src="img/9.jpg" />
    </div>
</body>
</html> 

3.CSS编码:

* {
    margin:0;
    padding:0;
}

body {
    background-color:#eee;
}

.container {
    width:960px;
    height:450px;
    margin:60px auto;
    position:relative;
}

.img {
    /*宽度能够依据自身挑选的相片內容而定*/
    width:150px;
}

.container img:hover {
    box-shadow:15px 15px 20px rgba(50,50,50,0.4);
    transform:rotate3d(1,1,1,180deg) scale(1.50);
    -webkit-transform:rotate3d(1,1,1,180deg) scale(1.50);
    -moz-transform:rotate3d(0deg,0deg,0deg) scale(1.50);
    -ms-transform:rotate3d(0deg,0deg,0deg) scale(1.50);
    /*自身照片的z-index是1,电脑鼠标历经情况下设定成2,那末这张照片就会"上来"*/
    z-index:2;
}

.container img {
    /*给相片加1个相框的实际效果*/
    padding: 10px 10px 15px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
    /*渐派出画实际效果*/
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    z-index: 1;
}

.img1 {
    left:400px;
    top:0;
    /*CSS3特性transform:转动:rotate,放缩:scale,歪斜:skew */
    transform:rotate(⑸deg);
    /*-webkit意味着chrome、safari独享特性*/
    -webkit-transform:rotate(⑸deg);
    /*-moz意味着firefox访问器独享特性*/
    -moz-transform:rotate(⑸deg);
    /*-ms意味着IE访问器独享特性*/
    -ms-transform:rotate(⑸deg);
}

.img2 {
    left:600px;
    top:0;
    /*转动角度能够依据自身的审美观大方决定*/
    transform:rotate(⑵0deg);
    -webkit-transform:rotate(⑵0deg);
    -moz-transform:rotate(⑵0deg);
    -ms-transform:rotate(⑵0deg);
}

.img3 {
    bottom:0px;
    right:0;
    transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
}

.img4 {
    bottom:400px;
    left:300px;
    transform:rotate(⑴0deg);
    -webkit-transform:rotate(⑴0deg);
    -moz-transform:rotate(⑴0deg);
    -ms-transform:rotate(⑴0deg);
}

.img5 {
    bottom:0px;
    top:0;
    transform:rotate(⑴0deg);
    -webkit-transform:rotate(⑴0deg);
    -moz-transform:rotate(⑴0deg);
    -ms-transform:rotate(⑴0deg);
}

.img6 {
    left:0px;
    top:0;
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    -ms-transform:rotate(10deg);
}

.img7 {
    left:850px;
    top:0;
    transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
}

.img8 {
    bottom:⑵0px;
    top:650px;
    transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
}

.img9 {
    left:550px;
    top:100px;
    transform:rotate(15deg);
    -webkit-transform:rotate(15deg);
    -moz-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
}

css编码的这些注解也是热呼的,大伙儿能够自身看看,能够修改在其中的1些特性多玩玩。

4.实际效果演试:

5.源代码免费下载:https://github.com/toutouge/WebProject/tree/master/CSS3PhotoWall

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。