溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“CSS3如何控制HTML元素動畫效果”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS3如何控制HTML元素動畫效果”文章吧。
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);
通過恰當的變換，最終可以將元素的位置變化成為我們需要的效果。
2.CSS3的動畫屬性
CSS3中元素的所有均由下面的屬性控制
代碼如下:
-webkit-transition: 1s ease-in-out;
實際上，這個css屬性控制了在元素的style發生變化的時候應該怎樣改變那些數值，一些可以連續變化的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控制時間節點，timeing function控制了是不是需要淡入淡出的效果。
4.如何讓一個元素的hover動作觸發另一個元素的動畫？
我們可以使用CSS屬性的一些鏈接符號，如下面的例子中，使用~號，在label1的hover動作觸發的時候，會影響到label2，然后觸發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>以上就是關于“CSS3如何控制HTML元素動畫效果”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
