這篇文章主要為大家展示了“怎么用純CSS實現(xiàn)一把剪刀的效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么用純CSS實現(xiàn)一把剪刀的效果”這篇文章吧。
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),鹽邊企業(yè)網(wǎng)站建設(shè),鹽邊品牌網(wǎng)站建設(shè),網(wǎng)站定制,鹽邊網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,鹽邊網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
代碼解讀
定義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()函數(shù)畫出剪刀的另一半:
.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%;
}
增加動畫鼠標(biāo)懸停時的動畫效果:
.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));
}
}
以上是“怎么用純CSS實現(xiàn)一把剪刀的效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站題目:怎么用純CSS實現(xiàn)一把剪刀的效果
URL網(wǎng)址:http://muchs.cn/article24/pidsje.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、手機網(wǎng)站建設(shè)、App開發(fā)、ChatGPT、品牌網(wǎng)站制作、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)