遇到乙個情況,太長需要截短一些,開始用了clip,後來發現這個屬性已經從css標準裡面刪除了,然後看到了clip-path,發現這個比較強大一些。
我用的的大小是600*774
clip-path裁剪出圓形
clip-path:circle(40% at 200px 200px);
效果如下:
40%是半徑,at後面的引數是圓心。
clip-path 裁剪出橢圓
clip-path: ellipse(farthest-side farthest-side);
效果如下:
ellipse也可以指定裁剪的引數,但是我還不知道怎麼用,知道了再上來補上。
clip-path裁剪出矩形
inset的四個引數的的含義如下圖:
就是畫了四條線,四條線框出來的矩形可以顯示,外面的就不顯示了。四個引數分別是上面的線距離的上邊的距離,右面的線距離右邊的距離,下面的線距離下邊的距離,左邊的線距離左邊的距離。
我想實現高度剪成600px,
clip-path: inset(0 0 calc(100% - 600px) 0);
用calc的好處是我不需要自己再計算了,比較通用。
clip-path實現文字慢慢從上到下展示出來的效果
突發奇想實現的,通過不斷改變inset的第三個引數來實現,效果圖如下:
螢幕錄製做成gif用了個軟體叫做screentogif。
先介紹一下這首詞吧,我第一次見到的時候是看金庸的《倚天屠龍記》,開篇就是這首詞,作者是丘處機,描寫小龍女的。
**如下:
春遊浩蕩,是年年、寒食梨花時節。
白錦無紋香爛漫,玉樹瓊葩堆雪。
靜夜沉沉,浮光靄靄,冷浸溶溶月。
人間天上,爛銀霞照通徹。
渾似姑射真人,天姿靈秀,意氣舒高潔。
萬化參差誰通道,不與群芳同列。
浩氣清英,仙才卓犖,下土難分別。
瑤台歸去,洞天方看清絕。
p>
css**:
p
js**如下:
const pp = document.queryselector('p');
let percent = 0;
function go() %) 0)`;
percent++;
if (percent == 101)
requestanimationframe(go);
} settimeout(() => requestanimationframe(go)
, 2000);
clip-path還有更加高階的用法,比如多邊形,配合svg等等。。。 PHP機器學習庫php ml的簡單測試和使用
iris花蕊部分資料,有三種不同的分類 不知名資料集,小數點被打成了逗號,所以計算時還需要處理一下 我們先處理不知名資料集。首先,我們的不知名資料集的檔名為data.txt。而這個資料集剛好可以先繪製成x y折線圖。所以,我們先將原資料繪製成乙個折線圖。由於x軸比較長,所以我們只需要看清楚它大致的形...
Metasploit簡單使用 安裝和簡單使用
以下是非kali的linux下安裝msf框架 adduser msf 新增msf使用者 su msf 切換到msf使用者 cd opt metasploit framework bin 切換到msf所在的目錄 msfconsole 以後啟動msfconsole,都切換到msf使用者下啟動,這樣會同步...
Stanford NLP的介紹安裝和簡單使用
stanford nlp stanford nlp提供了一系列自然語言分析工具。它能夠給出基本的 詞形,詞性,不管是公司名還是人名等,格式化的日期,時間,量詞,並且能夠標記句子的結構,語法形式和字詞依賴,指明那些名字指向同 樣的實體,指明情緒,提取發言中的開放關係等。乙個整合的語言分析工具集 進行快...