CSSでアニメみたいに文字や画像を真っ二つ、斜めに斬るスタイルシートのテクニック
Post on:2019年6月3日
sponsors
文字や画像をCSSで、真っ二つに斜めに斬るスタイルシートのテクニックを紹介します。左上からなので天翔龍閃とは違うのですが、袈裟斬りの感じがかっこいいです。
このCSSは文字だけでなく、画像も斬ることができます。
空の画像を用意してました。
写真: Unsplash
空裂斬！
実際の動作は、下記ページで楽しめます。
See the Pen
Cutting text effect by CHENXINNN (@chenxinnn)
on CodePen.
コードは、下記のようになっています。
HTMLでは、斬る要素を3つ用意します。
|
1 2 3 4 5 6 |
<div class="wrap"> <p class="text">blade</p> <p class="text">blade</p> <p class="text">blade</p> <p class="crack"></p> </div> |
3つの要素は上から、斬った後の上半分、下半分、一番上に表示です。上半分と下半分はclip-pathで斜めに斬ります。剣筋のカラーを変更したい場合は、crackのカラーを変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
* { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: hsl(0, 0%, 20%); } .wrap { position: relative; } .text { font-size: 20vw; line-height: .8; color: whitesmoke; text-transform: uppercase; font-weight: bold; /* background-color: pink; */ } .wrap .text:nth-child(2), .wrap .text:nth-child(3), .crack { position: absolute; left: 0; top: 0; } .wrap .text:nth-child(1) { -webkit-clip-path: polygon(100% 0, 3% 0, 100% 97%); clip-path: polygon(100% 0, 3% 0, 100% 97%); transition: -webkit-transform .6s; transition: transform .6s; transition: transform .6s, -webkit-transform .6s; } .wrap .text:nth-child(2) { -webkit-clip-path: polygon(0 3%, 0% 100%, 97% 100%); clip-path: polygon(0 3%, 0% 100%, 97% 100%); } .wrap .text:nth-child(3) { opacity: 1; transition: opacity .1s .6s; } .crack { background-color: hsl(0, 0%, 20%); width: 100%; height: 100%; -webkit-clip-path: polygon(0 3%, 3% 0, 100% 97%, 97% 100%); clip-path: polygon(0 3%, 3% 0, 100% 97%, 97% 100%); -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .wrap:hover .crack{ -webkit-transform: translate(0, 0); transform: translate(0, 0); } .wrap:hover .text:nth-child(3) { opacity: 0; transition: opacity .1s .3s; } .wrap:hover .text:nth-child(1) { transition: -webkit-transform .6s .5s; transition: transform .6s .5s; transition: transform .6s .5s, -webkit-transform .6s .5s; -webkit-transform: translate(10%, 10%); transform: translate(10%, 10%); } |
sponsors
