99久久在线观看,青青草青娱乐在线视频,台湾中文无码娱乐网,亚洲无码动漫在线观看,亚洲中文字幕不卡,免费成人性爱网站,成人网站视频大香蕉,天天综合网7799精品视频

【開(kāi)發(fā)小技巧】025—如何使用HTML和CSS創(chuàng)建反射效果？

共 2646字，需瀏覽 6分鐘

2020-08-08 04:00

英文 |?https://www.geeksforgeeks.org/how-to-create-reflection-effect-using-html-and-css/?ref=rp

翻譯 | web前端開(kāi)發(fā)

反射效果是可以在網(wǎng)站上使用的最酷的效果之一。這是一種非正式的效果，因此強(qiáng)烈建議不要在任何專(zhuān)業(yè)項(xiàng)目中使用它。你可以在個(gè)人項(xiàng)目中使用它，也可以在你的作品集中使用它來(lái)展示你的創(chuàng)造力。

在這種效果下，我們?cè)噲D模仿逼真的反射效果，就像它被水反射一樣。

實(shí)現(xiàn)方法：在原始字符串的底部創(chuàng)建一個(gè)旋轉(zhuǎn)的字符串，然后更改其不透明度和背景，使其看起來(lái)像原始字符串的反射。

讓我們看一下上述方法的實(shí)現(xiàn)。

HTML代碼：在此部分中，“ h2”標(biāo)簽是用包裹在其中的文本創(chuàng)建的。

 <html lang="en">
<head>     <meta charset="UTF-8" />     <meta name="viewport" content=         "width=device-width,          initial-scale=1.0" />
    <title>         Text Reflection          using HTML and CSS     title> head>
<body>     <h2 data-text="GeeksforGeeks">         GeeksforGeeks     h2> body>
html>

CSS代碼：

第1步：應(yīng)用徑向背景，該背景的中心較亮而拐角較暗。
步驟2：對(duì)標(biāo)題應(yīng)用一些基本樣式，例如大小，顏色等。
步驟3：現(xiàn)在，使用after?選擇器并在X軸上旋轉(zhuǎn)原始文本，并保持原點(diǎn)為底部。
第4步：應(yīng)用“ webkit”屬性將旋轉(zhuǎn)后的文本剪切為剪切。它將使
文本的上部可見(jiàn)，如輸出圖像中所示。
步驟5：現(xiàn)在應(yīng)用透明顏色并降低旋轉(zhuǎn)文本的不透明度。

注意：請(qǐng)確保根據(jù)您的背景降低不透明度。如果使用較暗的
背景，請(qǐng)將不透明度降低0.1-0.2；如果使用較淺的背景，則將其降低0.6-0.8。

完整代碼：它是以上兩個(gè)代碼部分的組合。

                   Text Reflection using HTML and CSS                GeeksforGeeks

最終結(jié)果如下：

點(diǎn)贊

評(píng)論

舉報(bào)