相信大家都曾在網站中看到過中效果,一打開頁面,無論是文字還是圖片,都隨著規定時間的而變化,今天我們將介紹如何透過用純CSS來實現這種效果,下面一起來看看。
大家可能常常會看到酷炫的網站
在這類網站中能看到,一打開頁面,無論是文字還是圖片,都隨著規定時間的而變化。原理很簡單,主要用到CSS中animation屬性。
接下來,我以我目前的工程項目為例,實現文字和圖片的動畫效果。
HTML程式碼編寫:
複製程式碼
程式碼如下:
<section class="rw-wrapper"> <span class="span-title">文字题目</span> <h2 class="rw-sentence"> </h2> </section>
目前大體的框架已經寫好,包含一個section標籤,span(根據喜好添加),h2標籤。接下來在其中加入文字程式碼。將程式碼放在h2中。
複製程式碼
程式碼如下:
<p class="rw-words rw-words-1"> <span>内容1</span> <span>内容2</span> ... </p>
第一種文字動畫HTML。
複製程式碼
程式碼如下:
<p class="rw-words rw-words-2"> <span>内容1</span> ... </p>
第二種文字動畫HTML。
複製程式碼
程式碼如下:
//同理 <p class="rw-words rw-words-3"> <span><img src="图片路径" width="XX" height="XX"></span> ... </p>
圖片變換效果,如上GIF的展示。圖片從右滑動並更換。
ok,至此HTML程式碼搞定,現在來實現最核心的部分:CSS設定動畫及字體樣式。
CSS程式碼寫
#複製程式碼
程式碼如下:
.rw-words{ -webkit-perspective:800px; -moz-perspective:800px; -o-perspective:800px; -ms-perspactive:800px; perspactive:800px; }
這裡順帶一講,perspective 屬性定義3D 元素距視圖的距離,以像素計。當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。數字800px代表元素距離視圖的距離。 -moz代表firefox瀏覽器私有屬性,-ms代表IE瀏覽器私有屬性,-webkit代表chrome、safari私有屬性,-o代表opera瀏覽器私有屬性.
##複製程式碼
程式碼如下:.rw-words span{ white-space:nowrap; //文字不允许换行 overflow:hidden; }
複製程式碼
程式碼如下:.rw-words-1 span{ -webkit-animation: rotateWordsFirst 10s linear infinite 0s; -o-animation: rotateWordsFirst 10s linear infinite 0s; -moz-animation: rotateWordsFirst 10s linear infinite 0s; -ms-animation: rotateWordsFirst 10s linear infinite 0s; animation:rotateWordsFirst 10s linear infinite 0s; }
關於animation語法:
複製程式碼
程式碼如下:animation: name duration timing-function delay iteration-count direction;
複製程式碼
程式碼如下:.rw-words-2 span{ -webkit-animation: rotateWordsFirst 10s ease-in infinite 0s; -o-animation: rotateWordsFirst 10s ease-in infinite 0s; -moz-animation: rotateWordsFirst 10s ease-in infinite 0s; -ms-animation: rotateWordsFirst 10s ease-in infinite 0s; animation:rotateWordsFirst 10s ease-in infinite 0s; }
複製程式碼
程式碼如下:.rw-words span:nth-child(1){ -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; }
複製程式碼
程式碼如下:.rw-words span:nth-child(n) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } ...
複製程式碼
程式碼如下:@-webkit-keyframes rotateWordsFirst/second { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;} //此属性查看animation 5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;} 17% { opacity: 1; } //设置不透明级别 20% { opacity: 0; } 100% { opacity: 0; } }
接著寫出各瀏覽器的適配,如-o,-moz,-ms等。
除了animation屬性,各位還可以試試transform屬性的使用,可以實現文字及其圖像的旋轉,縮放等效果,以上就是利用純CSS實現動態的文字效果的全部內容,希望能對大家學習使用CSS有幫助。
相關推薦:
以上是利用純CSS實現動態的文字效果實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!