                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實現(xiàn)帶預(yù)覽圖幻燈片效果

那個文字動畫是怎么觸發(fā)的

Mr君

2016-08-31

源自：JS+CSS3實現(xiàn)帶預(yù)覽圖幻燈片效果 3-3

關(guān)注問題我要回答

868

操作

收起

2 回答

Mr君提問者
2016-11-20

謝謝喲

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

stone310
2016-09-06

先將文字安排好初始樣式（初始位置），再添加個結(jié)束樣式（最終位置），再統(tǒng)一用css3的transition觸發(fā)，

我這里寫了個小例子，只需要對class名進行更改就可以出現(xiàn)動畫效果

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<style>
????????.div?.a{margin-top:15px}
????????.div?.b{margin-top:40px}
????????.div?.a,
????????.div?.b{transition:all?.8s}
????????.div-end?.a,
????????.div-end?.b{margin-top:0px;transition:all?.8s}
????</style>
</head>
<body>
<div?class="div">?????//這里只需要改成div-end就會出現(xiàn)動畫效果
<div?class="a">HELLO</div>
<div?class="b">HERE</div>
</div>
</body>
</html>