好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

纯CSS实现各种图形效果分享

CSS可以实现任意的图形,特别是CSS3的圆角、旋转、倾斜等效果出现之后,CSS2要想出现斜线,可利用border的特性,利用相邻的边框不同颜色出现斜线的特点,自己体会吧^_^

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>迷津渡口-纯CSS实现各种图形效果分享</title>
<style>
#header { width: 800px; margin: 40px auto 20px; }
h1 { position: relative; width: 50%; padding: 10px 20px; border-radius: 0 0 2px 2px; margin: 0 auto; font-size: 20px; font-weight: normal; color: #FFF; background-color: #206020; text-align: center; text-transform: uppercase; }
h1:before,
h1:after { content: ''; position: absolute; display: block; top: -6px; border: 18px solid #103010; }
h1:before { left: -35px; border-right-width: 18px; border-left-color: transparent; }
h1:after { right: -35px; border-left-width: 18px; border-right-color: transparent; }
h1 span:before,
h1 span:after { content: ''; position: absolute; display: block; border-style: solid; border-color: #083808 transparent transparent transparent; top: -6px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
h1 span:before { left: 0; border-width: 6px 0 0 6px; }
h1 span:after { right: 0; border-width: 6px 6px 0 0; }
#container { width: 800px; margin: 30px auto; background-color: #eee; }
div { margin: 20px auto; text-align: center; }

/*实心前景和背景*/
.solid { color: #FFF; background-color: green; }

/*空心前景和背景*/
.hollow { color: green; background-color: #FFF; border: 4px solid green; }

/*长方形*/
.rectangle { width: 200px; height: 100px; line-height: 100px; }

/*椭圆长方形*/
.rectangleellipse { position: relative; width: 200px; height: 100px; line-height: 100px; border-radius: 10%/50%; }

/*正方形*/
.square { width: 200px; height: 200px; line-height: 200px; }

/*圆形*/
.circle { width: 200px; height: 200px; line-height: 200px; border-radius: 50%; }

/*实心半圆*/
.halfcirclesolid { width: 200px; height: 100px; line-height: 100px; border-radius: 100px 100px 0 0; color: #FFF; background-color: green; }

/*空心半圆形*/
.halfcirclehollow { width: 200px; height: 100px; line-height: 100px; border: 2px solid green; border-radius: 100px 100px 0 0; color: green; }

/*斜半圆形*/
.italichalfcirclehollow { width: 200px; height: 200px; line-height: 200px; border-width: 2px; border-style: solid; border-color: green transparent transparent green; border-radius: 100px; color: green; }

/*圆锥*/
.cone { width: 0; height: 0; padding: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 100px solid green; border-radius: 50%; }

/*弯月亮*/
.moon { width: 200px; height: 200px; padding: 0; border-radius: 50%; box-shadow: 30px 30px 0 0 green; margin-bottom: 30px; }

/*椭圆*/
.ellipse { width: 200px; height: 100px; line-height: 100px; border-radius: 50%/50%; }

/*三角形*/
.triangle { width: 0; height: 0; padding: 0; font-size: 0; line-height: 0; }

/*四色正方形*/
.colorful { border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }

/*实心上直角三角形*/
.rgtsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; }

/*实心右直角三角形*/
.rgtsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; }

/*实心下直角三角形*/
.rgtsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid green; }

/*实心左直角三角形*/
.rgtsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 100px solid green; }

/*实心左上直角三角形*/
.rgtsolidlefttop { border-top: 100px solid green; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; }

/*实心右上直角三角形*/
.rgtsolidrighttop { border-top: 100px solid green; border-right: 100px solid green; border-bottom: 100px solid transparent; border-left: 100px solid transparent; }

/*实心右下直角三角形*/
.rgtsolidrightbottom { border-top: 100px solid transparent; border-right: 100px solid green; border-bottom: 100px solid green; border-left: 100px solid transparent; }

/*实心左下直角三角形*/
.rgtsolidleftbottom { border-top: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; border-left: 100px solid green; }

/*上等边三角形*/
.eqsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 173px solid green; }

/*右等边三角形*/
.eqsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 173px solid green; }

/*下等边三角形*/
.eqsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 173px solid green; }

