国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css3之圖形繪制

Null / 1274人閱讀

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


由于近期的項目中出現了不規則的邊框和圖形， 所以重新溫習一下CSS3的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關鍵一點是更加有趣！

以下幾個例子主要是運用了css3中border、bordr-radius、transform、偽元素等屬性來完成的，我們先了解下它們的基本原理。

? ? ??border：簡單的來說border語法主要包含（border-width、border-style、border-color）三個屬性。

    • ? border-top（上邊框）：border-width border-style border-color
    • ? border-right（右邊框）：border-width border-style border-color
    • ? border-bottom（下邊框）：border-width border-style border-color
    • ? border-left（左邊框）：border-width border-style border-color

? ? ?border-radius：border-radius 的語法比我們想像中靈活得多。你可能會驚訝地發現 border-radius 原來是一個簡寫屬性。它所對應的各個展開式屬性：

    • ? border-top-left-radius（左上圓角半徑）
    • ? border-top-right-radius?（右上圓角半徑）
    • ? border-bottom-right-radius?（右下圓角半徑）
    • ? border-bottom-left-radius（左下圓角半徑）

? ? ?border-image：共有三個屬性，分別是圖片（border-image-source）、剪裁位置（border-image-slice）、重復性（border-image-repeat）。

? ? ? 圖片：使用URL調用

? ? ? 剪裁位置：共有1~4個參數，沒有單位（默認是像素），也可以用百分比

    • 第一個參數a：距離上邊相應長度進行裁剪
    • 第二個參數b：距離右邊相應長度進行裁剪
    • 第三個參數c：距離下邊相應長度進行裁剪
    • 第四個參數d：距離左邊相應長度進行裁剪

? ? ? 重復性：有三個參數 stretch（默認值），round，repeat

    • 默認值是stretch，拉伸的意思，可以看到上面的效果圖中，“2”是垂直拉伸的，“>”是水平拉伸的，而中間的格子是水平垂直一起拉伸的。
    • round是平鋪
    • repeat是重復

?

話不多說，來直接看下效果：

1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角）

? ? 主要用到的是：寬度高度設置為0， border的各個邊的設置（各個邊的透明或不透明）；

 .triangle-up {
			/* 三角形 */
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
    		        border-right: 50px solid transparent;
        	        border-bottom: 100px solid #f00;
		}
		.triangle-down {
			/* 倒三角 */
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
    		        border-right: 50px solid transparent;
        	        border-top: 100px solid #f00;
		}
		.triangle-left {
			/* 左三角 */
			width: 0;
			height: 0;
			border-top: 50px solid transparent;
    		        border-bottom: 50px solid transparent;
        	        border-right: 100px solid #f00;
		}
		.triangle-right {
			/* 右三角 */
			width: 0;
			height: 0;
			border-top: 50px solid transparent;
    		        border-bottom: 50px solid transparent;
        	        border-left: 100px solid #f00;
		}
		.triangle-topleft {
			/* 左上三角 */
			width: 0;
			height: 0;
    		        border-right: 100px solid transparent;
        	        border-top: 100px solid #f00;
		}
		.triangle-topright {
			/* 右上三角 */
			width: 0;
			height: 0;
			border-left: 100px solid transparent;
        	        border-top: 100px solid #f00;
		}
		.triangle-downleft {
			/* 左下三角 */
			width: 0;
			height: 0;
    		        border-right: 100px solid transparent;
        	        border-bottom: 100px solid #f00;
		}
		.triangle-downright {
			/* 右下三角 */
			width: 0;
			height: 0;
			border-left: 100px solid transparent;
        	        border-bottom: 100px solid #f00;
		}

　2、梯形（三角形的變體，設置左右兩條邊相等，并且給它設置一個寬度）

? 

       .Trapezium {
                    height: 0;
                    width: 100px;
                    border-bottom: 100px solid #dc2500;
                    border-left: 50px solid transparent;
                    border-right: 50px solid transparent;
                  }

　　

?

2、愛心（心形的制作是非常復雜的，可以使用偽元素來制作，分別將偽元素旋轉不同的角度，并修改transform-origin屬性來元素的旋轉中心點）

                .love {
			/* 愛心 */
			position: relative;
		}
		.love:before {
			content: "";
			width: 70px;
			height: 110px;
			background: #f00;
			position: absolute;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			transform: rotate(45deg);
		}
		.love:after {
			content: "";
			width: 70px;
			height: 110px;
			background: #f00;
			position: absolute;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			transform: rotate(-45deg);
			left: -30px;
		}

