溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
