CSS3實現文字折紙效果

番茄西紅柿發布于2019-04-23 13:33 / 2212人閱讀

摘要：實現文字折紙效果效果圖代碼如下，復制即可使用如有錯誤，歡迎聯系我改正，非常感謝

CSS3實現文字折紙效果

效果圖：

代碼如下，復制即可使用：

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">jQueryh1>
    div>
body>
html>

如有錯誤，歡迎聯系我改正，非常感謝！！！

GPU云服務器云服務器文字效果 html文字倒影效果 html文字輸入效果 js 文字遠近效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2028.html

css3文字顏色動態漸變

摘要：是因為動畫的結束后的最后一幀的顏色為，立馬會重新執行動畫，顏色會初始到第一幀，所以會有明顯的變化。的效果就是背景顏色被剪裁到文字上面，只有文字會顯示背景顏色。用數字表達結合以上三個屬性結合動畫，最終實現文字漸變的效果。瀏覽 Animate.css官網的時候發現Animate.css這幾個字母的顏色會慢慢變化，個人覺得還是很有意思，本以為是利用animate 改變color,結果F1...

Cciradih 2019-08-29 13:56 評論0 收藏0
CSS3實現翻轉卡牌效果

摘要：所以給父元素添加至此，就實現了一個翻轉卡牌的效果，但是這里需要解決一個問題，因為屬性不被支持支持，所以需要進行降級，我的做法是直接顯示隱藏。今天在工作中遇到需求，需要用CSS3寫一個卡片翻轉效果，這個效果看起來簡單，但是還是涉及到一些不常用的CSS3中的3D轉換的屬性以及實現該效果的思路，所以這里總結一下。原文鏈接：http://mrzhang123.github.io/2016/...

txgcwm 2019-08-29 11:09 評論0 收藏0
CSS3實現翻轉卡牌效果

摘要：所以給父元素添加至此，就實現了一個翻轉卡牌的效果，但是這里需要解決一個問題，因為屬性不被支持支持，所以需要進行降級，我的做法是直接顯示隱藏。今天在工作中遇到需求，需要用CSS3寫一個卡片翻轉效果，這個效果看起來簡單，但是還是涉及到一些不常用的CSS3中的3D轉換的屬性以及實現該效果的思路，所以這里總結一下。原文鏈接：http://mrzhang123.github.io/2016/...

Pluser 2019-08-01 15:37 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0