CSS制作圖形

firim 發布于2019-08-30 15:55 / 1556人閱讀

摘要：氣泡三角形利用的特性實現梯形梯形利用偽類加旋轉透視實現愛心太極圖折角

氣泡三角形


      
        
        利用 border 的 transparent 特性實現
        
          .bubbly

梯形


      梯形
      
        
        利用偽類加旋轉透視實現
        
          .trapezoid

愛心


#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
太極圖


#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}
折角


        
        
        利用切角、偽類、漸變、旋轉實現
        
          .corner
        
      
      
混合模式背景圖


        
        利用漸變實現
        
          .colorful-stripe
        
      
      

多云


        
        利用線性漸變、陰影、縮放實現
        
          .cloudy
        
      
      
陰影實現多云天氣圖案


        多云（cloudy2）（單標簽實現）
        利用線性漸變、陰影、縮放實現
        
          .cloudy2
        
      
      
陰影實現雨天天氣圖案


        雨（rainy）
        利用線性漸變、陰影、縮放實現
        
          .rainy
          
        
      
      
彩虹天氣圖案


        彩虹（rainbow）
        利用border、box-shadow 實現
        
          .rainbow
          
        
      
      
chrome 瀏覽器圖標


        Chrome（單標簽實現）
        利用漸變實現
        
          
        
      
      
IE 瀏覽器圖標


        IE（單標簽實現）
        利用漸變、多重陰影實現
        
          
        
      
      
safari 瀏覽器圖標


        safari（單標簽實現）
        利用漸變、border、旋轉實現

GPU云服務器云服務器云服務器圖形制作 css制作三維圖形生成圖形

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

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

基于單個 Div 的 CSS 繪圖

摘要：原文譯文基于單個的繪圖譯者前端外刊評論譯注通讀本文，強烈地感受到了技術與藝術的結合贊作者的這句話限制你的可選項，會讓你重新評估手頭上已有的工具。不過若能有效地使用，我們的繪圖可以包含很多令人驚嘆的細節。原文： Single Div Drawings with CSS 譯文：基于單個 div 的 CSS 繪圖譯者：前端外刊評論譯注：通讀本文，強烈地感受到了技術與藝...

booster 2019-08-01 14:40 評論0 收藏0
svg系列：1.svg基礎知識 & 不一樣的svg動畫世界

摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...

wwolf 2019-08-02 16:10 評論0 收藏0
svg系列：1.svg基礎知識 & 不一樣的svg動畫世界

摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...

DirtyMind 2019-08-23 16:30 評論0 收藏0
css3之圖形繪制

摘要：由于近期的項目中出現了不規則的邊框和圖形，所以重新溫習一下的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關鍵一點是更加有趣以下幾個例子主要是運用了中偽元素等屬性來完成的，我們先了解下它們的基本原理。由于近期的項目中出現了不規則的邊框和圖形，所以重新溫習一下CSS3的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關鍵一點是更加有趣！以下幾個例子主要是運用了css3中b...

Null 2019-04-23 13:28 評論0 收藏0
使用 GreenSock 來制作 SVG 動畫

摘要：在制作動畫方面也非常強悍，并且還專門提供了用于加強動畫制作的相關插件，比如。一個有趣的的動畫效果就完成了，代碼地址使用配合來制作動畫效果如此簡單。原文地址，根據自己理解整理了下這個教程，主要是來學習下使用來制作動畫效果的思路和方法。這是我的一個關于SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這里來，更多關于SVG技術應用可以去網站看看。最近從Dribbble...

everfly 2019-08-22 10:49 評論0 收藏0