利用CSS3實(shí)現(xiàn)文字折紙效果實(shí)例代碼
發(fā)布時(shí)間：2018-07-10 17:18:08 作者：Foryourfuture 
我要評論
我要評論這篇文章主要給大家介紹了關(guān)于利用CSS3實(shí)現(xiàn)文字折紙效果的相關(guān)資料，文中給出了完整的示例代碼，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
本文主要跟大家分享了一個(gè)利用CSS3實(shí)現(xiàn)文字折紙效果的實(shí)例，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧
效果圖：
示例代碼：
代碼如下，復(fù)制即可使用：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html {
height: 100%;
}
body {
background: -webkit-linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%);
background: linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%);
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper {
width: 100%;
font-family: 'Source Code Pro', monospace;
margin: 0 auto;
height: 100%;
}
.wrapper h1 {
text-transform: uppercase;
-webkit-transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
font-size: 20vw;
top: 50%;
left: 50%;
margin: 0;
position: absolute;
text-rendering: optimizeLegibility;
font-weight: 900;
color: rgba(255, 158, 177, 0.5);
text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
}
.wrapper h1:before {
content: attr(data-heading);
position: absolute;
left: 0;
top: -4.8%;
overflow: hidden;
width: 100%;
height: 50%;
color: #fbf7f4;
-webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
z-index: 2;
text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.2);
}
.wrapper h1:after {
content: attr(data-heading);
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 1;
color: #d3cfcc;
-webkit-transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="wrapper">
<h1 data-heading="jQuery">jQuery</h1>
</div>
</body>
</html>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
純CSS3實(shí)現(xiàn)的3D折疊翻轉(zhuǎn)文字動(dòng)畫特效源碼
CSS3 3D折疊翻轉(zhuǎn)文字動(dòng)畫 14 人瀏覽暫無評論 0今天我們再來分享一款CSS3文字特效應(yīng)用，和之前分享的這款HTML5/CSS3文字特效類似，它也是一款CSS3 3D折疊翻轉(zhuǎn)文字動(dòng)畫2014-12-29
純CSS3實(shí)現(xiàn)使用立方體幾何模型構(gòu)建3D文字動(dòng)畫效果源碼
這是一款基于純CSS3使用立方體幾何模型構(gòu)建3D文字動(dòng)畫效果源碼。通過css3繪制圖形陰影構(gòu)成帶有3D立體視覺效果的幾何圖形文字旋轉(zhuǎn)顯示動(dòng)畫特效，畫面上的文字“HELLO”的各2018-06-23
這篇文章主要介紹了CSS3下的漸變文字效果實(shí)現(xiàn)示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-02
css3實(shí)現(xiàn)文字掃光漸變動(dòng)畫效果的示例
這篇文章主要介紹了css3實(shí)現(xiàn)文字掃光漸變動(dòng)畫效果的示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-07
18種CSS3炫酷文字動(dòng)畫效果庫Mimic.css
Mimic.css是一款CSS3動(dòng)畫效果庫，利用css3屬性制作18種酷炫的文字動(dòng)畫特效，和animate.css一樣使用簡單，歡迎下載2017-09-30![](//img.jbzj.com"images/1_lit.jpg)
CSS3動(dòng)畫之流彩文字效果+圖片模糊效果+邊框伸展效果實(shí)現(xiàn)代碼合集
這篇文章主要介紹了CSS3動(dòng)畫中流彩文字效果+圖片模糊效果+邊框伸展效果實(shí)現(xiàn)，blur濾鏡實(shí)現(xiàn)和SVG濾鏡實(shí)現(xiàn)以及SVG作為背景圖片載入等操作步驟實(shí)現(xiàn)功能，具體操作步驟大家可查2017-08-18
CSS3鼠標(biāo)hover圖片遮罩層文字動(dòng)畫特效
這是一款使用CSS3制作鼠標(biāo)hover圖片遮罩層動(dòng)畫特效，在鼠標(biāo)hover圖片時(shí)，會(huì)生成一個(gè)不同顏色的遮罩層，并顯示文字2017-06-27利用純CSS3實(shí)現(xiàn)文字向右循環(huán)閃過效果實(shí)例（可用于移動(dòng)端）
這篇文章主要跟大家分享了利用純CSS3實(shí)現(xiàn)文字向右循環(huán)閃過效果的相關(guān)資料，因?yàn)榧嫒菪缘膯栴}，常被用于移動(dòng)端，實(shí)現(xiàn)的效果非常不錯(cuò)，文中給出了詳細(xì)的介紹和示例代碼，需要2017-06-15- 最近在做項(xiàng)目的時(shí)候，發(fā)現(xiàn)文字下方有個(gè)波浪線，尋思著，能不能用css來實(shí)現(xiàn)，減少資源，遂參考一些資料，后來真的實(shí)現(xiàn)了。所以就有了這篇文章了，本文詳細(xì)的介紹了利用CSS32016-11-20
CSS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-25
![](http://img.jbzj.com"images/1_lit.jpg)