　3、　食人豆（吃豆人的制作方法是先在一個圓形里面制作一個透明的三角形）

                .pacman {
			/* 食人豆 */
			width: 0;
		    ????height: 0;
		    ????border: 60px solid #f00;
		    ????border-right: 60px solid transparent;
		    ????border-radius: 100%;
		}

　　

4、對話框（消息提示框可以先制作一個圓角矩形，然后在需要的地方放置一個三角形）

               .alertDialog {
			/* 對話框：一個圓角矩形和一個小三角形 */
			width: 150px;
			height: 100px;
			background: #f00;
			border-radius: 10px;
			position: relative;
		}
		.alertDialog:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
		    ????left: -20px;
		    ????top: 40px;
			border-top: 10px solid transparent;
		    ????border-bottom: 10px solid transparent;
		    ????border-right: 20px solid #f00;	
		}

　　5、鉆石（首先畫一個直角梯形，再通過偽類元素在其下方畫一個三角形）

               .diamond {
			/* 鉆石：梯形和三角形組成 */
			width: 50px;
			height: 0;
			position: relative;
			border-bottom: 25px solid #f00;
			border-left: 25px solid transparent;
			border-right: 25px solid transparent;
		}
		.diamond:before {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
		    ????border-left: 50px solid transparent;
		    ????border-right: 50px solid transparent;
		    ????border-top: 70px solid #f00;
		    ????left: -25px;
		    ????top: 25px;
		}

　　6、五角星（星形的實現方式比較復雜，主要是使用transform屬性來旋轉不同的邊）

                .starFive {
			/* 五角星： */
			width: 0;
			height: 0;
			position: relative;
			border-left: 80px solid transparent;
			border-right: 80px solid transparent;
			border-bottom: 60px solid #f00;
			transform: rotate(35deg);
		}
		.starFive:before {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-left: 80px solid transparent;
			border-right: 80px solid transparent;
			border-bottom: 60px solid #f00;
			transform: rotate(-70deg);
			top: 3px;
			left: -80px;
		}
		.starFive:after {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-bottom: 60px solid #f00;
			border-right: 20px solid transparent;
			border-left: 20px solid transparent;
			transform: rotate(-35deg);
		    ????top: -40px;
		    ????left: -49px;
		}

　　7、菜單（結合::before和::after兩個偽元素）

? ?

.btn-hamburger i {
    /* position: relative; */
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    width: 22px;
    height: 3px;
    color: #fff;
    font: bold .24rem/0.4 Helvetica;
    text-transform: uppercase;
    text-indent: -55px;
    background: #fff;
    transition: all 0.2s ease-out;
}
.btn-hamburger i::before, .btn-hamburger i::after {
    content: ";
    width: 22px;
    height: 3px;
    background: #fff;
    position: absolute;
    left: 0;
    transition: 0.2s;
}
.btn-hamburger i::before {
    top: -7px;
}
.btn-hamburger i::after {
    bottom: -7px;
}

　

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

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

相關文章

  • CSS3 簡單圖形繪制

    摘要：三角形繪制效果如圖效果如圖效果如圖效果如圖繪制心形效果如圖繪制箭頭效果如圖繪制五角星效果如圖繪制冒泡框提示框效果如圖繪制氣球效果如圖繪制陰陽八卦旋轉效果如圖 三角形繪制 #triangle { width: 0; border-style: solid; border-width: 50px 50px 50px 50px; ...

    zhangwang 評論0 收藏0

  • 前端動畫調研-V1

    摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。 動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...

    ddongjian0000 評論0 收藏0

  • 頁面動畫知識點整理

    摘要：然后在節點上設置了動畫屬性，并將其設為前面定義的動畫，每一次動畫秒，表示無限循環，表示緩動方式，兩個關鍵幀之間的變化是方式逐步變化的。 平時工作中會遇到需要實現一些存在動畫的頁面。這里對動畫的實現知識做一個整理。頁面動畫的實現可以分為兩類：CSS動畫、Canvas動畫、JavaScript動畫。JavaScript動畫沒啥好講的，這里就不整理了。 CSS動畫 CSS3中提供了一個屬性t...

    booster 評論0 收藏0

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

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

    wwolf 評論0 收藏0

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

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

    DirtyMind 評論0 收藏0

發表評論

0條評論

Null

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<