css實現快速抖動效果 css之vw快速實現布局

2021-10-12 20:36:55 字數 884 閱讀 7736

相對於視口的寬度。視口被均分為100單位的vw，

與vw相對的。也有vh(相對於視口的高度。視口被均分為100單位的vh)

en,它和百分比不同，百分比是相對于父元素的，以前我總以為它們是一樣的

css：

* .container .container-main .container-main>div
html:

總之很靈活的，還有就是它並不是寬只能用vw,高只能用vh,你可以高也用vw,寬用vh，都是可以的，比如實現上傳九圖排列，就可以寬高同時使用vw,

我們經常會給乙個模態框實現乙個遮罩層效果，這個用vw,vh來實現是很快速的

eg:css

.mask
html

定位要採用固定定位，不如下拉的話就那啥了，碼雲上就有這個問題

在標題中使用text-indent可以實現首行縮排，如果給縮排畫素加上vw,就可以實現根據手機尺寸不同，自適應縮排畫素：

eg:html

標題css

.title
還有一點就是vw還可以用來設定文字的大小，不過因為我不好把控就沒用過

還有很多都可以採用這個新出的布局方式，現在瀏覽器對它的支援已經很高了

css實現漸變效果

div style filter alpha opacity 30 finishopacity 0 style 1 progid dximagetransform.microsoft.gradient startcolorstr red,endcolorstr blue,gradienttype 1...

css 實現透明效果

filter alpha opacity 50 moz opacity 0.5 khtml opacity 0.5 opacity 0.5 說明 opacity 0.5 這是最重要的，因為它是css標準.該屬性支援firefox,safari和 opera.filter alpha opacity ...

CSS 實現打字效果

原文 css 實現打字效果 最近做專案的時候需要實現乙個字元逐個出現的打字效果，在網上一搜有個不錯的jquery外掛程式typed.js，效果很讚 具體用法可以看看專案位址，帶注釋的原始碼200多行，不算複雜 實現方法也不神奇，大多數人肯容易可以想到，用js逐個向容器內新增字元，作者做了很多字元的出...