D18看YT學 CSS動畫_文字對半展開

2022 iThome 鐵人賽

DAY 18

自我挑戰組

CSS UI(動畫)相關系列第 18 篇

14th鐵人賽

kypss95120

2022-10-02 15:48:53

310 瀏覽

分享至

今天的參考
https://www.youtube.com/watch?v=4Dba1FJ-A0A&list=PL5e68lK9hEzd-ZM4Km6xUia-mxQp52G6U&index=9
然後，有程式碼的數值會用到下列網址(用於切形狀)
https://bennettfeely.com/clippy/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>測試</title>
	<link href="C1.css" rel="stylesheet">
</head>
<body>
	<h2>
		範例字樣
		<span>範例字樣</span>
		<span>範例字樣</span>
		<span>~~123內容文本**147~~</span>
	</h2>
</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: consolas;
}

h2{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 0;
	font-size: 4em;
	color: transparent;
	text-transform: uppercase;
}

h2 span:nth-child(1){
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	transition: 0.5s;
	clip-path: polygon(100% 50%, 100% 0%, 0 0, 0 50%);/*網址切形狀*/
	overflow: hidden;
}

h2:hover span:nth-child(1){
	transform: translateY(-18px);
}

h2 span:nth-child(2){
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	transition: 0.5s;
	clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0 50%);/*網址切形狀*/
	overflow: hidden;
}

h2:hover span:nth-child(2){
	transform: translateY(18px);
}

h2 span:nth-child(3){
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) scaleY(0);
	width: 91%;
	color: #FFF;
	background: #26347A;
	font-size: 0.25em;
	font-weight: 500;
	letter-spacing: 0.7em;
	text-align: center;
	padding-left: 20px;
	margin-left: 5px;
	transition: 0.5s;
}

h2:hover span:nth-child(3){
	transform: translateY(-50%) scaleY(1);
}

成果(是否HOVER)

今天先這樣，明天找別的~~