/*左等边三角形*/
.eqsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 173px solid green; }

/*平行四边形*/
.parallelogram { position: relative; width: 240px; height: 120px; padding: 0; }
.parallelogram::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; }
.parallelogram::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: green transparent transparent green; }

/*平行四边形组成的进度条*/
.progressbar { width: 100%; height: 18px; border: 2px solid green; text-align: left; overflow: hidden; }
.progressbar .parallelogram { display: inline-block; width: 40px; height: 20px; padding: 0; margin: 0; }
.progressbar .parallelogram::before,
.progressbar .parallelogram::after { border-width: 10px; }
.progressbar .parallelogram { right: 100%; -webkit-transition: right 4s linear; -moz-transition: right 4s linear; -ms-transition: right 4s linear; -o-transition: right 4s linear; transition: right 4s linear; }
.progressbar:hover .parallelogram { right: 0; }

/*梯形*/
.trapezoid { width: 120px; height: 0; padding: 0; border-top: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; }

/*五边形*/
.pentagon { position: relative; width: 100px; border-width: 95px 31px 0; border-style: solid; border-color: green transparent; margin-top: 100px; }
.pentagon::before { content: ''; position: absolute; top: -152px; left: -31px; width: 0; height: 0; border-width: 0 81px 59px; border-style: solid; border-color: transparent transparent green; }

/*六边形*/
.hexagon { position: relative; width: 208px; height: 120px; line-height: 120px; margin-top: 120px; color: #FFF; background-color: green; }
.hexagon::before { content: ''; position: absolute; top: -60px; left: 0; width: 0; height: 0; border-width: 0 104px 60px; border-style: solid; border-color: transparent transparent green; }
.hexagon::after { content: ''; position: absolute; bottom: -60px; left: 0; width: 0; height: 0; border-width: 60px 104px 0; border-style: solid; border-color: green transparent transparent; }

/*八边形*/
.octagon { position: relative; width: 241px; height: 100px; line-height: 100px; margin: 200px auto; color: #FFF; background-color: green; }
.octagon::before { content: ''; position: absolute; top: -70px; left: 0; width: 100px; height: 0; border-width: 0 71px 71px; border-style: solid; border-color: transparent transparent green; }
.octagon::after { content: ''; position: absolute; bottom: -70px; left: 0; width: 100px; height: 0; border-width: 71px 71px 0; border-style: solid; border-color: green transparent transparent; }

/*耳朵*/
.angletwo { position: relative; display: inline-block; width: 240px; height: 120px; }
.angletwo::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent transparent green green; }
.angletwo::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; }
.anglefour { position: relative; width: 360px; height: 360px; padding: 0; }

/*飞镖*/
.fourtop { position: absolute; left: 120px; top: 0; display: block; width: 0; height: 0; padding: 0; border-right: 60px solid transparent; border-bottom: 120px solid green; border-left: 60px solid transparent; }
.fourright { position: absolute; right: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 120px solid green; }
.fourbottom { position: absolute; left: 120px; top: 240px; display: block; width: 0; height: 0; padding: 0; border-top: 120px solid green; border-right: 60px solid transparent; border-left: 60px solid transparent; }
.fourleft { position: absolute; left: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-right: 120px solid green; border-bottom: 60px solid transparent; }
.fourmiddle { position: absolute; left: 120px; top: 120px; display: block; width: 120px; height: 120px; background-color: green; }

