翻页折叠的那些事儿

来源：互联网发布：windows media play 编辑：程序博客网时间：2024/06/10 14:18

前言：前几天写了一个使用border实现翻页折叠的东西，现在碰巧需要使用了。但是有一个问题就是，希望在折叠以后，在角落出现文字，方便点击，所以自己又折腾了一番，发现之前总结的linear-gradient。折腾了一番，终于实现了自己想要的效果，分享一波

因为之前自己写过一个详细的介绍，所以这里只是换一个方式实现，如果有人觉得看起来不是很明白，可以看看下面我写的两个博客
1.线性渐变linear-gradient,放射性渐变radial-
gradient,循环渐变
2.border的那些事儿，使用border实现翻页折叠

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style type="text/css">        .content {            position: relative;            width: 660px;            text-align: center;            margin: 50px auto;            padding: 20px 30px 20px 30px;            background: #cdcdcd;            overflow: hidden;        }        img {            width: 100%;        }        .angel {            width: 0;            height: 0;            position: absolute;            bottom:0;            right: 0;            background:linear-gradient(to left top,white 50%,#cdcdcd 0,#cdcdcd 100%);            transition:all 1s;        }        .content:hover .angel{            width: 200px;            height: 140px;            background:linear-gradient(to left top,white 50%,#cdcdcd 0,#cdcdcd 100%);        }        a {            text-decoration: none;            color: black;            display: inline-block;            margin-top: 30px;            margin-left: -30px;        }    </style></head><body><div class="content">    <div class="angel"><a href="#">更多</a></div>    <img src="vip-five.jpg" alt="" /></div></body></html>

实现效果图如下:
这里写图片描述

阅读全文

0 0