成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS制作圖形

firim / 1568人閱讀

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

氣泡三角形 


      

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

          
.bubbly
梯形 


      
梯形

      

        
        利用偽類加旋轉(zhuǎn)透視實(shí)現(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)實(shí)現(xiàn)
        

          
.corner

        

      

      

混合模式背景圖




        
        利用漸變實(shí)現(xiàn)
        

          
.colorful-stripe

        

      

      


多云




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

          
.cloudy

        

      

      

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




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

          
.cloudy2

        

      

      

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




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

          
.rainy

          

        

      

      

彩虹天氣圖案




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

          
.rainbow

          

        

      

      

chrome 瀏覽器圖標(biāo)




        Chrome（單標(biāo)簽實(shí)現(xiàn)）
        利用漸變實(shí)現(xiàn)
        

          

        

      

      

IE 瀏覽器圖標(biāo)




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

          

        

      

      

safari 瀏覽器圖標(biāo)




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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117240.html

相關(guān)文章

  • 基于單個(gè) Div 的 CSS 繪圖

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

    booster 評(píng)論0 收藏0

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

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

    wwolf 評(píng)論0 收藏0

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

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

    DirtyMind 評(píng)論0 收藏0

  • css3之圖形繪制

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

    Null 評(píng)論0 收藏0

  • 使用 GreenSock 來制作 SVG 動(dòng)畫

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

    everfly 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<