首页 前端知识 我用css3为好友胡歌的宝宝做了一个动画照片墙

我用css3为好友胡歌的宝宝做了一个动画照片墙

2024-01-28 12:01:20 前端知识 前端哥 1003 126 我要收藏

软件人生风雨十年,仙剑一过去也有十年有余了,和胡歌认识那么久,今日喜闻好友胡歌生宝宝的消息,惊喜之余用css3为胡歌的宝宝做了动画照片墙的模板效果。

目录

1. 实现思路

2. 墙体的实现

3. 选取模板素材,进行图片元素布局

4. css3旋转定位

5. 鼠标上移的放大动画 

6. 完整源代码 

7. 最后


1. 实现思路

 首先通过设置一个div元素,设定宽高,为背景墙;

并且将背景墙的定位设定为relative,以便内部照片的旋转,以及定位;

内部照片可以找一些素材,再通过定位设定为absolute,而且这里要添加css3的旋转属性进行布局;

最后当鼠标上移到每个照片的时候,需要有一个放大的效果,为了更好的展示每一张照片。

2. 墙体的实现

需要设定一个div元素,添加wall的class类属性,并且为了定位内部的照片,定位属性采用position:relative,色值可以设定的喜庆一些,这里设定为一个#ccc的背景效果,代码如下:

// css部分
.wall {
   position: relative;
   width: 800px;
   height: 400px;
   background: #CCC;
}

<!-- html部分 -->
<div class="wall">
</div>

3. 选取模板素材,进行图片元素布局

可以去网上选取一些宝宝照素材,做模板嘛,大概选取几张就可以了,然后由于需要每张特殊定位,所以给每张图片(每个img元素都添加自己的clsss类),代码如下:

<div class="wall">
   <img src="./111.png" class="img1" />
   <img src="./222.png" class="img2" />
   <img src="./333.png" class="img3" />
   <img src="./444.png" class="img4" />
   <img src="./555.png" class="img5" />
   <img src="./666.png" class="img6" />
   <img src="./777.png" class="img7" />
</div>

4. css3旋转定位

接下来就是重要环节,给每个照片进行独特的定位,定位包括top left width height的设定,因为照片墙想要做的真实一些,所以会有一定的遮挡效果,而通过position:absolute的设定正好可以达到这个效果,如果你想让某一张显示在最上面,可以通过z-index再次设定,代码如下:

.img1 {
            position: absolute;
            top: 20px;
            left: 60px;
            width: 110px;
            height: 86px;
            transform: rotate(20deg);
        }
        .img2 {
            position: absolute;
            top: 20px;
            left: 222px;
            width: 143px;
            height: 118px;
            transform: rotate(-27deg);
        }
        .img3 {
            position: absolute;
            top: 78px;
            left: 430px;
            width: 190px;
            height: 148px;
            transform: rotate(58deg);
        }
        .img4 {
            position: absolute;
            top: 99px;
            left: 273px;
            width: 280px;
            height: 221px;
            transform: rotate(58deg);
        }
        .img5 {
            position: absolute;
            top: 174px;
            left: 73px;
            width: 237px;
            height: 210px;
            transform: rotate(135deg);
        }
        .img6 {
            position: absolute;
            top: 174px;
            left: 574px;
            width: 192px;
            height: 195px;
            transform: rotate(225deg);
        }
        .img7 {
            position: absolute;
            top: 39px;
            left: 618px;
            width: 134px;
            height: 133px;
            transform: rotate(10deg);
        }

5. 鼠标上移的放大动画 

既然是一种HTML + CSS3的动态照片墙,那么最好是可以有一个放大的效果,其实还有很多效果可以做,比如旋转一下,或者从某个地方淡入淡出一下,做的像个视频那样,这里做的是鼠标上移放大的效果,代码如下:

img:hover {
   transform: scale(2);
}

6. 完整源代码 

上面都是代码片段,为了可以让大家拿到代码就有个很好的效果,可以拿到下面的源代码,直接放到自己的记事本里,再将记事本的txt后缀改为html,再用浏览器打开就可以看效果了。源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wall {
            position: relative;
            width: 800px;
            height: 400px;
            background: #CCC;
        }
        .img1 {
            position: absolute;
            top: 20px;
            left: 60px;
            width: 110px;
            height: 86px;
            transform: rotate(20deg);
        }
        .img2 {
            position: absolute;
            top: 20px;
            left: 222px;
            width: 143px;
            height: 118px;
            transform: rotate(-27deg);
        }
        .img3 {
            position: absolute;
            top: 78px;
            left: 430px;
            width: 190px;
            height: 148px;
            transform: rotate(58deg);
        }
        .img4 {
            position: absolute;
            top: 99px;
            left: 273px;
            width: 280px;
            height: 221px;
            transform: rotate(58deg);
        }
        .img5 {
            position: absolute;
            top: 174px;
            left: 73px;
            width: 237px;
            height: 210px;
            transform: rotate(135deg);
        }
        .img6 {
            position: absolute;
            top: 174px;
            left: 574px;
            width: 192px;
            height: 195px;
            transform: rotate(225deg);
        }
        .img7 {
            position: absolute;
            top: 39px;
            left: 618px;
            width: 134px;
            height: 133px;
            transform: rotate(10deg);
        }
        img:hover {
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="wall">
        <img src="./111.png" class="img1" />
        <img src="./222.png" class="img2" />
        <img src="./333.png" class="img3" />
        <img src="./444.png" class="img4" />
        <img src="./555.png" class="img5" />
        <img src="./666.png" class="img6" />
        <img src="./777.png" class="img7" />
    </div>
</body>

 

7. 最后

最后再次恭喜胡歌,他给我们带来了这么多优秀的作品,为他感到高兴,希望小宝宝可以快快乐乐成长。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/650.html
标签
css动画
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!