CSS3实现精美的纸张折角效果 -- 进阶版

最新推荐文章于 2024-02-19 14:13:37 发布

crper

最新推荐文章于 2024-02-19 14:13:37 发布

阅读量4.1k

点赞数 2

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： css3 css 动画代码 css3折角

本文链接：https://blog.csdn.net/crper/article/details/49474807

版权

本文介绍了如何使用CSS3改进纸张折角效果，使其适应任何背景，包括渐变背景。内容包括改变的要素分析，展示了两种案例，一个是静态效果，另一个增加了动画效果，使折角更具动态感。通过代码实现，读者可以学习到如何创建这种高级的视觉效果。

摘要由CSDN通过智能技术生成

改变的要素

昨天那个CSS3实现折角,需要到纯色背景下才能比较完美,今天就遇到问题了…背景是渐变的;所以改良一下;

适用于任何背景,控制::before和::after
两个案例,第一个是适用于任何背景的,第二个增加了动画效果

效果图

这里写图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现折角效果</title>
    <style media="screen">
        body{
    
            background-color: #ddca7c;
        }
        .title{
    
            margin:20px;
        }

        .wrapper{
    
        margin:0 auto;
        width:500px;
        height:300px;
        background-color: #36b11d;
        border-radius: 10px 10px 0 0;
        font-family: monoca,"微软雅黑",sans-serif;
        /*父包含块*/
        position: relative;
        }
        .wrapper > p{
    
            width:400px;
            height:200px;
            display: block;
            color:#f5f5f5;
            font-size:14px;

            /*文字换行*/
            word-wrap: break-word;
            word-break: break-all;

            /*内容块绝对居中*/
            position: absolute;
            top:50%;
            left:50%;
            -webkit-transform: translate(-50%,-50%);