滑鼠移過物件拆成兩半的效果
滑鼠移過物件拆成兩半的效果
重點:
- #dailycss_20210803 h1:before {
-webkit-clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
} //物件遮罩效果 - clip path polygon 產生器:
https://bennettfeely.com/clippy/
效果演示:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑鼠移過物件拆成兩半的效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="dailycss_20210803">
<h1 data-name="BREAK">BREAK</h1>
</body>
</html>
CSS:
#dailycss_20210803 { margin: 0; padding: 0; background-color: #fcff8a; } #dailycss_20210803 h1 { margin: 0; padding: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: transparent; font-family: 'arial black'; font-size: 10em; } #dailycss_20210803 h1:before, #dailycss_20210803 h1:after { content: attr(data-name); color: #262626; position: absolute; top: 0; left: 0; overflow: hidden; transition: .3s; } #dailycss_20210803 h1:before { -webkit-clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%); clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%); /* background-color: #f00; */ } #dailycss_20210803 h1:after { -webkit-clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%); clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%); /* background-color: #0ff; */ } #dailycss_20210803 h1:hover:before { top: -5px; left: -10px; transform: rotate(-5deg); } #dailycss_20210803 h1:hover:after { top: 5px; left: 10px; transform: rotate(5deg); }
來源:
迴響列表
目前還沒有任何留言
留言表單