這篇文章將為大家詳細講解有關(guān)CSS3中怎么控制HTML元素動畫效果,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
創(chuàng)新互聯(lián)服務(wù)緊隨時代發(fā)展步伐,進行技術(shù)革新和技術(shù)進步,經(jīng)過十余年的發(fā)展和積累,已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實施團隊以及高素質(zhì)售后服務(wù)人員,并且完全形成了一套成熟的業(yè)務(wù)流程,能夠完全依照客戶要求對網(wǎng)站進行網(wǎng)站設(shè)計制作、做網(wǎng)站、建設(shè)、維護、更新和改版,實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的,并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。
1.對元素transform的控制
代碼如下:
<head> <style> .showbox{ float: left; margin:4em 1em; width:100px; height:60px; borer:2px solid green; background-color:#000; text-align:center; -webkit-transition: 1s ease-in-out; transition:1s ease-in-out; } .sliderright:hover{ -webkit-transform:translate(30em, 0); transform:translate(30em, 0); } </style> </head> <body> <div class='showbox sliderright'> </div> </body>
CSS3中,元素可以具有如下的transform-control屬性:
-webkit-transform: translate(3em,0); -webkit-transform: rotate(30deg); -webkit-transform: scale(1.5);
通過恰當?shù)淖儞Q,最終可以將元素的位置變化成為我們需要的效果。
2.CSS3的動畫屬性
CSS3中元素的所有均由下面的屬性控制
代碼如下:
-webkit-transition: 1s ease-in-out;
實際上,這個css屬性控制了在元素的style發(fā)生變化的時候應(yīng)該怎樣改變那些數(shù)值,一些可以連續(xù)變化的style,諸如opacity,color,width等等都可以在這樣的屬性控制下進行動畫
3.動畫的多時間點控制
我們可以逐點控制動畫,放上另一個例子:
代碼如下:
<head> <style> .box{ position:relative; width:100px; height:100px; left:0; top:0; background:blue; -webkit-transition-property: width, height, left, top, background, -webkit-transform; -webkit-transition-duration: 1s, 1s, 2s, 2s, 1s, 1s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-out, ease-in, linear, ease-in-out; -webkit-transition-delay:1s, 1s, 0, 0, 0, 1s; } .box:hover{ width:50px; height:50px; left:150px; top:150px; background:red; -webkit-transform:rotate(360deg); } </style> </head> <body> <div style='height:250px;width:250px;background:grey'> <div class='box'> </div> </div> </body>
在上面的例子中,-webkit-transition-property控制了動畫需要控制那些style屬性,duration和delay控制時間節(jié)點,timeing function控制了是不是需要淡入淡出的效果。
4.如何讓一個元素的hover動作觸發(fā)另一個元素的動畫?
我們可以使用CSS屬性的一些鏈接符號,如下面的例子中,使用~號,在label1的hover動作觸發(fā)的時候,會影響到label2,然后觸發(fā)label2的動畫
<head> <style> .box1{ position:absolute; background:red; width:100px; height:100px; top:0; left:0; } .box1:hover ~ .box2{ left:500px; } .box2{ position:absolute; width:100px; height:100px; left:120px; top:0; background:blue; -webkit-transition: 1s ease-in-out; } </style> </head> <body> <div style='height:100px;width:400px;background:grey'> <div class='box1'> </div> <div class='box2'> </div> </div> </body>
關(guān)于CSS3中怎么控制HTML元素動畫效果就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
當前標題:CSS3中怎么控制HTML元素動畫效果
網(wǎng)站URL:http://bm7419.com/article8/pcghop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、云服務(wù)器、移動網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站改版、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)