CSS3D之實現動態字

思路:用::befor僞元素生成用於3D翻轉的字體

實現起來挺簡單的:

  1. 新建5個div,每個div分別對應5個字體
  2. 用::befor生成用於翻轉的字體,並用absolute,以及z-index控制生成字體的位置
  3. 當元素被:hover時,就進行3D翻轉

實現起來挺簡單的,下面直接上源碼:

    <div id="warp">
        <div data-descr="前">前</div>
        <div data-descr="端">端</div>
        <div data-descr="小">小</div>
        <div data-descr="學">學</div>
        <div data-descr="生">生</div>
    </div>

    
    <style>
        #warp {
            margin: 100px auto;
            font-size: 80px;
            color: #005aa0;
            text-align: center;
        }

        #warp div {
            display: inline-block;
            width: 90px;
            height: 100%;
            position: relative;
        }

        #warp div[data-descr]::before {
            content: attr(data-descr);
            position: absolute;
            top: 0;
            text-shadow: 3px 2px 4px #005aa0;
            color: white;
            transform-origin: left;
            transition: transform .5s;
            z-index: 1;
        }

        #warp div[data-descr]:hover::before {
            transform-origin: left;
            transform: rotateY(-40deg) skewY(10deg);
        }
    </style>

上面也許會有陌生的屬性:

  • 自定義數屬性 data-descr
  • content:attr()

上面這兩個屬性呢,是可以和::before和::afterwwe僞元素搭配使用的,效果極佳

這是上面兩屬性詳細的文檔鏈接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after

 

靈感來自於這個博客:https://blog.csdn.net/iamcgt/article/details/72058711,但我的實現方式和他不同

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章