搜尋
首頁web前端css教學給文字加波浪線效果
給文字加波浪線效果Mar 22, 2018 pm 04:24 PM
效果波浪

這次帶給大家給文字加波浪線效果,給文字加波浪線效果的注意事項有哪些,下面就是實戰案例,一起來看一下。

前言

css的設計之巧妙,實現之精妙,細細尋味,其妙非凡,妙不可言。這波浪線,取巧的運用了linear-gradient屬性,合角度、顏色、位置於一體,配合background-sizebackground-repeat,化一為多,平滑過渡。哇,這最後的效果太巧秒了!塵世間沒有詞形容了…     

#—題記,改編自《食神》

實作方法

語法:linear-gradient(direction, color-stop 1, color-stop 2,……)

##簡單用法:
background-image: linear-gradient(red, transparent);

#增加角度,linear-gradient(45deg, red, transparent)

#加個position:linear-gradient(45deg, red, transparent 45%)##​​

#加個colorlinear-gradient(45deg, red, transparent 45%,red )

不知道大家看到這裡,有沒有如看到一番明鏡,頓悟了。


linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)

#linear-gradient(135deg , transparent 45%, red 55%, transparent 60%)

把這兩條線結合在一起。

結合
看到這裡,你知道怎麼達到波浪線效果了麼? ^_^

高度為原來的1/2
最終程式碼:

文字波浪線效果

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

常用的顏色漸層方法總結

#2D模擬實現摩天輪旋轉動畫特效

CSS3的box-sizing屬性圖文教學


#

以上是給文字加波浪線效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题Apr 03, 2024 am 08:13 AM

你可能遇到过智能手机屏幕出现绿色线条的问题,即使没见过,也一定在网络上看到过相关图片。那么,智能手表屏幕变白的情况你遇见过吗?4月2日,CNMO从外媒了解到,一名Reddit用户在社交平台上分享了一张图片,展示了三星Watch系列智能手表屏幕变白的情况。该用户写道:"我离开时正在充电,回来时就这样了,我尝试重启,但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过,从图片上看,应该是三星Watch5。此前,另一位Reddit用户也报告

九州风神阿萨辛 4S 散热器评测 风冷“刺客大师”范儿九州风神阿萨辛 4S 散热器评测 风冷“刺客大师”范儿Mar 28, 2024 am 11:11 AM

说起阿萨辛ASSASSIN,相信玩家们一定会想到《刺客信条》中的各位刺客大师,不仅身手了得,而且"躬身于黑暗、服务于光明"的信条,与国内知名机箱/电源/散热器品牌九州风神(DeepCool)旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近,该系列的最新产品阿萨辛ASSASSIN4S重磅上线,"西装刺客,再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计,外面包覆立方体造型的整流罩,整体感极强,并提供白、黑两种配色可选,满足不同色系

春日里的精致光影艺术,哈趣 H2 性价比之选春日里的精致光影艺术,哈趣 H2 性价比之选Apr 17, 2024 pm 05:07 PM

随着春天的到来,万物复苏,一切都充满了生机与活力。在这个美好的季节里,如何为家居生活增添一抹别样的色彩?哈趣H2投影仪,以其精致的设计和超高的性价比,成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上,还是卧室的床头柜旁,都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地,这种设计不仅让投影仪的外观更显高级,同时也增加了触感的舒适度。米色仿皮纹材质,更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配,既符合现代家居的审美趋势,又能够融入

航嘉 MX750P 全模组电源评测:750W 的白金实力浓缩航嘉 MX750P 全模组电源评测:750W 的白金实力浓缩Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家,随着制程的提升和技术的进步,英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力,游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源,在满足高性能需求的ITX平台中,MX750P全模组电源的定额功率高达750W,同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念,共有黑白两款供玩家选择,均采用磨砂表面处理,搭配银灰色和红色的字体有很好的质感,

七彩虹隐星 P15 24 评测:颜值性能兼具的硬核全能游戏本七彩虹隐星 P15 24 评测:颜值性能兼具的硬核全能游戏本Mar 06, 2024 pm 04:40 PM

在当下科技飞速发展的时代,笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言,拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计,成为了未来的引领者,堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU,外观采用更时尚的宇宙飞船设计风格,同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理

轻松拿捏 4K 高清图像理解!这个多模态大模型自动分析网页海报内容,打工人简直不要太方便轻松拿捏 4K 高清图像理解!这个多模态大模型自动分析网页海报内容,打工人简直不要太方便Apr 23, 2024 am 08:04 AM

一个可以自动分析PDF、网页、海报、Excel图表内容的大模型,对于打工人来说简直不要太方便。上海AILab,香港中文大学等研究机构提出的InternLM-XComposer2-4KHD(简写为IXC2-4KHD)模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制,该工作将多模态大模型的最大输入图像提升到超过4K(3840x1600)分辨率,并支持任意长宽比和336像素~4K动态分辨率变化。发布三天,该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏

真正的一镜走天下 尼克尔 Z 28-400mm f/4-8 VR 镜头上手体验真正的一镜走天下 尼克尔 Z 28-400mm f/4-8 VR 镜头上手体验Mar 28, 2024 pm 02:54 PM

很多摄影爱好者喜欢使用镜头,他们的拍摄需求非常多变,因此在镜头的选择上更倾向于一支比较全能的产品,也就是我们俗称的"一镜走天下"镜头。刚好,现在尼康推出了一支新的产品,尼克尔Z28-400mmf/4-8VR镜头,一支真正的"一镜走天下"镜头。镜头从28mm广角端一直覆盖到400mm长焦端,配备其Z卡口相机,可以轻松拍摄十分丰富的摄影主题,并带来一场丰富的视角变化。今天,我们就通过近期的使用体验,跟大家一起聊聊这支尼克尔Z28-400mmf/4-8VR镜头。尼克尔Z28-400mmf/4-8VR是

上代机皇能否再战?三星 Galaxy S23 Ultra 实际使用体验分享上代机皇能否再战?三星 Galaxy S23 Ultra 实际使用体验分享Mar 12, 2024 pm 01:58 PM

在智能手机市场,三星的Galaxy系列一直以其卓越的性能和创新的设计备受瞩目。而GalaxyS23Ultra作为上代机皇,自发布以来便受到了广大消费者的喜爱。随着时间的推移,新机型层出不穷,那么,这款昔日的机皇如今还能否再战呢?接下来,我将分享自己在使用三星GalaxyS23Ultra过程中的实际体验,带大家一同探讨这个问题。首先,从外观设计上来看,GalaxyS23Ultra依然保持着三星一贯的精致与高端。其独特的微曲屏设计不仅提升了手机的整体美感,更为用户带来了更加沉浸的视觉体验。在日常使用

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具