成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS制作圖形

firim / 1610人閱讀

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

氣泡三角形 


      

        
        利用 border 的 transparent 特性實現(xiàn)
        

          
.bubbly
梯形 


      
梯形

      

        
        利用偽類加旋轉(zhuǎn)透視實現(xiàn)
        

          
.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;
}

折角




        

        
        利用切角、偽類、漸變、旋轉(zhuǎn)實現(xiàn)
        

          
.corner

        

      

      

混合模式背景圖




        
        利用漸變實現(xiàn)
        

          
.colorful-stripe

        

      

      


多云




        
        利用線性漸變、陰影、縮放實現(xiàn)
        

          
.cloudy

        

      

      

陰影實現(xiàn)多云天氣圖案




        多云（cloudy2）（單標簽實現(xiàn)）
        利用線性漸變、陰影、縮放實現(xiàn)
        

          
.cloudy2

        

      

      

陰影實現(xiàn)雨天天氣圖案




        雨（rainy）
        利用線性漸變、陰影、縮放實現(xiàn)
        

          
.rainy

          

        

      

      

彩虹天氣圖案




        彩虹（rainbow）
        利用border、box-shadow 實現(xiàn)
        

          
.rainbow

          

        

      

      

chrome 瀏覽器圖標




        Chrome（單標簽實現(xiàn)）
        利用漸變實現(xiàn)
        

          

        

      

      

IE 瀏覽器圖標




        IE（單標簽實現(xiàn)）
        利用漸變、多重陰影實現(xiàn)
        

          

        

      

      

safari 瀏覽器圖標




        safari（單標簽實現(xiàn)）
        利用漸變、border、旋轉(zhuǎn)實現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/117240.html

相關(guān)文章

  • 基于單個 Div 的 CSS 繪圖

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

    booster 評論0 收藏0

  • svg系列：1.svg基礎(chǔ)知識 & 不一樣的svg動畫世界

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

    wwolf 評論0 收藏0

  • svg系列：1.svg基礎(chǔ)知識 & 不一樣的svg動畫世界

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

    DirtyMind 評論0 收藏0

  • css3之圖形繪制

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

    Null 評論0 收藏0

  • 使用 GreenSock 來制作 SVG 動畫

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

    everfly 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<