CSS3實現(xiàn)各種圖形的示例代碼
發(fā)布時間：2016-10-19 16:26:12 作者：佚名 
我要評論
我要評論這篇文章跟大家分享了利用CSS3實現(xiàn)各種的圖形，例如自適應(yīng)的橢圓、運動的橢圓、半橢圓、平行四邊形以及切角矩形等等，想學(xué)習(xí)更多的圖形實現(xiàn)方法，那么下面來一起看看這篇文章吧。
1、自適應(yīng)的橢圓
復(fù)制代碼
代碼如下:<div class="div1"> 鼠標(biāo)劃上來看看</div>
<style>
.div1{ background:#fb3; width:200px; height:200px; line-height:200px;
text-align: center; border-radius: 50%; transition: all 0.25s ease-in;
}
.div1:hover{ background: #ff1d50; width:400px; height:200px; border-radius: 50%;
-webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
/* -> 首先你得知道，border-radius不僅僅支持整數(shù)，還支持百分比 */
</style></p> <p>
運動的橢圓
2、半橢圓
復(fù)制代碼
代碼如下:<div class="div2"></div>
<div class="div3"></div>
<style>
.div2{ background:#fb3; width:100px; height:100px; border-radius: 100% 0 0 0; transition: all 0.25s ease-in; }
.div3{ background:#fb3; width:100px; height:100px; border-radius: 0 0 0 100%; transition: all 0.25s ease-in; }
/* -> 首先你得知道，border-radius不僅僅支持整數(shù)，還支持百分比 */
</style>
本來一個div就可以，不過我用了兩個四十五度的，自己玩。
半橢圓
3、平行四邊形
復(fù)制代碼
代碼如下:<div class="div4">首先</div>
<style>
.div4{ position:relative; width:100px; height:100px; line-height:100px; text-align: center; color: #fff; }
.div4::before { content: ''; /* 用偽元素來生成一個矩形*/
position:absolute; top:0; right:0; bottom:0; left:0; z-index: -1;
background:#58a; transform:skew(15deg); }
</style>
平行四邊形
4、平行四邊形
復(fù)制代碼
代碼如下:<div class="div5">
<img src="../w658.jpg"/>
</div>
<style>
.div5{
width:100px;
height: 100px;
transform:rotate(45deg);
overflow:hidden; }
.div5 >img {
max-width:100%;
transform: rotate(-45deg)scale(1.42);
}
</style>
平行四邊形
5、切角矩形
復(fù)制代碼
代碼如下:<div class="div6"></div>
<style>
.div6{
width:200px;
height:100px;
background:#58a;
background:
linear-gradient(-45deg,transparent 15px, #58a 0) right,
linear-gradient(45deg,transparent 15px, #655 0) left;
background-size:50% 100%;
background-repeat: no-repeat;
}
</style>
切角矩形
6、凹角矩形
復(fù)制代碼
代碼如下:<div class="div7"></div>
<style>
.div7{
width:240px;
height:50px;
background:#58a;
background:
radial-gradient(circle at top left,
transparent 8px,#58a 0)top left,
radial-gradient(circle at top right,
transparent 8px,#58a 0)top right,
radial-gradient(circle at bottom right,
transparent 8px, #58a 0)bottom right,
radial-gradient(circle at bottom left,
transparent 8px,#58a 0)bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
}
</style>
凹角矩形
7、切角矩形(SVG)
復(fù)制代碼
代碼如下:<div class="div8"></div>
<style>
.div8{
width:240px;
height:50px;
background:#58a;
border:15px solid #58a;/* 當(dāng)切角存在時，則顯示切角，不支持時，則顯示邊框 */
border-image:1 url('data:image/svg+xml,<svg xmlns="<a width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>');
background-clip:padding-box; }
</style>
切角矩形
8、梯形
復(fù)制代碼
代碼如下:<div class="div9"></div>
<style>
.div9{
width:240px;
height:40px;
position:relative;
color: white;
}
.div9:before{
content: ''; /* 用偽元素來生成一個矩形*/
position:absolute;
top: 0;
right:0;
bottom:0;
left:0;
z-index:-1;
background:#58a;
transform:perspective(.5em)rotateX(5deg);
}
</style>
梯形
9、梯形
復(fù)制代碼
代碼如下:<div class="div10"></div>
<div class="div10"></div>
<div class="div10"></div>
<div class="div10"></div>
<style>
.div10{
float:left;
width:60px;
height:40px;
position:relative;
padding:.3em 1em 0;
}
.div10:before{
content: '';
position: absolute;
width:110px;
top:0;right:0;
bottom:0;
left:0;
z-index:-1;
background:#ccc;
background-image:linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border:1px solid rgba(0,0,0,.4);
border-bottom:none;
border-radius:.5em .5em 0 0;
box-shadow:0 .15em white inset;
transform:perspective(.5em)rotateX(5deg);
transform-origin:bottom;
}
</style>
梯形
10、梯形
復(fù)制代碼
代碼如下:<div class="div11"></div>
<div class="div11"></div>
<div class="div11"></div>
<div class="div11"></div>
<style> .div11{
float:left;
width:60px;
height:40px;
position:relative;
padding:.3em 1em 0;
}
.div11:before{
content: '';
position: absolute;
width:110px;
top:0;right:0;
bottom:0;left:0;
z-index:-1;
background:#ccc;
background-image:linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border:1px solid rgba(0,0,0,.4);
border-bottom:none;
border-radius:.5em .5em 0 0;
box-shadow:0 .15em white inset;
transform:perspective(.5em) rotateX(4deg);
transform-origin:bottom left;
}
</style>
梯形
11、div餅圖
復(fù)制代碼
代碼如下:<div class="div12">
<div></div>
<div><div></div></div>
<div></div> <div></div>
</div>
<style>
.div12{
float:left;
width:100px;
height:100px;
border-radius: 50%;
background: #655;
overflow:hidden; position:relative;
}
.div12:after{
content:'';
display:table;
clear:both;
position:absolute;
top:0;bottom:0;left:0;right:0;
}
.div12 div{
position:absolute;
float:left;
width:100px;
height:100px;
border-radius: 50%;
}
.div12>div:first-child{
background-image:
linear-gradient(to right,transparent 50%, rgba(198, 179, 129, 0.94) 0); }
.div12>div:first-child:before{
content: '';
display:block;
margin-left:50%;
height:100%;
border-radius:0 100% 100% 0 /50%;
background-color:#655;
transform-origin:left;
transform: rotate(50deg);
}
.div12>div:nth-child(2){
background-image:
linear-gradient(140deg,transparent 50%, rgba(35, 198, 41, 0.94) 0);
}
.div12>div:nth-child(2):before{
content: '';
display:block;
margin-left:50%;
height:100%;
border-radius:0 100% 100% 0 /50%;
background-color:#655;
transform-origin:left;
transform: rotate(145deg);
}
</style>
餅圖
12、餅圖
復(fù)制代碼
代碼如下:<svg width="100" height="100">
<circle r="25" cx="50" cy="50" />
</svg>
<style>
@keyframes fillup { to { stroke-dasharray: 100 100; } }
circle {
fill:yellowgreen;
stroke:#655;
stroke-width: 50;
stroke-dasharray:38 100; /* 可得到比率為38%的扇區(qū)*/
}
svg{
width:100px;height:100px;
transform:rotate(-90deg);
background:yellowgreen;
border-radius:50%;
}
</style>
餅圖
13、js繪制餅圖
復(fù)制代碼
代碼如下:<div class="pie1">20%</div>
<div class="pie2">60%</div>
<script>
function $$(selector,context) {
context =context || document;
var elements =context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
$$('.pie1').forEach(function(pie) {
var p = parseFloat(pie.textContent);
var NS = "<a ;
var svg = document.createElementNS(NS, "svg");
var circle =document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");</p> <p> circle.setAttribute("r", 25); circle.setAttribute("cx",16);
circle.setAttribute("cy",16); circle.setAttribute("stroke-dasharray",p + 100);
console.log(p + 100);
svg.setAttribute("viewBox", "0 0 32 32");
title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg); });
</script>
<style>
@keyframes fillup { to { stroke-dasharray: 100 100; } }
.pie1 circle {
fill:yellowgreen;
stroke:#655;
stroke-width: 50;
stroke-dasharray:70 160; /* 可得到比率為38%的扇區(qū)*/
}
.pie1 svg{
width:100px;height:100px;
transform:rotate(-90deg);
background:yellowgreen;
border-radius:50%;
}
</style>
js繪制餅圖
備注：這里的大多數(shù)例子，都是從LEA VEROU的《css揭秘》這本書上借鑒來的，感興趣的童鞋不如去買這本書，簡直是CSS神書，就和Js的蝴蝶一樣，前端必備。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Css3能有所幫助，如果有疑問大家可以留言交流。
相關(guān)文章
- 這篇文章主要介紹了CSS3 畫基本圖形，圓形、橢圓形、三角形等的相關(guān)資料,需要的朋友可以參考下2016-09-20
- 這篇文章通過實例代碼向大家演示了在Css3中如何繪制各種大家所需要的幾何圖形，對大家日常使用還是很有幫助，有需要的可以參考學(xué)習(xí)。2016-08-17
純CSS3繪制各種不規(guī)則圖形圖標(biāo)樣式特效源碼
純CSS3繪制各種不規(guī)則圖形圖標(biāo)樣式特效源碼是一款無需任何圖片即可實現(xiàn)逼真的圖形圖標(biāo)特效，本段代碼適應(yīng)于所有網(wǎng)頁使用，有需要的朋友可以直接下載使用2016-07-14CSS3的常見transformation圖形變化用法小結(jié)
這篇文章主要介紹了CSS3的常見transformation圖形變化用法小結(jié),共整理了旋轉(zhuǎn)、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下2016-05-13
這是一款基于純CSS3繪制可旋轉(zhuǎn)的太極圖形樣式效果源碼?？蓪崿F(xiàn)太極圖形的順時針動態(tài)旋轉(zhuǎn)效果。該源碼沒有引入任何外部圖形元素，采用純css3技術(shù)實現(xiàn)2016-05-12- 這篇文章主要介紹了CSS3繪制不規(guī)則圖形的一些方法示例,包括polygon()的使用等很多實用技巧,需要的朋友可以參考下2015-11-07
一款純css3樣式屬性制作各種圖形圖標(biāo)樣式代碼2014-05-16css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例
這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下2014-04-08
基于jquery+css3實現(xiàn)的Tabs帶圖形按鈕選項卡切換
一款基于jquery+css3實現(xiàn)的tab選項卡切換特效代碼2013-11-22- css3.0 的出現(xiàn)給我們帶來了很大的影響，本文主要知識點 transform屬性/animate的應(yīng)用，感興趣的朋友可以參考并學(xué)習(xí)下實例，希望對你學(xué)習(xí)圖形構(gòu)成有所幫助2013-03-19
