css3学习-插花的杯子
感觉css3细节很多,群里的朋友布置的作业,插花的杯子;跟原图有一定的差距！不管怎么样,坚持了1周学习加测试,加练习终于搞定!只做了chrome的兼容!
感兴趣的可以看源码!
写css3的过程中有很多细节问题注意:
1、border-radius的扩展使用;体现：把手,花瓣,叶子;
2、box-shadow;体现：做边框,实际宽度不变;
3、使用linear-gradient做纹理;
4、background-origin确定变形位置;
5、gradient颜色范围的控制;
6、transition的使用;
7、before,after伪类的使用
问题很多,多琢磨多练！多测试！多对比！没别的办法啦！如果有不对的地方,或更好的方法请指出!
源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>artf2e works: css3 cup width flowers</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
/* 扩大间距方便插花 */
.top,.body,.bottom,.handle{
margin:300px;
}
/* 保证花,枝,叶在同一基点起 */
.branch,.f-leaf,.flowers{
top:80px;
left:550px;
position:absolute;
}
.top{
position: absolute;
width: 296px;
height: 80px;
border-radius: 50%;
box-shadow:inset 0 0 10px 5px #ddd;
border:2px solid #fff;
background:-webkit-repeating-radial-gradient(#CB9A3F 5%,#FFF 20%,#C66 5%);
z-index:200;
}
.body{
position: absolute;
top:40px;
width: 300px;
height: 400px;
z-index: 4;
box-shadow: inset -10px -30px 80px 20px rgba(221,221,221,.8);
border-radius: 0 0 50% 50% / 0 0 12% 12%;
border-bottom:8px solid #ddd;
/*background: -webkit-linear-gradient(180deg,#ddd 5%,#fff 75%,#ddd);*/
/*background: -webkit-radial-gradient(circle,#fff,#ccc);*/
}
.body:after{
position: absolute;
background: url(http://img.hb.aicdn.com/53cb915e278bc7cce1161e0d692e61daa5dfcd3b2455-6IPw0z_fw580) no-repeat -10px -10px;
height: 267px;
width: 50px;
top:50%;
left:50%;
margin:-120px 0 0 -30px;
font:600 50px/1em Arial,SimSun;
word-break:break-all;
text-align: center;
overflow: hidden;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
content:"WEB前端";
}
.handle{
position: absolute;
width: 100px;
height: 210px;
border-style: solid;
border-color: #eee #ddd #eee;
border-width: 35px 30px 30px 0;
border-radius: 30px 70px 90px 10px / 15px 50px 110px 10px;
top: 100px;
left: 250px;
z-index: 7;
-webkit-transform: rotateX(30deg);
}
/* 枝,叶,花 */
.branch{
position:absolute;
z-index:5;
width:10px;
height:300px;
border-radius:20% 20% 0 0 / 60% 60% 0 0;
background:-webkit-linear-gradient(top,#75B20D,#6EAE02,#27792D);
-webkit-transform:rotate(20deg);
}
.each-leaf{
width:24px;
height:72px;
border-radius:15px 10px 7px 17px/ 40px 51px 20px 33px;
background:-webkit-linear-gradient(225deg,#217A3D 10%,#91C529 80%);
position:absolute;
}
.leaf-1{
-webkit-transform: scale(0.8) rotate(-130deg);
top: 10px;
left: 20px;
}
.leaf-2{
-webkit-transform: scale(1.1,0.9) rotate(115deg);
top: 50px;
right: 30px;
}
.leaf-3{
-webkit-transform: scale(1.0,0.7) rotate(-112deg);
top: 100px;
left: 25px;
}
.flower{
-webkit-transform:scale(1.5,1.2);
}
.f-leaf{
position:absolute;;
z-index:100;
}
.f-leaf .l-1{
position:absolute;
-webkit-transform:rotate(160deg);
top:-60px;
left:30px;
}
.f-leaf .l-2{
position:absolute;
-webkit-transform:rotate(-100deg);
top:-30px;
left:75px;
}
.f-leaf .l-3{
position: absolute;
-webkit-transform: rotate(200deg) scale(1.2,0.5);
top: -45px;
left: 55px;
}
.flowers .each-leaf:nth-child(2n){
background:-webkit-linear-gradient(80deg,#C40202 30%,#FC2725 100%);
}
.flowers .each-leaf:nth-child(2n+1){
background:-webkit-linear-gradient(80deg,rgba(192,2,2,.5) 30%,rgba(252,39,37,.45) 100%);
}
.flowers .each-leaf{
top:-65px;
left:40px;
-webkit-transform-origin:bottom center;
}
.flowers .fl-1{
-webkit-transform:rotate(0deg);
}
.flowers .fl-2{
-webkit-transform:rotate(10deg);
}
.flowers .fl-3{
-webkit-transform:rotate(20deg);
}
.flowers .fl-4{
-webkit-transform:rotate(30deg);
}
.flowers .fl-5{
-webkit-transform:rotate(40deg);
}
.flowers .fl-6{
-webkit-transform:rotate(50deg);
}
.flowers .fl-7{
-webkit-transform:rotate(60deg);
}
.flowers .fl-8{
-webkit-transform:rotate(70deg);
}
</style>
<body>
<div class="top"></div>
<!--flowers start-->
<div class="branch">
<div class="each-leaf leaf-1"></div>
<div class="each-leaf leaf-2"></div>
<div class="each-leaf leaf-3"></div>
</div>
<div class="f-leaf">
<div class="each-leaf l-1"></div>
<div class="each-leaf l-2"></div>
<div class="each-leaf l-3"></div>
</div>
<div class="flowers">
<div class="each-leaf fl-1"></div>
<div class="each-leaf fl-2"></div>
<div class="each-leaf fl-3"></div>
<div class="each-leaf fl-4"></div>
<div class="each-leaf fl-5"></div>
<div class="each-leaf fl-6"></div>
<div class="each-leaf fl-7"></div>
<div class="each-leaf fl-8"></div>
</div>
<!--flowers end-->
<!--cup body start-->
<div class="body"></div>
<!--cup body end-->
<!--cup handle start-->
<div class="handle"></div>
<!--cup handle end-->
</body>
</html>
参考文献:
google,w3cplus (收集自互联网)