css文字飛入效果

2022-03-07 20:10:34 字數 1854 閱讀 5683

一、頁面的主體布局

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>左右淡入的企業介紹

title

>

<

link

type

="text/css"

rel="stylesheet"

href

="css/animate.css"

/>

head

>

<

body

>

<

div

class

="company"

>

<

h2 class

="company_name"

>上海世茂集團企業招聘

h2>

<

h5 class

="company_introduce"

>世茂集團,是以房地產開發為主的國際化企業集群,房地產界領袖企業之一。

h5>

div>

body

>

html

>

上面就不用說了吧~~~~就四句話布局就完成了~~~我實在太懶了,乙個多餘的美觀性布局我都不願意寫qaq,最直接的**是為了方便我以後複製。

二、css樣式(主要是css3)

body

.company

/*定義乙個名字為lefteaseinanimate動畫,實現從頁面的左邊淡入頁面效果*/

@keyframes lefteaseinanimate /*在0%時設定文字在想x軸-2000px位移處(左邊),透明度為0,也就是看不見文字*/

100% /*在100%時設定文字在想x軸0px位移處,也就是原始布局的位置,透明度為1,也就是文字可以看見了*/

}@-webkit-keyframes lefteaseinanimate

100%

}@-o-keyframes lefteaseinanimate

100%

}@-ms-keyframes lefteaseinanimate

100%

}@-moz-keyframes lefteaseinanimate

100%

}.company_name

/*定義乙個名字為righteaseinanimate動畫,實現從頁面的右邊淡入頁面效果*/

@keyframes righteaseinanimate /*在0%時設定文字在想x軸2000px位移處(右邊),透明度為0,也就是看不見文字*/

100% /*在100%時設定文字在想x軸0px位移處,也就是原始布局的位置,透明度為1,也就是文字可以看見了*/

}@-webkit-keyframes righteaseinanimate

100%

}@-o-keyframes righteaseinanimate

100%

}@-ms-keyframes righteaseinanimate

100%

}@-moz-keyframes righteaseinanimate

100%

}.company_introduce

需要注意的是剛開始就要給body新增乙個overflow: hidden; 設定溢位隱藏,否則文字起始位移超過頁面大小就會在頁面下方出現橫的滾動條

js文字從左邊飛入效果

貼 之前,我們先講一下它的原理,我們使用setinterval,讓文字一開始置於螢幕看不到的位置,左右上下都可以,然後讓它的位置不斷移入到螢幕看得到的位置。下面上 html js if document.getelementbyid document.all var crossheader docu...

CSS 文字效果

1.1 自定義字型 這段文字使用的是徐靜蕾字型。這段文字使用的是預設字型。1.2 段落首字元下沉 縮排及特殊顯示 段落首字元下沉 縮排及特殊顯示 段落首字元下沉和15畫素的縮排 if 首字元不下沉 首字元英文小寫和懸掛縮排 6畫素 if 段落的首字元不下沉 首字母英文大寫 1.3 自定義文字選中樣式...

css文字效果

css3 中,text shadow屬性適用於文字陰影。您指定了水平陰影,垂直陰影,模糊的距離,以及陰影的顏色 text shadow 5px 5px 5px ff0000 水平位置 垂直位置 模糊距離 陰影顏色 如果某個單詞太長,不適合在乙個區域內,它擴充套件到外面 css3中,自動換行屬性允許您...