文字水平翻轉效果

滑鼠移過時文字水平翻轉效果

文字文平翻轉效果

重點:

  1. transform: rotateY(360deg); //物件水平翻轉一圈
  2. transition: .9s; //動態.9秒跑完,如果沒設定根本無法發現它翻翻了一圈
  3. li:nth-child(1) //css選擇器,選取第一組li標籤
  4. 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;
}

 

來源:




 迴響列表

關於我

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸

用wordpress架網站超級沒有成就感...

最新PO文
Go to Blog
Social Accounts