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

改变的要素

昨天那个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%);-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;height:0;bottom: -60px;content:"";display: block;border-width: 30px;border-style: solid;border-color:rgba(0, 255, 0, 0.5) rgba(0, 220, 0, 0.5) transparent transparent;background-color: transparent;}.wrapper::after{/*设置折角实现的位置;*/position: absolute;right:0;height:60px;bottom:-60px;background-color: #36b11d;width:440px;content:"";display: block;}/*以下就用到动画这些了..难度稍微复杂些*//*作用于before*/@-webkit-keyframes  emulate{from{border-color:#21b4ff #21b4ff transparent transparent;}to{border-color:#9d0e2f #9d0e2f transparent transparent;}}@keyframes  emulate{from{border-color:#21b4ff #21b4ff transparent transparent;}to{border-color:#9d0e2f #9d0e2f transparent transparent;}}/*作用于after*/@-webkit-keyframes  emulatea{from{background-color:  #07618f ;}to{background-color: #c71840 ;}}@keyframes  emulatea{from{background-color:  #07618f ;}to{background-color: #c71840 ;}}/*作用于包含块*/@-webkit-keyframes wrap{from{border-radius: 10px 10px 0 0;background-color:  #07618f ;}to{border-radius: 100px 100px 0 0;background-color: #c71840 ;}}@keyframes wrap{from{border-radius: 10px 10px 0 0;background-color:  #07618f ;}to{border-radius: 100px 100px 0 0;background-color: #c71840 ;}}.wrapper1{margin:0 auto;width:500px;height:300px;background-color: #36b11d;border-radius: 10px 10px 0 0;font-family: monoca,"微软雅黑",sans-serif;/*父包含块*/position: relative;/*动画*/-webkit-animation: wrap 3s ease-in-out infinite;animation: wrap 3s ease-in-out infinite;}.wrapper1 > 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%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);/*文字增加阴影稍微有立体感一些*/text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);overflow: hidden;}.wrapper1::before{/*设置折角实现的位置;*/position: absolute;left:0;bottom: -60px;content:"";display: block;border-color: #36b11d;border-width: 30px;border-style: solid;background-color: transparent;-webkit-animation: emulate 3s ease-out infinite;animation: emulate 3s ease-out infinite;}.wrapper1::after{/*设置折角实现的位置;*/position: absolute;right:0;height:60px;bottom:-60px;background-color: #36b11d;width:440px;content:"";display: block;-webkit-animation: emulatea 3s ease-out infinite;animation: emulatea 3s ease-out infinite;}</style>
</head>
<body><p class="title">不需要纯色背景的CSS3折角实现</p><div class="wrapper"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><br><p class="title">动画CSS3折角实现</p><div class="wrapper1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</body>
</html>

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

纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
backgroundLinearGradient线性渐变制作折角效果
backgroundLinearGradient线性渐变,制作折角效果语法线性渐变 - 从上到下(默认情况下) background: linear-gradient(direction, col ...
html 怎么让div卷角,css实现简约的纸张卷角效果
英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做 ...
html中切角文本框,css实现切角效果
1. 一个切角思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...
Codrops 教程：基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
css3切角文本框_[CSS揭秘]切角效果
将角切掉也是一种流行的设计风格传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果有了CSS3,我们完全可以使用新技术来实现第一种方案: CSS渐变需求一: 一个矩形需要切 ...
css3切角文本框_CSS3样式linear-gradient的使用（切角效果）
缺角效果先看效果图这是内容 .div1 { width: 100px; height: 40px; line-height: 40px; background:linear-gradient(-1 ...
css3实现折纸效果
效果图实现步骤 1.文字居中且有立体感 /*内容块绝对居中*/position: absolute;top: 50%;left: 50%;-webkit-transform: translate(- ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

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

改变的要素

效果图

代码实现

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

最新文章

热门文章