/*钻石*/
.diamond { position: relative; width: 120px; height: 0; border-style: solid; border-color: transparent transparent green transparent; border-width: 0 60px 60px 60px; margin-bottom: 300px; color: #FFF; }
.diamond::after { content: ''; position: absolute; top: 60px; left: -60px; width: 0; height: 0; border-width: 200px 120px 0; border-style: solid; border-color: green transparent transparent; }

/*心形*/
.heart { position: relative; width: 200px; height: 180px; padding: 0; }
.heart::before { content: ''; position: absolute; width: 100px; height: 160px; left: 100px; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; tansform-origin: 0 100%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.heart::after { content: ''; position: absolute; width: 100px; height: 160px; left: 0; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*向右下弯尾箭头*/
.curvearrowrightbottom { position: relative; width: 0; height: 0; border-top: 100px solid transparent; border-right: 100px solid green; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
.curvearrowrightbottom::after { content: ""; position: absolute; top: -120px; left: -90px; width: 120px; height: 120px; border-top: 30px solid green; border-radius: 120px 0 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*向左上弯尾箭头*/
.curvearrowlefttop { position: relative; width: 0; height: 0; border-bottom: 100px solid transparent; border-left: 100px solid green; -webkit-transform: rotate(-10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
.curvearrowlefttop::after { content: ""; position: absolute; top: -30px; right: -90px; width: 120px; height: 120px; border-bottom: 30px solid green; border-radius: 0 0 120px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*蝴蝶结*/
.bow { position: relative; width: 240px; height: 120px; }
.bow::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid green; border-radius: 60px 60px 0 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.bow::after { content: ''; position: absolute; top: 0; left: 120px; width: 60px; height: 60px; border: 20px solid green; border-radius: 0 60px 60px 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

/*气球*/
.balloon { position: relative; width: 60px; height: 120px; }
.balloon::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-radius: 60px 60px 60px 0; background-color: green; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.balloon::after { content: ''; position: absolute; top: 70px; left: 30px; width: 1px; height: 60px; background-color: green; }

/*鸡蛋*/
.egg { width: 160px; height: 260px; padding: 0; background-color: green; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; }

/*吃货*/
.foodie { width: 0; height: 0; padding: 0; border-width: 60px; border-style: solid; border-color: green transparent green green; border-radius: 60px; }

/*太极*/
.taiji { position: relative; width: 192px; height: 96px; padding: 0; border-color: green; border-style: solid; border-width: 4px 4px 100px 4px; border-radius: 100%; background-color: #fff; }
.taiji::before,
.taiji::after { content: ''; position: absolute; width: 24px; height: 24px; top: 50%; border-radius: 100%; }
.taiji::before { left: 0; border: 36px solid green; background-color: #fff; }
.taiji::after { left: 50%; border: 36px solid #fff; background-color: green; }

/*五角星*/
.starfive { position: relative; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; margin: 200px auto 100px; -moz-transfrom: rotate(36deg); -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
.starfive::before { position: absolute; left: -210px; top: 8px; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(-72deg); -webkit-transform: rotate(-72deg); -ms-transform: rotate(-72deg); -o-transform: rotate(-72deg); transform: rotate(-72deg); }
.starfive::after { position: absolute; left: -196px; top: 0; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(72deg); -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }

/*六角星*/
.starsix { position: relative; width: 0; height: 0; margin: 100px auto; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; }
.starsix::after { content: ''; position: absolute; top: 60px; left: -100px; width: 0; height: 0; border-top: 200px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; }

/*八角星*/
.stareight { position: relative; width: 200px; height: 200px; line-height: 200px; margin: 50px auto; color: #FFF; background-color: green; }
.stareight::before { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: green; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*十二角星*/
.startwelve { position: relative; width: 200px; height: 200px; margin: 50px auto; background-color: green; }
.startwelve::before,
.startwelve::after { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; top: 0; left: 0; background-color: green; }
.startwelve::before { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.startwelve::after { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }

/*对话气泡框*/
.talkbubble { position: relative; width: 160px; height: 80px; padding: 20px; border-radius: 10px; color: #FFF; background-color: green; text-align: left; }
.talkbubble::before { content: ''; position: absolute; right: 100%; top: 40px; width: 0; height: 0; border-top: 15px solid transparent; border-right: 30px solid green; border-bottom: 15px solid transparent; }
    </style>
</head>

<body>
    <header id="header"><h1><span>迷津渡口-纯CSS图形分享</span></h1></header>
    <div id="container">
        <!-- 实心长方形 -->
        <div class="rectangle solid">实心长方形</div>
        <!-- 长方形 -->
        <div class="rectangle hollow">长方形</div>
        <!-- 实心椭圆长方形 -->
        <div class="rectangleellipse solid">实心椭圆长方形</div>
        <!-- 椭圆长方形 -->
        <div class="rectangleellipse hollow">椭圆长方形</div>
        <!-- 实心正方形 -->
        <div class="square solid">实心正方形</div>
        <!-- 正方形 -->
        <div class="square hollow">正方形</div>
        <!-- 实心圆 -->
        <div class="circle solid">实心圆</div>
        <!-- 圆形 -->
        <div class="circle hollow">圆形</div>
        <!-- 半实心圆 -->
        <div class="halfcirclesolid">半实心圆</div>
        <!-- 半圆形 -->
        <div class="halfcirclehollow">半圆形</div>
        <!-- 斜半圆形 -->
        <div class="italichalfcirclehollow">斜半圆形</div>
        <!-- 圆锥 -->
        <div class="cone"></div>
        <p>圆锥</p>
        <!-- 弯月亮 -->
        <div class="moon"></div>
        <p>弯月亮</p>
        <!-- 实心椭圆 -->
        <div class="ellipse solid">实心椭圆</div>
        <!-- 椭圆 -->
        <div class="ellipse hollow">椭圆</div>
        <!-- 四色正方形 -->
        <div class="triangle colorful"></div>
        <p>四色正方形</p>
        <!-- 实心上直角三角形 -->
        <div class="triangle rgtsolidtop"></div>
        <p>实心上直角三角形</p>
        <!-- 实心右直角三角形 -->
        <div class="triangle rgtsolidright"></div>
        <p>实心右直角三角形</p>
        <!-- 实心下直角三角形 -->
        <div class="triangle rgtsolidbottom"></div>
        <p>实心下直角三角形</p>
        <!-- 实心左边直角三角形 -->
        <div class="triangle rgtsolidleft"></div>
        <p>实心左直角三角形</p>
        <!-- 实心左上直角三角形 -->
        <div class="triangle rgtsolidlefttop"></div>
        <p>实心左上直角三角形</p>
        <!-- 实心右上直角三角形 -->
        <div class="triangle rgtsolidrighttop"></div>
        <p>实心右上直角三角形</p>
        <!-- 实心右下直角三角形 -->
        <div class="triangle rgtsolidrightbottom"></div>
        <p>实心右下直角三角形</p>
        <!-- 实心左下直角三角形 -->
        <div class="triangle rgtsolidleftbottom"></div>
        <p>实心左下直角三角形</p>
        <!-- 实心上等边三角形 -->
        <div class="triangle eqsolidtop"></div>
        <p>实心上等边三角形</p>
        <!-- 实心右等边三角形 -->
        <div class="triangle eqsolidright"></div>
        <p>实心右等边三角形</p>
        <!-- 实心下等边三角形 -->
        <div class="triangle eqsolidbottom"></div>
        <p>实心下等边三角形</p>
        <!-- 实心左边等边三角形 -->
        <div class="triangle eqsolidleft"></div>
        <p>实心左等边三角形</p>
        <!-- 平行四边形 -->
        <div class="parallelogram"></div>
        <p>平行四边形</p>
        <!-- 多平行四边形组成的进度条 -->
        <div class="progressbar"><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div></div>
        <p>多平行四边形组成的进度条,鼠标放上去试试^_^</p>
        <!-- 梯形 -->
        <div class="trapezoid"></div>
        <p>梯形</p>
        <!-- 五边形 -->
        <div class="pentagon"></div>
        <p>五边形</p>
        <!-- 六边形 -->
        <div class="hexagon">六边形</div>
        <!-- 八边形 -->
        <div class="octagon">八边形</div>
        <!-- 耳朵 -->
        <div class="angletwo"></div>
        <p>耳朵</p>
        <!-- 飞镖 -->
        <div class="anglefour"><span class="fourmiddle"></span><span class="fourtop"></span><span class="fourright"></span><span class="fourbottom"></span><span class="fourleft"></span></div>
        <p>飞镖</p>
        <!-- 钻石 -->
        <div class="diamond">钻石</div>
        <!-- 心形 -->
        <div class="heart"></div>
        <p>心形</p>
        <!-- 直尾不加圆角和旋转-->
        <!-- 向右下弯尾箭头 -->
        <div class="curvearrowrightbottom"></div>
        <p>右下弯尾箭头</p>
        <!-- 向左上弯尾箭头 -->
        <div class="curvearrowlefttop"></div>
        <p>左上弯尾箭头</p>
        <!-- 蝴蝶结 -->
        <div class="bow"></div>
        <p>蝴蝶结</p>
        <!-- 气球 -->
        <div class="balloon"></div>
        <p>气球</p>
        <!-- 鸡蛋 -->
        <div class="egg"></div>
        <p>鸡蛋</p>
        <!-- 吃货 -->
        <div class="foodie"></div>
        <p>吃货</p>
        <!-- 太极图 -->
        <div class="taiji"></div>
        <p>太极</p>
        <!-- 五角星 -->
        <div class="starfive"></div>
        <p>五角星</p>
        <!-- 六角星 -->
        <div class="starsix"></div>
        <p>六角星</p>
        <!-- 八角星 -->
        <div class="stareight"></div>
        <p>八角星</p>
        <!-- 十二角星 -->
        <div class="startwelve"></div>
        <p>十二角星</p>
        <!-- 提示对话框 -->
        <div class="talkbubble">你好!我是对话框,炫酷的CSS图形分享到此结束喽~</div>
    </div>
</body>

</html>

CSS的强大远远不止于此,各种实现效果自行尝试吧,如果有心可以分享给小指,非常感谢~

点赞6
 标签: css css图形
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
lauraenergy
 lauraenergy 2019-02-13 10:52回复
#77
<a href="http://www.ortzproducts.com/herren-asics-gel-noosa-tri-9-blau-schwarz-schuhei">herren asics gel noosa tri 9 blau schwarz</a> <a href="http://www.cooterscamera.com/dam%C3%A4nner-air-jordan-retro-7-rosa-blau-schuheh">dam盲nner air jordan retro 7 rosa blau</a> <a href="http://www.marjalfun.com/mennns-nike-shox-current-gul-gull-obuvj">mennns nike shox current gul gull</a> <a href="http://www.alecsblog.com/nike-cortez-nylon-vintage-vivid-blu-scarpep">nike cortez nylon vintage vivid blu</a> <a href="http://www.troudumonde.com/femmes-nike-air-max-tailwind-5-violet-rouge-chaussuresh">femmes nike air max tailwind 5 violet rouge</a> <a href="http://www.smilesdrdavid.com/prada-saffiano-cuir-double-bag-black-pradah">prada saffiano cuir double bag black</a>
lauraenergy http://www.lauraenergy.com/
drjennieward
 drjennieward 2019-02-13 08:51回复
#76
<a href="http://www.mumbaikichut.com/nike-air-force-1-ac-premium-hvid-skol">nike air force 1 ac premium hvid</a> <a href="http://www.ikmsdkravmaga.com/nike-kobe-10-elite-tutti-nero-scarpeh">nike kobe 10 elite tutti nero</a> <a href="http://www.themusinglens.com/maschio-asics-gel-hyper-33-rosa-oro-scarpei">maschio asics gel hyper 33 rosa oro</a> <a href="http://www.startagencia.com/adidas-neo-campus-gr%C3%BCn-silber-schuheh">adidas neo campus gr眉n silber</a> <a href="http://www.drjennieward.com/adidas-neo-canvas-grey-silver-shoesl">adidas neo canvas grey silver</a> <a href="http://www.genievres.com/kyrie-irving-usa-jersey-kids-nfli">kyrie irving usa jersey kids</a>
drjennieward http://www.drjennieward.com/
topangafire
 topangafire 2019-02-12 15:00回复
#75
<a href="http://www.iediagx.com/femminile-gray-and-blu-nike-shox-obuvc">femminile gray and blu nike shox</a> <a href="http://www.juniorensea.com/asics-gel-kayano-21-powder-azul-amarillo-scarpea">asics gel kayano 21 powder azul amarillo</a> <a href="http://www.lorenbenjamin.com/jordan-retro-11-low-gr%C3%A5-marinen-chaussuresg">jordan retro 11 low gr氓 marinen</a> <a href="http://www.vcclassify.com/adidas-springblade-gris-zone-kurpese">adidas springblade gris zone</a> <a href="http://www.amrservicio.com/nike-dunk-high-schwarz-grape-obuva">nike dunk high schwarz grape</a> <a href="http://www.biotechsurvey.com/womens-ralph-lauren-mesh-polo-purple-pink-polot">womens ralph lauren mesh polo purple pink</a>
topangafire http://www.topangafire.com/
ileriayakkabi
 ileriayakkabi 2019-02-12 04:06回复
#74
<a href="http://www.cohenhypnosis.com/nike-free-run-5.0-lime-gr%C3%B8nn-door-schuheg">nike free run 5.0 lime gr酶nn door</a> <a href="http://www.paulabandura.com/nike-kobe-9-krm-ext-rouge-mamba-scarpeg">nike kobe 9 krm ext rouge mamba</a> <a href="http://www.cartsdk.com/nike-roshe-run-herre-gr%C3%A5-gr%C3%B8n-kurpesf">nike roshe run herre gr氓 gr酶n</a> <a href="http://www.breachurch.com/nike-solarsoft-mule-orange-s%C3%B8lv-schuhef">nike solarsoft mule orange s酶lv</a> <a href="http://www.facommobiles.com/nike-sb-lunar-oneshot-hvid-schuheb">nike sb lunar oneshot hvid</a> <a href="http://www.sarkariresurt.com/adidas-nmd-runner-gris-femmes-quilt-chaussurese">adidas nmd runner gris femmes quilt</a>
ileriayakkabi http://www.ileriayakkabi.com/
canditatenext
 canditatenext 2019-02-10 17:23回复
#73
<a href="http://www.praiseti.com/chile-10-vargas-home-long-sleeves-soccer-country-jersey-nflr">chile 10 vargas home long sleeves soccer country jersey</a> <a href="http://www.cynshq.com/purple-blue-womens-asics-gel-noosa-tri-9-shoes-skoa">purple blue womens asics gel noosa tri 9 shoes</a> <a href="http://www.fnjcompressor.com/nike-free-run-2-sneakerboot-quickstrike-sneakere">nike free run 2 sneakerboot quickstrike</a> <a href="http://www.kifftradingco.com/nike-roshe-run-hyp-mint-gr%C3%B8nn-kurpesa">nike roshe run hyp mint gr酶nn</a> <a href="http://www.phaqtory.com/nike-shox-deliver-mens-white-light-sneakerb">nike shox deliver mens white light</a> <a href="http://www.cialislaw.com/womens-nike-air-huarache-light-blue-purple-shoesf">womens nike air huarache light blue purple</a>
canditatenext http://www.canditatenext.com/
cynshq
 cynshq 2019-02-09 22:50回复
#72
<a href="http://www.mikespothole.com/harris-devin-34-jersey-found-nflc">harris devin 34 jersey found</a> <a href="http://www.theclaydoctor.com/new-balance-574-womens-green-red-runningf">new balance 574 womens green red</a> <a href="http://www.allthatspool.com/nfl-pittsburgh-steelers-color-rush-limited-antonio-brown-mens-football-jersey-nflv">nfl pittsburgh steelers color rush limited antonio brown mens football jersey</a> <a href="http://www.ihavewed.com/lebron-13-black-and-gold-chords-trainersa">lebron 13 black and gold chords</a> <a href="http://www.cloudsmartin.com/nike-roshe-run-i-lilla-r%C3%B8d-scarpec">nike roshe run i lilla r酶d</a> <a href="http://www.myachingoa.com/nike-air-max-tailwind-6-marine-femmes-kurpesc">nike air max tailwind 6 marine femmes</a>
cynshq http://www.cynshq.com/
prohaarklinik
 prohaarklinik 2019-02-09 06:39回复
#71
<a href="http://www.romoautocare.com/air-jordan-13-gold-schwarz-schuhej">air jordan 13 gold schwarz</a> <a href="http://www.industrialegy.com/arizona-state-sun-devils-top-of-the-world-ncaa-faboo-stretch-cap-hath">arizona state sun devils top of the world ncaa faboo stretch cap</a> <a href="http://www.bewustvitaal.com/femmes-asics-gel-lyte-5-hommesthe-verte-chaussuresh">femmes asics gel lyte 5 hommesthe verte</a> <a href="http://www.flushandhunt.com/nike-zoom-pegasus-32-femminile-rosso-rosa-scarpeq">nike zoom pegasus 32 femminile rosso rosa</a> <a href="http://www.kendalfewster.com/nike-lebron-12-low-red-black-shoesj">nike lebron 12 low red black</a> <a href="http://www.gisusalon.com/nike-huarache-ultra-gr%C3%B8n-gul-skoi">nike huarache ultra gr酶n gul</a>
prohaarklinik http://www.prohaarklinik.com/
prada purse 2016
 prada purse 2016 2019-02-09 02:17回复
#70
<a href="http://www.prestonacuk.com/where-can-i-buy-cheap-ray-ban-wayfarer-sunglasses-sunglassesr">where can i buy cheap ray ban wayfarer sunglasses</a> <a href="http://www.westonmaster.com/nike-chiefs-19-jeremy-maclin-red-team-color-stitched-limited-tank-top-suit-jersey-nfle">nike chiefs 19 jeremy maclin red team color stitched limited tank top suit jersey</a> <a href="http://www.tadejvaljavec.com/puma-speed-cat-trainers-uk-skot">puma speed cat trainers uk</a> <a href="http://www.igbohoohaa.com/air-max-1-royal-red-oven-trainerse">air max 1 royal red oven</a> <a href="http://www.baccoating.com/air-jordan-retro-3-b%C3%B8rn-sort-lyser%C3%B8d-chaussuresa">air jordan retro 3 b酶rn sort lyser酶d</a> <a href="http://www.expochacra.com/grey-purple-womens-asics-gel-quantum-360-shoes-footg">grey purple womens asics gel quantum 360 shoes</a>
prada purse 2016 http://www.allysfashions.com/prada-purse-2016-pradar
chachiscoffee
 chachiscoffee 2019-02-06 19:25回复
#69
<a href="http://www.javlust.com/youth-carson-wentz-limited-olivecamo-nike-jersey-nfl-philadelphia-eagles-11-super-bowl-lii-2017-salute-to-service-nflw">youth carson wentz limited olivecamo nike jersey nfl philadelphia eagles 11 super bowl lii 2017 salute to service</a> <a href="http://www.postmatespro.com/nike-air-force-1-mid-rosa-gr%C3%B8nn-schuheg">nike air force 1 mid rosa gr酶nn</a> <a href="http://www.uilstrategie.com/nike-air-presto-rouge-blanc-bleu-zone-scarpeg">nike air presto rouge blanc bleu zone</a> <a href="http://www.youtubetune.com/nike-lunarepic-low-flyknit-sort-desert-kurpese">nike lunarepic low flyknit sort desert</a> <a href="http://www.carbonstalk.com/roshe-run-schwarz-gr%C3%BCn-schuheg">roshe run schwarz gr眉n</a> <a href="http://www.gospeedbird.com/nike-lebron-soldier-9-jaune-or-schuheb">nike lebron soldier 9 jaune or</a>
[url=http://www.chachiscoffee.com/]chachiscoffee[/url]
oriturk
 oriturk 2019-02-06 09:23回复
#68
<a href="http://www.ontariozillow.com/air-jordan-4-retro-dark-gr%C3%A5-zar-chaussuresa">air jordan 4 retro dark gr氓 zar</a> <a href="http://www.qtbymary.com/nike-free-6.0-jaune-argent-schuhee">nike free 6.0 jaune argent</a> <a href="http://www.rxforri.com/adidas-prougeator-soccer-gris-blanc-scarpea">adidas prougeator soccer gris blanc</a> <a href="http://www.tracithrasher.com/nike-hypervenom-verde-wtuttipaper-kurpesf">nike hypervenom verde wtuttipaper</a> <a href="http://www.aesqpharm.com/nike-mj-stewart-ash-name-number-logo-tampa-bay-buccaneers-nfl-36-t-shirt-nflr">nike mj stewart ash name number logo tampa bay buccaneers nfl 36 t shirt</a> <a href="http://www.capitanleston.com/air-jordan-retro-3.5-rot-gold-kurpesf">air jordan retro 3.5 rot gold</a>
oriturk http://www.oriturk.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