wyr123789
- 浏览: 38052 次
- 性别:
-
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端，js，jquery (8)
- html (2)
- jquery，html5，html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端，js，jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒，ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div {
margin-bottom: 50px
}
/*六边形*/
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
margin-top: 50px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
/*八卦*/
#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;
}
/*钻石*/
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
/*八角星*/
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
/*十二角星*/
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
/*对话框*/
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
/*食逗人*/
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
/*鸡蛋*/
#egg {
display: block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/*无穷大符号*/
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*爱心*/
#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%;
}
/*五角大楼*/
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
/*五角星*/
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
/*六角星*/
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
/*梯形*/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
/*平行四边形*/
#parallelogram {
width: 150px;
height: 100px;
margin-left: 20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
/*右下三角*/
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
/*左下三角*/
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
/*右上三角*/
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
/*左上三角*/
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
/*右三角*/
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
/*左三角*/
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
/*下三角*/
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
/*上三角*/
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/*椭圆*/
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/*测试*/
.big {
width: 200px;
height: 250px;
background: #fff;
overflow: hidden
}
.middle {
width: 200px;
height: 250px;
background: #fff;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(-60deg);
overflow: hidden
}
.small {
width: 200px;
height: 250px;
background: orange url(4.jpg);
background-size: cover;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(120deg);
overflow: hidden;
}
</style> </head> <body> <div class="hexagon" id="hexagon"></div> <div class="yin-yang" id="yin-yang"></div> <div class="cut-diamond" id="cut-diamond"></div> <div class="burst-8" id="burst-8"></div> <div class="burst-12" id="burst-12"></div> <div class="talkbubble" id="talkbubble"></div> <div class="pacman" id="pacman"></div> <div class="egg" id="egg"></div> <div class="infinity" id="infinity"></div> <div class="heart" id="heart"></div> <div class="pentagon" id="pentagon"></div> <div class="star-five" id="star-five"></div> <div class="star-six" id="star-six"></div> <div class="trapezoid" id="trapezoid"></div> <div class="parallelogram" id="parallelogram"></div> <div class="triangle-bottomright" id="triangle-bottomright"></div> <div class="triangle-bottomleft" id="triangle-bottomleft"></div> <div class="triangle-topright" id="triangle-topright"></div> <div class="triangle-topleft" id="triangle-topleft"></div> <div class="triangle-right" id="triangle-right"></div> <div class="triangle-left" id="triangle-left"></div> <div class="triangle-down" id="triangle-down"></div> <div class="triangle-up" id="triangle-up"></div> <div class="oval" id="oval"></div> <!--测试区域--> <div class="big"> <div class="middle"> <div class="small"></div> </div> </div> </body> </html>
margin-bottom: 50px
}
/*六边形*/
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
margin-top: 50px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
/*八卦*/
#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;
}
/*钻石*/
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
/*八角星*/
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
/*十二角星*/
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
/*对话框*/
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
/*食逗人*/
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
/*鸡蛋*/
#egg {
display: block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/*无穷大符号*/
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*爱心*/
#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%;
}
/*五角大楼*/
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
/*五角星*/
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
/*六角星*/
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
/*梯形*/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
/*平行四边形*/
#parallelogram {
width: 150px;
height: 100px;
margin-left: 20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
/*右下三角*/
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
/*左下三角*/
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
/*右上三角*/
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
/*左上三角*/
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
/*右三角*/
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
/*左三角*/
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
/*下三角*/
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
/*上三角*/
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/*椭圆*/
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/*测试*/
.big {
width: 200px;
height: 250px;
background: #fff;
overflow: hidden
}
.middle {
width: 200px;
height: 250px;
background: #fff;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(-60deg);
overflow: hidden
}
.small {
width: 200px;
height: 250px;
background: orange url(4.jpg);
background-size: cover;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(120deg);
overflow: hidden;
}
</style> </head> <body> <div class="hexagon" id="hexagon"></div> <div class="yin-yang" id="yin-yang"></div> <div class="cut-diamond" id="cut-diamond"></div> <div class="burst-8" id="burst-8"></div> <div class="burst-12" id="burst-12"></div> <div class="talkbubble" id="talkbubble"></div> <div class="pacman" id="pacman"></div> <div class="egg" id="egg"></div> <div class="infinity" id="infinity"></div> <div class="heart" id="heart"></div> <div class="pentagon" id="pentagon"></div> <div class="star-five" id="star-five"></div> <div class="star-six" id="star-six"></div> <div class="trapezoid" id="trapezoid"></div> <div class="parallelogram" id="parallelogram"></div> <div class="triangle-bottomright" id="triangle-bottomright"></div> <div class="triangle-bottomleft" id="triangle-bottomleft"></div> <div class="triangle-topright" id="triangle-topright"></div> <div class="triangle-topleft" id="triangle-topleft"></div> <div class="triangle-right" id="triangle-right"></div> <div class="triangle-left" id="triangle-left"></div> <div class="triangle-down" id="triangle-down"></div> <div class="triangle-up" id="triangle-up"></div> <div class="oval" id="oval"></div> <!--测试区域--> <div class="big"> <div class="middle"> <div class="small"></div> </div> </div> </body> </html>
分享到：
发表评论
-
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 690不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11691.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 479<div class="js_mobile&q ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 354/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
功能 交替显示
2016-08-24 16:09 589<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4537加广告与加封页脚的代码是差不多的！ 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 580<!DOCTYPE html> <html& ... -
小用例
2016-07-20 17:24 369<!DOCTYPE html> <html& ... -
css3样式
2016-07-15 18:58 478<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 723<!DOCTYPE html> <html& ... -
初始化样式
2016-07-06 14:10 0@charset "UTF-8"; /*@ ... -
html5放大缩小
2015-06-26 10:06 428<style> div{ margin: ... -
html5+css3动画
2015-06-11 17:51 470此动画仅限谷歌浏览器···· <!DOCTYPE h ... -
html5画布=圆
2015-06-08 16:56 527<!DOCTYPE html> <html& ... -
HTML5画布+jquery
2015-06-08 16:00 574<!DOCTYPE html> <html& ...
相关推荐
在这个程序中，“利用虚函数计算各种图形面积”是核心功能，涉及到的主要知识点包括虚函数、基类与派生类、多态以及不同几何图形的面积计算。 首先，我们要理解虚函数的概念。在C++中，虚函数是基类声明的一种成员...
这个压缩包文件“图形学各种图形生成的源代码”显然包含了一系列用于生成图形的算法源码，主要涉及到了DAA（Digital Antialiasing，数字抗锯齿）、中点圆算法以及图形裁剪技术。这些是计算机图形学基础且重要的概念...
在MATLAB程序设计与应用中，用界面实现各种图形绘制是一项重要的技能，它结合了编程逻辑与用户交互，使得数据可视化更加直观且易于操作。MATLAB（Matrix Laboratory）是一款强大的数学计算软件，广泛应用于工程计算...
"VB/C++/VC++各种图形算法设计"这一主题涵盖了多种用于创建和操作图形的技术，主要涉及到贝塞尔曲线、立方体渲染和样条曲线等关键概念。 首先，我们来详细了解一下贝塞尔曲线。贝塞尔曲线是一种参数化的数学曲线，...
这是关于Python & Turtle练习：绘制各种图形（全部源代码）部分的练习，该文件中所有代码均已通过调试，且博客中均已经记录，欢迎各位朋友下载，这对于Python学习以及使用Matplotlib和Turtle绘图等是很有用的。
这个压缩包文件名为"计算机图形学源代码"，暗示了其中包含了用于实现各种图形绘制和变换的程序代码。这些源代码是学习和理解计算机图形学原理的重要资源，能够帮助开发者直观地了解图形绘制的底层逻辑。 在计算机...
在IT行业中，尤其是在建筑设计领域，计算各种图形的参数是一项基础且重要的任务。"自动各种图形计算"这个主题意味着我们探讨的是如何利用软件工具自动化处理几何图形的计算，以提高工作效率和准确性。在这个场景下，...
在Java编程语言中，打印各种图形是一项基础但实用的任务，常用于教学和实践。这个主题主要涵盖如何使用控制台输出来创建不同的图形，如星号(*)组成的矩形、正方形、三角形等。下面我们将详细探讨Java中实现这些图形...
在IT行业中，图形绘制是一项至关重要的技能，无论是在软件开发、数据分析、网页设计还是游戏制作等领域，都需要用到各种图形的绘制。这个名为"绘制各种图形的资源"的压缩包，很可能包含了一系列用于创建和编辑图形的...
2021年小学二年级体育教案行进间队列(走成各种图形).pdf
在Java编程语言中，我们可以利用Java的`java.awt`和`javax.swing`包中的类来绘制各种图形。这些图形包括但不限于线条、圆形、矩形、椭圆、多边形等。`Graphics2D`类是Java 2D API的核心，它提供了一套强大的绘图功能...
通过分析和运行这些代码，学生可以直观地看到各种图形绘制方法的效果，并在此基础上进行修改和创新，以深入理解和掌握图形学的基本原理。 总之，这个实验旨在通过C++和OpenGL的学习，使学生具备创建和操纵图形的...
"C语言输出各种图形" 本文主要介绍了使用C语言输出各种图形的方法和实现过程。其中包括了软件开发目的、数据构造、软件功能说明、软件验收标准、实现代码等方面的内容。 一、软件开发目的 本文的目的旨在使用...
标题“手势绘制各种图形并保存包括放大缩小移动”涉及到以下几个关键点： 1. **手势绘制**：在移动设备上，用户可以通过触摸屏幕进行手势操作，例如拖动、滑动、双指缩放等。这些手势可以被JavaScript的事件监听器...
这个"纯css3实现各种图形样式.zip"压缩包文件显然是一个包含了一系列利用CSS3技术制作的各种图形样式的资源集合。下面我们将详细探讨CSS3在创建图形样式方面的应用。 首先，CSS3引入了许多新的选择器，使得我们可以...
在Windows CE（wince）平台上，GDI（Graphics Device Interface）是系统提供的核心图形库，用于在屏幕上绘制和操作各种图形元素。这个压缩包“DrawShape”包含了关于如何使用GDI进行图形绘制以及应用画笔和画刷类库...
本教程将重点讲解如何利用C# WPF实现各种图形的绘制，包括柱状图、曲线图和饼图。 首先，我们需要了解WPF中的绘图基础。WPF使用矢量图形，这意味着图形可以无损缩放，保持清晰。主要的绘图类集中在`System.Windows....
描述进一步强调了这个工具的功能特性，它不仅能够画出直线（橡皮筋直线可能指的是用户在屏幕上拖动鼠标时，线会动态跟随，松开鼠标后完成绘制），还支持绘制圆、椭圆以及各种曲线。这暗示了程序内部可能实现了复杂的...
总之，GDI+、PictureEx和CxImage是C++开发中处理图形和图像的重要工具，它们提供了丰富的功能，使得开发者能够轻松应对各种图形处理需求。在实际项目中，根据性能、易用性和特定功能的需求，选择合适的图形库，可以...