你也許會在一些網站的右上角看到一個很醒目的帶有TM標識的文字,這就是CSS實現的。
實現這一效果的代碼如下:
.tm { position: fixed; top: 0; right: 0; padding: 5px; background-color: black; color: white; font-size: 18px; font-weight: bold; transform: rotate(45deg); transform-origin: center; }
首先,我們使用position屬性將文字固定在瀏覽器的右上角。接下來,通過top和right屬性指定文字距離頁面上方和右側的距離,并使用padding屬性設置文字的內邊距。
同時,我們使用background-color屬性設置文字背景色,color屬性設置文字顏色,并使用font-size和font-weight屬性設置字體大小和粗細。
最后,通過transform屬性對文字進行了旋轉,使其呈現45度的傾斜效果,而transform-origin屬性則是設置旋轉中心的位置。
最終實現的效果是一個醒目的帶有TM標識的文字,優雅又高大上。
上一篇css3按鈕動畫過渡特效
下一篇css 只查找子元素