如何使用纯CSS实现一把剪刀的效果

2024-01-17 14:12 小编
   源代码下载
    https://github.com/comehope/front-end-daily-challenges
    代码解读
    定义dom,容器中包含2个.half元素,各表示剪刀的半边,它的子元素handle表示刀柄,blade表示刀,最后的.joint表示连接左右两部分铆钉:
    <figureclass="scissors">
    <divclass="half">
    <spanclass="handle"></span>
    <spanclass="blade"></span>
    </div>
    <divclass="half">
    <spanclass="blade"></span>
    <spanclass="handle"></span>
    </div>
    <divclass="joint"></div>
    </figure>
    居中显示:
    body{
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    }
    定义容器尺寸,其中outline是辅助线:
    .scissors{
    width:21em;
    height:7em;
    outline:1pxdashed;
    }
    定义半边剪刀的尺寸,其中outline是辅助线:
    .scissors{
    position:relative;
    }
    .half{
    position:absolute;
    width:inherit;
    height:4em;
    outline:1pxdashedred;
    }
    画出刀柄:
    .handle{
    position:absolute;
    box-sizing:border-box;
    width:8em;
    height:inherit;
    border:1emsolid#333;
    border-radius:2em;
    }
    画出刀,用圆角属性画出了顶部的刀尖:
    .blade{
    position:absolute;
    width:15em;
    height:1em;
    background-color:silver;
    top:3em;
    left:6em;
    border-radius:001em0;
    z-index:-1;
    }
    用伪元素在刀的底部画一个三角形,使刀与刀柄连接得更牢固:
    .blade::before{
    content:'';
    position:absolute;
    border-style:solid;
    border-width:01.8em1em1.8em;
    border-color:transparenttransparentsilvertransparent;
    top:-1em;
    left:0.2em;
    }
    使半边刀倾斜:
    .half{
    transform-origin:45%bottom;
    transform:rotate(15deg);
    }
    利用scale()函数画出剪刀的另一半:
    .half{
    transform-origin:45%bottom;
    transform:rotate(calc(15deg*var(--direction)))scaleY(var(--direction));
    }
    .half:nth-child(1){
    --direction:1;
    top:0;
    }
    .half:nth-child(2){
    --direction:-1;
    top:-1em;
    }
    画出连接左右半边的铆钉:
    .joint{
    position:absolute;
    width:0.7em;
    height:0.7em;
    background-color:#333;
    border-radius:50%;
    top:calc(50%-0.7em/2);
    left:45%;
    }
    增加动画鼠标悬停时的动画效果:
    .scissors:hover.half{
    animation:cut2sease-out;
    }
    @keyframescut{
    20%,60%{
    transform:rotate(calc(30deg*var(--direction)))scaleY(var(--direction));
    }
    40%,80%{
    transform:rotate(calc(5deg*var(--direction)))scaleY(var(--direction));
    }
    }
    最后,别忘了删掉辅助线。


Tag: 如何 效果
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码