直播帶貨開發,實現簡單的鏤空漸變文字效果
阿新 • • 發佈:2021-02-10
技術標籤:技術類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;
}
以上就是 直播帶貨開發,實現簡單的鏤空漸變文字效果相關的程式碼,更多內容歡迎關注之後的文章