前言
在很多網(wǎng)站首頁介紹頁里,為了吸引用戶,暫留更長時間,使用了一些css3動畫的
示例效果
實現(xiàn)這個動畫原理
想要實現(xiàn)這個動畫,改變元素的寬度,結(jié)合動畫css3關(guān)鍵幀實現(xiàn)
具體代碼如下所示
<!DOCTYPE?html>
<html?lang="en">
??<head>
????<meta?charset="UTF-8"?/>
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge"?/>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"?/>
????<title>css3實現(xiàn)打字機(jī)效果</title>
<style>
.example-css3dayin?{
????????text-align:?center;
????????font-weight:?700;
????????font-size:?60px;
????????line-height:?79px;
????????background:?linear-gradient(?270deg,?rgba(198,?141,?255,?0.9)?8.92%,?#5685ff?46.17%,?#48d6ff?92.17%?);
????????-webkit-background-clip:?text;
????????-webkit-text-fill-color:?transparent;
????????background-clip:?text;
????????text-fill-color:?transparent;
????????white-space:?nowrap;
????????animation:?animateText?4.7s?steps(8)?infinite;
????????-webkit-animation:?animateText?4.7s?steps(8)?infinite;
}
@-webkit-keyframes?animateText?{
????????0%?{
????????????width:?0;
????????}
????????35%?{
????????????width:?8.1em;
????????}
????????75%?{
????????????width:?8.1em;
????????}
????????100%?{
????????????width:?0;
????????}
???}
????
????@keyframes?animateText?{
????????0%?{
????????????width:?0;
????????}
????????35%?{
????????????width:?8.1em;
????????}
????????75%?{
????????????width:?8.1em;
????????}
????????100%?{
????????????width:?0;
????????}
???}??????
????</style>
??</head>
??<body>
???????<p?class="example-css3dayin">AI智能，引領(lǐng)未來</p>
??</body>
</html>效果當(dāng)中的關(guān)鍵幀動畫
animation動畫通過設(shè)置多個節(jié)點(diǎn)來精確控制一個或者一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果；
相對過渡動畫，animation動畫可以實現(xiàn)更多變化，更多控制，實現(xiàn)自動播放等效果
制作animation動畫需要兩個步驟
第一步，需要先定義動畫，0%的時候我們一般建議什么也不要設(shè)置，默認(rèn)就是初始的樣式
@keyframes?動畫名稱?{
????0%?{
????????開始動畫
????}
????100%?{
????????結(jié)束動畫
????}
}第二步，定義了的動畫需要調(diào)用才能使用生效，哪一個盒子需要調(diào)用動畫就設(shè)置以下兩個必須的屬性
animation-name:?動畫名稱;
animation-duration:?持續(xù)時間（單位是s）例如上面的動畫
.example-css3dayin?{
????????//?上面省略
????????animation:?animateText?4.7s?steps(8)?infinite;
????????-webkit-animation:?animateText?4.7s?steps(8)?infinite;
}
@-webkit-keyframes?animateText?{
????????0%?{
????????????width:?0;
????????}
????????35%?{
????????????width:?8.1em;
????????}
????????75%?{
????????????width:?8.1em;
????????}
????????100%?{
????????????width:?0;
????????}
???}
????
????@keyframes?animateText?{
????????0%?{
????????????width:?0;
????????}
????????35%?{
????????????width:?8.1em;
????????}
????????75%?{
????????????width:?8.1em;
????????}
????????100%?{
????????????width:?0;
????????}
???}0%是動畫的開始，100%是動畫的完成，完成整個動畫過程的規(guī)則就是動畫序列；
動畫定義的是也可以用from和to來定義，的等同于0%到100%
@keyframes中規(guī)定某項css樣式，將當(dāng)前的樣式逐漸改為新的樣式的過程，稱之為動畫，我們可以改變?nèi)我獾臉邮?，改變?nèi)我獾拇螖?shù)
CSS3動畫常見屬性
@keyframes:規(guī)定動畫animation: 所有動畫屬性的簡寫屬性，除了animation-play-state屬性。animation-name:規(guī)定@keyframes動畫的名稱。（必須有）。animation-duration: 規(guī)定動畫完成一個周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。（必須有）。animation-timing-function: 規(guī)定動畫的速度曲線。默認(rèn)是 “ease”。animation-delay: 規(guī)定動畫何時開始。默認(rèn)是 0。必須寫單位s。animation-iteration-count: 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。循環(huán)是infinite；animation-direction: 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 “normal”。alternate逆向animation-play-state: 規(guī)定動畫是否正在運(yùn)行或暫停。默認(rèn)是 “running“,暫停是paused。animation-fill-mode: 規(guī)定對象動畫時間之外的狀態(tài)。保持現(xiàn)狀forwards，回到起始backwards
animation-timing-function
animation-timing-function:linear,動畫從頭到尾的速度是相同的。animation-timing-function:ease,默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。animation-timing-function:ease-in,動畫以低速開始。animation-timing-function:ease-out,動畫以低速結(jié)束。animation-timing-function:ease-in-out,動畫以低速開始和結(jié)束。animation-timing-function:steps(步數(shù)設(shè)置),讓動畫在規(guī)定的時間里幾步完成
CSS3動畫簡寫
animation:?動畫名稱??持續(xù)時間??運(yùn)動曲線???何時開始（延時）?播放次數(shù)??是否反向播放??動畫結(jié)束后的狀態(tài)
animation:?name?duration?timing-function?delay?iteration-count?direction?fill-mode
animation:?animateText?4.7s?steps(8)?infinite;注意
動畫簡寫屬性的時候，動畫名稱和動畫持續(xù)時間必須要書寫，其他屬性需要就書寫不需要就省略，如果書寫動畫延時必須書寫單位s，哪怕是0s也要書寫
持續(xù)時間和延時的時間有先后順序
多個動畫同時調(diào)用
如果一個元素需要同時調(diào)用多個動畫我們只需要用一個animation,不同的動畫用英文的逗號隔開
animation:?bear?.3s?steps(8)?infinite;
?animation:?move?1s?ease?forwards;
?//?可以合并到一起使用
?animation:?bear?.3s?steps(8)?infinite,?move?3s?ease?forwards;總結(jié)
css3動畫是一個非常強(qiáng)大的屬性,屬性值也特別多,很多動畫,看似很簡單,但是一寫就不會,還是要多模仿,多寫相關(guān)的動畫
看到了有趣的效果,就研究一下的,可以應(yīng)用到公司的產(chǎn)品和網(wǎng)站當(dāng)中去的
聊一聊最近幾年學(xué)歷大通脹的事情，以及大學(xué)幾年怎么樣可以節(jié)省不必要的開支
2023-06-15
告別紡織業(yè)，大齡半路出家，前端CSS領(lǐng)域大神—“大漠”的封神之路
2023-06-14
翟欣欣已被捕,正義也許會遲到,但不會缺席,大塊人心
2023-06-10
IT 男遭前妻敲詐勒索自殺，六年后一審宣判了
2023-06-10
職場中有哪些不成熟的表現(xiàn)
2023-06-07
這些高頻面試問題,求職者應(yīng)該怎么回答
2023-06-04
稚暉君剛拿了百度投資，估值被曝已超獨(dú)角獸
2023-06-01
關(guān)于職場中的面試,要是遇到這些問題時,應(yīng)該怎么回
2023-05-31文章來源：http://www.zghlxwxcb.cn/news/detail-576909.html
點(diǎn)擊左下角查看更多
文章來源地址http://www.zghlxwxcb.cn/news/detail-576909.html
到了這里，關(guān)于使用css3如何實現(xiàn)一個文字打印效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
