css3学习-插花的杯子

顺晟科技

2021-07-31 07:31:56

187

感觉css3细节很多,群里的朋友布置的作业,插花的杯子;跟原图有一定的差距！不管怎么样,坚持了1周学习加测试,加练习终于搞定!只做了chrome的兼容!

点击查看DEMO：插花的杯子

感兴趣的可以看源码!
写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 );
}
.flowers .each-leaf:nth-child(2n+1){
        background:-webkit-linear-gradient(80deg,rgba(192,2,2,.5) 30%,rgba(252,39,37,.45) );
}
.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 (收集自互联网)

上一篇：CSS3制作迷你播放器面板下一篇：15种基础的可以直接使用的CSS3样

网站建设

Css

css3学习-插花的杯子