1. 程式人生 > 其它 >直播帶貨開發,實現簡單的鏤空漸變文字效果

直播帶貨開發,實現簡單的鏤空漸變文字效果

技術標籤:技術類csshtmlpythonjsandroid

直播帶貨開發,實現簡單的鏤空漸變文字效果相關的程式碼
html:

<body>
    <div class="box">
        hello
    </div>
</body>
 

css:

.box{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    text-align: center;
    /*用line-height等於容器的高度實現容器內部垂直居中*/
    line-height:
300px; border-radius: 150px; font-size: 100px; /* box 絕對定位到螢幕中間,transform: translate(-50%, -50%) 為元素自身偏移*/ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: bold; /* 漸變文字顏色的關鍵*/ background-image: linear-gradient(135deg, deeppink, dodgerblue
); -webkit-background-clip: text; color: transparent; }

以上就是 直播帶貨開發,實現簡單的鏤空漸變文字效果相關的程式碼,更多內容歡迎關注之後的文章