美文网首页
css作业-展开照片列表

css作业-展开照片列表

作者: wudimingwo | 来源:发表于2018-11-15 12:08 被阅读0次

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>dddd</title>
        <link rel="stylesheet" type="text/css" href="css/test.css"/>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <div class="wrapper">
          <div class="content">
            <div class="item hide">
                <div class="left">
                  bird
                </div>
                <div class="close">
                  X
                </div>
                <div class="title">
                  title
                </div>
                <div class="bg"></div>
            </div>
            <div class="item hide">
                <div class="left">
                  bird
                </div>
                <div class="close">
                  X
                </div>
                <div class="title">
                  title
                </div>
                <div class="bg"></div>
            </div>
            <div class="item hide">
                <div class="left">
                  bird
                </div>
                <div class="close">
                  X
                </div>
                <div class="title">
                  title
                </div>
                <div class="bg"></div>
            </div>
            <div class="item hide">
                <div class="left">
                  bird
                </div>
                <div class="close">
                  X
                </div>
                <div class="title">
                  title
                </div>
                <div class="bg"></div>
            </div>
            <div class="item hide">
                <div class="left">
                  bird
                </div>
                <div class="close">
                  X
                </div>
                <div class="title">
                  title
                </div>
                <div class="bg"></div>
            </div>
            <div class="item hide">
                <div class="left">
                  bird
                </div>
                <div class="close">
                  X
                </div>
                <div class="title">
                  title
                </div>
                <div class="bg"></div>
            </div>
          </div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            
            $(function () {
                setTimeout(function () {
                    $(".item").removeClass("hide");
                },10);
                //点击item title 消失, 
                $(".item").click(function (e) {
                  $(this).addClass("inner").siblings().addClass("hide");
                })
                
                $(".close").click(function (e) {
                    $(".item").removeClass('inner');
                    $(".item").removeClass('hide');
                    e.stopPropagation();
                })
            });
            
        </script>
    </body>
</html>

scss

@import "new_file.scss";

