海报 demo

来源：互联网发布：mac 压缩文件夹编辑：程序博客网时间：2024/04/29 22:41

效果

这里写图片描述

思路

1.设置两张图片和底部的搜索栏

<ul>    <li>        <img src="https://goo.gl/sGrO7g" alt="">        <div class="info">            <p>Drama</p>            <div class="button"></div>        </div>    </li>    <li>        <img src="https://goo.gl/Cjq6Sj" alt="">        <div class="info">            <p>Action, Drama, Sci Fi</p>            <div class="button"></div>        </div>    </li></ul>

2.设置图片的放大动画和阴影效果

        li:hover img {            cursor: pointer;            box-shadow: 0 1em 2em rgba(0,0,0,0.2);            transform: scale(1.1);        }

3.设置搜索栏的下滑动画和阴影效果

  li:hover .info {            bottom: -4.75em;            box-shadow: 0 1.5em 6em rgba(0,0,0,0.15);        }

4.设置按钮的动画

 .button:hover {            cursor: pointer;            background: lightslategray;        }        .button:hover::before {            transform: translateX(-1.5em);            opacity: 0;        }        .button:hover::after {            transform: translateX(-1.5em);            display: inline;            opacity: 1;        }

5.img、.info和.button都设置transition属性实现过渡动画

源码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body, ul, li { margin: 0; padding: 0; }        ul { list-style: none; }        body, ul, .info, .button {            display: flex;            flex-direction: row;        }        body {            width: 100%; height: 100vh;            background: rgb(240, 240, 240);            justify-content: center;            align-items: center;        }        li {            position: relative;             margin: 0 3em;            transition: transform .5s, box-shadow .5s;         }        img {            width: 300px;            transition: transform .5s, box-shadow .5s;            backface-visibility: hidden;        }        .info {            z-index: -1;             background: white;            height: 5em;            position: absolute;             left: 0; right: 0; margin-left: auto; margin-right: auto;             bottom: 5em;             align-items: flex-end;             justify-content: space-between;             transition: bottom .6s, box-shadow .6s;        }        .info p {            margin: 1.1em 1.25em;            color: lightslategray;            font-weight: 400;        }        .button {            height: 3.75em;            width: 6em;            align-items: center;            justify-content: center;            background: tomato;            color: white;            transition: background .5s;        }        .button::before {            content: "Watch";            transform:translateX(0.9em);            transition: transform .5s, opacity .5s, display .5s;        }        .button::after {            content: "Now";            opacity: 0;            transform: translateX(1.5em);            transition: transform .5s, opacity .5s, display .5s;        }        .button:hover {            cursor: pointer;            background: lightslategray;        }        .button:hover::before {            transform: translateX(-1.5em);            opacity: 0;        }        .button:hover::after {            transform: translateX(-1.5em);            display: inline;            opacity: 1;        }        li:hover {            transform: scale(1.1);        }        li:hover img {            cursor: pointer;            box-shadow: 0 1em 2em rgba(0,0,0,0.2);            transform: scale(1.1);        }        li:hover .info {            bottom: -4.75em;            box-shadow: 0 1.5em 6em rgba(0,0,0,0.15);        }    </style></head><body><ul>    <li>        <img src="https://goo.gl/sGrO7g" alt="">        <div class="info">            <p>Drama</p>            <div class="button"></div>        </div>    </li>    <li>        <img src="https://goo.gl/Cjq6Sj" alt="">        <div class="info">            <p>Action, Drama, Sci Fi</p>            <div class="button"></div>        </div>    </li></ul></body></html>

参考

http://codepen.io/dhanishgajjar/pen/WjJJrg

阅读全文

1 0