楽しいよね
ってことで最近よくご一緒するcss clip-pathつい頼っちゃう。
CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント | コリス
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html
CSS clip-path の使い方 / Web Design Leaves
https://www.webdesignleaves.com/pr/css/css_clip_path.html
個人的にはcircleが便利
SCSSサンプルコード
@mixin cliping {
overflow: hidden;
&:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0.15;
clip-path: circle(0 at center);
}
&:hover:before {
clip-path: circle(200px at center);
transition: 0.8s $easeOutCubic;
}
}```
コメントを残す