css3实现折纸效果

callmeCassie

已于 2022-06-26 14:24:32 修改

阅读量1.5k

点赞数

分类专栏： js小游戏文章标签： css3 折纸

于 2019-02-03 15:31:16 首次发布

原文链接：https://blog.csdn.net/bomess/article/details/49457959

版权

js小游戏专栏收录该内容

9 篇文章 1 订阅

订阅专栏

效果图

在这里插入图片描述

实现步骤

1.文字居中且有立体感

/*内容块绝对居中*/
	position: absolute;
	top: 50%;
	left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
/*文字增加阴影稍微有立体感一些*/
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     overflow: hidden;

2.关键步骤，boder上右两块有颜色，下左两块为透明

	border: 30px solid #7201aa;
    border-color: rgba(0, 255, 0, 0.5) rgba(0, 220, 0, 0.5) transparent transparent;
    background-color: #fff;

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .wrapper {
            position: relative;
            background-color: #36b11d;
            border-radius: 10px;
            font-family: monoca, "微软雅黑", sans-serif;
            width: 500px;
            height: 300px;
            margin: 0 auto;
        }
        .wrapper>p {
            width: 400px;
            height: 200px;
            display: block;
            color: #f5f5f5;
            font-size: 14px;
            /*内容块绝对居中*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /*文字增加阴影稍微有立体感一些*/
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }
        .wrapper::before {
            /*设置折角实现的位置;*/
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            content: "";
            display: block;
            border: 30px solid #7201aa;
            border-color: rgba(0, 255, 0, 0.5) rgba(0, 220, 0, 0.5) transparent transparent;
            background-color: #fff;
            /*设置元素的阴影效果*/
            box-shadow: 1px -2px 1px rgba(0, 0, 0, 0.5);
        }
        .wrapper::after {
            /*设置折角实现的位置;*/
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            content: "";
            display: block;
            /*通过调整大小来控制折角的大小*/
            border: 60px solid #7201aa;
            border-color: rgba(0, 255, 0, 0.2) transparent transparent rgba(0, 220, 0, 0.2);
            background-color: #fff;
            /*设置元素的阴影效果*/
            box-shadow: -2px -3px 1px rgba(0, 0, 0, 0.5);
        }
        .wrapper:hover::after, .wrapper:hover>a{
            display: none;
        }
        /*名字定位*/
        .wrapper>a {
            display: block;
            width: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 15px;
            color: #2b2b2b;
            text-decoration: none;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset;
            -webkit-transform: rotate(-45deg) inset;
            -ms-transform: rotate(-45deg) inset;
            transform: rotate(-45deg);
            position: absolute;
            right: 70px;
            bottom: 50px;
            z-index: 50;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>
            BEIJING - As China posted slower growth last year, many are worried that continued downward pressure on the
            world's second-largest economy could drag global growth. However, a closer look at the economy would prove
            that the concerns over a slowdown spillover are overstated.
            A more sustainable growth model, coupled with a policy package to stimulate growth, will underpin the
            economy in 2019, bringing abundant opportunities to global investors who stay prepared to cash in on the
            ever-evolving market.
        </p>
        <a href="#">CRPERLIN</a>
    </div>
</body>
</html>