滑鼠移過時文字水平翻轉效果
文字文平翻轉效果
重點：
- transform: rotateY(360deg); //物件水平翻轉一圈
- transition: .9s; //動態.9秒跑完，如果沒設定根本無法發現它翻翻了一圈
- li:nth-child(1) //css選擇器，選取第一組li標籤
- transition-delay: .2s; //延遲等個.2秒再開始
效果演示：
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字水平旋轉</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="dailycss_20200803-1">
<ul>
<li>艾</li>
<li>吉</li>
<li>單</li>
<li>飛</li>
<li>鳥</li>
<div style="clear: both;"></div>
</ul>
</body>
</html>
CSS：
#dailycss_20200803-1 {
padding: 0;
margin: 0;
background-color: #ff008b;
}
#dailycss_20200803-1 ul {
padding: 20px;
margin: 0;
border: 5px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#dailycss_20200803-1 ul li {
list-style: none;
color: #fff;
float: left;
font-size: 3em;
transition: .9s;
}
#dailycss_20200803-1 ul:hover li {
transform: rotateY(360deg);
}
#dailycss_20200803-1 ul:hover li:nth-child(1) {
transition-delay: .6s;
}
#dailycss_20200803-1 ul:hover li:nth-child(2) {
transition-delay: .4s;
}
#dailycss_20200803-1 ul:hover li:nth-child(3) {
transition-delay: .2s;
}
來源：
迴響列表
目前還沒有任何留言
留言表單