站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        漸變是css3新增的嗎

        漸變是css3新增的圖片類型,用來代替圖片。CSS3定義了兩種類型的漸變:1、線性漸變,使用“l(fā)inear-gradient()”函數(shù)定義;2、徑向漸變,使用“radial-gradient()”函數(shù)定義。

        漸變是css3新增的嗎

        本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

        作為CSS3新增的屬性,漸變也有著無窮的潛力。

        一、簡介

        ??漸變是CSS3新增的圖片類型,用來代替圖片,它的好處有:

        • 加快頁面的加載速度,減少帶寬的占用;
        • 更加靈活。

        CSS3 定義了兩種類型的漸變(gradients):

        • 線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向

        • 徑向漸變(Radial Gradients)- 由它們的中心定義

        二、線性漸變

        ??其實漸變的使用也挺常見的,例如導(dǎo)航欄:

        background-image: linear-gradient(90deg,#0af,#0085ff)

        ??很顯然,這比純色的背景好看太多了。

        ??當(dāng)然,有時間我們并不需要過渡效果:

            background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

        ??對于線性漸變,除了linear-gradient,還有repeating-linear-gradient:

            $c1: #fff;     $c2: #DF5646;     $c3: #1C78A4;     background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

        ??由此可見,漸變并沒有那么簡單。

        ??這里肯定有人要問,還能玩出什么花樣?首先我們要明白漸變是一種圖片,那么再想想還有什么與圖片一起使用的CSS屬性?

            $color: #122556;     background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),                       linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);     background-size: 30px 30px;

        ??通過這個例子,是不是使用漸變的思路更加開闊了。不過這里還需要注意一點:

        • 當(dāng)你聲明多個漸變時,最先聲明的,離用戶越近。(這里就需要我們考慮遮蓋的問題,一般采用transparent);

        ??同樣,漸變也可以做動畫

            @mixin menuaction($color) {         background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;         &:hover {             background-size: 100% 100%;             color: #fff;         }     }

        三、徑向漸變

        徑向漸變由它的中心定義。

        為了創(chuàng)建一個徑向漸變,你也必須至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時,你也可以指定漸變的中心、形狀(圓形或橢圓形)、大小。默認情況下,漸變的中心是 center(表示在中心點),漸變的形狀是 ellipse(表示橢圓形),漸變的大小是 farthest-corner(表示到最遠的角落)。

        語法

        background-image: radial-gradient(shape size at position, start-color, ..., last-color);
        描述
        shape 確定圓的類型:

        • ellipse (默認): 指定橢圓形的徑向漸變。
        • circle :指定圓形的徑向漸變
        size 定義漸變的大小,可能值:

        • farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
        • closest-side :指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
        • closest-corner : 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
        • farthest-side :指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
        position 定義漸變的位置。可能值:

        • center(默認):設(shè)置中間為徑向漸變圓心的縱坐標(biāo)值。
        • top:設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值。
        • bottom:設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值。
        start-color, …, last-color 用于指定漸變的起止顏色。

        示例:

        <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <style> #grad1 {     height: 150px;     width: 200px;     background-color: red; /* 瀏覽器不支持的時候顯示 */     background-image: radial-gradient(red, yellow, green); /* 標(biāo)準(zhǔn)的語法(必須放在最后) */ }  #grad2 {     height: 150px;     width: 200px;     background-color: red; /* 瀏覽器不支持的時候顯示 */     background-image: radial-gradient(circle, red, yellow, green); /* 標(biāo)準(zhǔn)的語法(必須放在最后) */ } </style> </head> <body>  <h3>徑向漸變 - 形狀</h3>  <p><strong>橢圓形 Ellipse(默認):</strong></p> <div id="grad1"></div>  <p><strong>圓形 Circle:</strong></p> <div id="grad2"></div>  <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>  </body> </html>

        漸變是css3新增的嗎

        四、總結(jié)

        ??最后以什么結(jié)束呢,哈哈最近各種優(yōu)惠券,那我們用漸變的知識來搞張優(yōu)惠券吧:

        <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<style> 			div { 				width: 300px; 				height: 120px; 				background: radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat, 					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat, 					linear-gradient(90deg, transparent 10px, rgb(247, 245, 201) 10px); 				background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%; 				background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center; 			} 		</style> 	</head> 	<body> 		<div></div> 	</body> </html>

        漸變是css3新增的嗎

        (學(xué)習(xí)視頻分享:css視頻教程)

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 无码国产乱人伦偷精品视频| 国产精品视频白浆免费视频| 久久成人国产精品| 国产精品久操视频| 国产成人精品视频在放| 亚洲av无码乱码国产精品 | 精品亚洲一区二区三区在线播放 | 久久久精品日本一区二区三区| 久久亚洲国产精品一区二区| 久久国产精品无码一区二区三区| 亚洲AV成人精品日韩一区18p| 精品国产呦系列在线观看免费| 亚洲精品免费观看| 91视频国产精品| 国产精品亚韩精品无码a在线| 亚洲国产另类久久久精品黑人| 四库影院永久四虎精品国产| 久久99精品久久久久久不卡| 国产色婷婷精品综合在线| 成人午夜精品亚洲日韩| 老司机91精品网站在线观看| 国产精品久久永久免费| 91探花福利精品国产自产在线| 精品无码国产污污污免费网站 | 桃花岛精品亚洲国产成人| 国产2021精品视频免费播放| 2022国内精品免费福利视频| 激情亚洲一区国产精品| 日本VA欧美VA精品发布| 亚洲AV午夜福利精品一区二区| 亚洲精品无码乱码成人| 中文字幕一精品亚洲无线一区| 综合国产精品第一页| 一级A毛片免费观看久久精品| 欧美精品整片300页| 香港aa三级久久三级老师2021国产三级精品三级在 | 国产精品高清一区二区三区 | 少妇人妻偷人精品无码视频新浪| 亚洲精品无码mv在线观看网站| 欧美精品VIDEOSSEX少妇| 久久精品www人人爽人人|