:root,body,.wrapper{
    width: 100%;
    height: 100%;
}
.wrapper{
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .content{
        width: 80%;
        height: 80%;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        cursor: pointer;
        @for $i from 1 through 6 {
           .item:nth-of-type(#{$i}) .bg{
                height: 100%;
                background-image: url(../img/#{$i}.jpg);
            }
        }
        .item{
            width: 16%;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
            border-radius: 15px;
            position: relative;
            text-align: center;
            transition: transform 1s, width 1s,height 1s;
            .left,.close{
                display: none;
            }
            .title{
                position: absolute;
                width: 100%;
                height: 100%;
                font-size: 30px;
                font-weight: bold;
                color: pink;
                transition: transform 0.5s; 
                &:after{
                    content: "";
                    display: inline-block;
                    height: 100%;
                    vertical-align: middle;
                }
            }
            
            
            &.inner{
               width: 100%;
               height: 100%;
               .title{
                   display: none;
               }
               .left{
                   display: block;
                   position: absolute;
                   top: 30px;
                   left: 30px;
                   color: white;
                   font-size: 30px;
                   font-weight: bold;
                   transition: transform 0.5s,background-color 0.5s;  
                   &:hover{
                       color: #333333;
                       
                       transform: scale(1.5);
                   }
               }
               .close{
                   display: block;
                   position: absolute;
                   top: 30px;
                   right: 30px;
                   color: white;
                   font-size: 30px;
                   font-weight: bold;
                   padding: 10px;
                   transition: transform 0.5s,background-color 0.5s;  
                   &:hover{
                       color: #333333;
                       
                       transform: scale(1.5);
                   }
               }
               .bg{
                   width: 100%;
                   height: 100%;
                   background-size: 100% 100%;
               }
            }
            &.show{
                display: block;
            }
            &.hide{
                transform: translateY(-110%);
                width: 0;
                height: 0;
            }
            &:hover{
                .title{
                    transform: scale(1.5);
                }
            }
        }
    }
    
}

小松老师版
html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>照片转轴</title>
        <link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
        <link rel="stylesheet" type="text/css" href="css.css"/>
    </head>
    <body>
        <div class="wrapper">
            <ul class="content">
                <li class="item">
                    <div class="inner">
                        <div class="bg"></div>
                        <div class="title">title</div>
                        <div class="dir">
                            <div class="header">bird</div>
                            <div class="close iconfont icon-close-circle"></div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="inner">
                        <div class="bg"></div>
                        <div class="title">title</div>
                        <div class="dir">
                            <div class="header">bird</div>
                            <div class="close iconfont icon-close-circle"></div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="inner">
                        <div class="bg"></div>
                        <div class="title">title</div>
                        <div class="dir">
                            <div class="header">bird</div>
                            <div class="close iconfont icon-close-circle"></div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="inner">
                        <div class="bg"></div>
                        <div class="title">title</div>
                        <div class="dir">
                            <div class="header">bird</div>
                            <div class="close iconfont icon-close-circle"></div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="inner">
                        <div class="bg"></div>
                        <div class="title">title</div>
                        <div class="dir">
                            <div class="header">bird</div>
                            <div class="close iconfont icon-close-circle"></div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="inner">
                        <div class="bg"></div>
                        <div class="title">title</div>
                        <div class="dir">
                            <div class="header">bird</div>
                            <div class="close iconfont icon-close-circle"></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="main.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
        </script>
    </body>
</html>

js

$(function () {
    setTimeout(function () {
        $(".wrapper").addClass('init');
    },200);
    
    $(".item").on('click',function () {
        $(this).addClass('show').siblings().addClass('hide');
        $(".title").hide('slow');
    });
    $(".close").on('click',function (e) {
        $(".show").removeClass("show");
        $(".hide").removeClass("hide");
        $(".title").show('slow');
        e.stopPropagation();
    });
});

css

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body,.wrapper{
    width: 100%;
    height: 100%;
}

.wrapper {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.wrapper .content {
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .content .item {
    height: 100%;
    width: 16%;
    border-radius: 20px;
    background-color: #333;
    /*overflow: hidden;*/
    transition: height 0.5s linear 0.5s,width 0.4s linear;
}

.wrapper .content .item.hide {
    /*待删*/
    height: 0px;
    width: 0px;
    transition: height 0.5s linear,width 0.4s linear 0.5s;
    
}
.wrapper .content .item.show {
    /*待删*/
    height: 100%;
    width: 100%;
    transition: height 0.3s 0.7s,width 0.3s 0.7s;
}
.wrapper .content .item .inner .dir{
    /*待删*/
    position: absolute;
    left: 0;
    top: 30px;
    width: 100%;
    height: 30px;
    opacity: 0;
    transition: opacity 0.5s;
}

.wrapper .content .item .inner .dir .header {
    position: absolute;
    left: 50px;
    color: #333;
    font: 24px/1.5 "微软雅黑";
    font-weight: bold;
}
.wrapper .content .item .inner .dir .close {
    position: absolute;
    right: 50px;
    font-size: 40px;
    color: black;
    cursor: pointer;
}
.wrapper .content .item.show .inner .dir .close {
    transform: rotateZ(360deg);
    transition: transform 0.5s linear 1s;
}
.wrapper .content .item.show .inner .dir .close:hover {
    transform: rotateZ(180deg);
    transition: transform 0.5s linear;
    
}

.wrapper .content .item.show .inner .dir {
    /*待删*/
    transition: opacity 0.5s 1s;
    opacity: 1;
}

.wrapper .content .item .inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    /*animation: goup 0.8s ease;*/
}

.wrapper.init .content .item .inner {
    transform: translateY(0%);
}

.wrapper .content .item:nth-of-type(1) .inner{
    /*animation: goup 0.8s ease 0.1s;*/
    transition: transform 0.8s ease .1s;
    
}
.wrapper .content .item:nth-of-type(2) .inner{
    /*animation: goup 0.8s ease 0.1s;*/
    transition: transform 0.8s ease .2s;
    
}
.wrapper .content .item:nth-of-type(3) .inner{
    /*animation: goup 0.8s ease 0.2s;*/
    transition: transform 0.8s ease .3s;
    
}
.wrapper .content .item:nth-of-type(4) .inner{
    /*animation: goup 0.8s ease 0.3s;*/
    transition: transform 0.8s ease .4s;
}
.wrapper .content .item:nth-of-type(5) .inner{
    /*animation: goup 0.8s ease 0.4s;*/
    transition: transform 0.8s ease .5s;
}
.wrapper .content .item:nth-of-type(6) .inner{
    /*animation: goup 0.8s ease 0.5s;*/
    transition: transform 0.8s ease .6s;
}

.wrapper .content .item .inner .bg {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-image: url('./img/1.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    /*这个还挺奇怪的,background 不同,难道background-size position 属性会失效?*/
}
.wrapper .content .item:hover .inner .bg {
    opacity: 1;
}
/*.wrapper .content li.item:nth-of-type(n) .inner .bg {*/
    /*这你妈还挺逗的,权重上来之后,竟然还有效果*/
    /*background-size: cover;*/
    /*background-position: center;*/
/*}*/
.wrapper .content .item:nth-of-type(2) .inner .bg{
    background-image: url('./img/2.jpg') ;
    
    /*如果用background: url('./img/2.jpg'); 则会覆盖上面的 size,position属性*/
    /*复合属性会覆盖掉单个属性,那个学员说的应该是对的*/
    /*如果用background-image: url('./img/2.jpg') no-repeat; 后面这个repeat 绝对不能写 */
    
}
.wrapper .content .item:nth-of-type(3) .inner .bg{
    background-image: url('./img/3.jpg') ;
}
.wrapper .content .item:nth-of-type(4) .inner .bg{
    background-image: url('./img/4.jpg');
}
.wrapper .content .item:nth-of-type(5) .inner .bg{
    background-image: url('./img/1.jpg');
}
.wrapper .content .item:nth-of-type(6) .inner .bg{
    background-image: url('./img/2.jpg');
}

.wrapper .content .item .inner .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #000000;
    font: 22px/1.5 "微软雅黑";
    font-weight: bold;
    transition: font-size 0.2s; 
}
.wrapper .content .item:hover .inner .title {
    font-size: 25px;
}

@keyframes goup{
    from{transform: translateY(100%);}
    to{transform: translateY(0%);}
}

相关文章

  • css作业-展开照片列表

    html scss 小松老师版html js css

  • 列表的展开与收起

    列表出现部分内容，点击展开全部，再点击收起 html css js

  • css实现列表展开与收起

    列表的展开与收起 大家先开看看这张图： 很多人会说，裤子都脱了，你给我看这个？不就是js点击效果么.... NO!...

  • jQuery实现展示全部导航的导航栏

    代码分享，不多说，先来看效果！ 未展开时可以左右拖动，展开后为列表展示，下面是代码： CSS: body,html...

  • 代理无法启动

    方法列表： 重启代理 开启 Window EventLog 查看作业日志 作业活动监视器 展开错误日志 查看SQL...

  • CSS背景、文本、字体、链接、列表、轮廓

    CSS背景 CSS文本 CSS字体 CSS链接 CSS列表 CSS轮廓

  • CSS 列表属性

    列表属性 CSS列表属性用于设置HTML列表元素的样式，包括无序列表和有序列表。 CSS列表的所有属性： list...

  • CSS学习5

    列表 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。 css列表属性： 代码举例： 修改用...

  • CSS 列表样式详解

    CSS列表用于前端的列表排列。 CSS列表属性作用如下： 设置不同的列表项标记为有序列表设置不同的列表项标记为无序...

  • 底部可拖动列表

    需求 1.列表显示在底部2.填充一个列表3.点击"展开"，"收起"执行展开收起的动画并将列表展开和收起4."展开"...

网友评论

      本文标题：css作业-展开照片列表

      本文链接：https://www.haomeiwen.com/subject/tbxyfqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|css作业-展开照片列表|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！