黨的百年長廊——css動畫

寒冬殘荷

195400 發表于 2021-6-26 22:22
這樣吧，我給您看看我模仿的

        #pichold        {

老師，你這是大師級的！我是才在網上學了幾個CSS屬性，且是不甚了解。沒有基礎、人笨，加上人老癡呆沒記性，學起來很難！但為了刺激大腦，學不會也得學……

寒冬殘荷

195400 發表于 2021-6-26 22:22
這樣吧，我給您看看我模仿的

        #pichold        {

animation-play-state這個屬性沒想到

寒冬殘荷

195400 發表于 2021-6-26 22:24
注意全部播放完后不是倒回來而是從頭開始，這是和您帖子不同之處。

還有一點：鼠標放在圖片上時暫停移動。我在開始有延遲，是考慮到點開網頁之后馬上移動看不到第一張圖片的開頭部分。

195400

華妹 發表于 2021-6-26 23:02
animation-play-state這個屬性沒想到

原來帖子改的，這個屬性對于連續的畫片不要也行，如果是多個單張就是要的好。

寒冬殘荷

http://www.nujv.cn/data/att ... junfjz77psjxhf5.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... zl0zwngn03787nz.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... szsi55ssnnsclc2.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... tt2bxx2xtzle8ek.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... ktq7zg7g2yybydo.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... ny1nmspycy1slqz.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... j23d02j4x3ukqkz.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... bct67llspld7th0.jpg"); background-size:cover;">

http://www.nujv.cn/data/att ... lxqal111dcclila.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... j29z4n2saawbppt.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... 8ewnr6zhlina6gw.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... wvqoe9t9rwexoqk.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... 855men5n85hnznm.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... vzvvsj6xug09rzr.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... eqjdee4d9xqqce2.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... m46qm6mmqzormd1.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... z7zfljpa1rsajvb.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... cz2md3l3mcz8mmj.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... lintdlbklkyxbts.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... ihyyb7zlt5inqgn.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... z7nzxnb7qbbjjr7.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... 6yp9ejixkyy72yy.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... zc888b6983h8kzh.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... c0p0czsk6ckm0aa.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... fkwp1gnptw8ft8f.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... 1umwe6auphv7177.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... 8nb6pp9xp9bpbex.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... fzy16tfiy4zaiqo.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... js6wl06sjzldtp8.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... dlhwdwkqzw49jrb.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... 42irwwwz2zgjw87.jpg); background-size:cover;">

http://www.nujv.cn/data/att ... i9ns8i588ivm81s.jpg); background-size:cover;">

圖片來源：人民日報訂閱號　編輯制作：華妹

寒冬殘荷

圖片來源：人民日報訂閱號　編輯制作：華妹

195400

華妹 發表于 2021-6-27 20:32
#pichold        { /* 動畫div        */
height:540px;
width:49817.5px; /* 48335px + 1482.5px;        */

原來的圖片失鏈了

195400

華妹 發表于 2021-6-27 20:32
#pichold        { /* 動畫div        */
height:540px;
width:49817.5px; /* 48335px + 1482.5px;        */

動畫的定義原來是

1. @keyframes picMoveUp        { /* 定義動畫 */
   
2. from        {right:-48617.5px;} /* 動畫起點 */
   
3. to                {right:-282.5px;} /* 動畫終點 */
   
4. }

復制代碼

如果改成

1. @keyframes picMoveUp        { /* 定義動畫 */
   
2. from        {left: 0px;}       /* 動畫起點  第一張圖片左邊與框的左邊對齊   */
   
3. to                {left: -48335px;}  /* 動畫終點  最后一張圖片的右邊與框的左邊對齊，所有的圖片在框中都過了一遍   */
   
4. }

復制代碼

這樣可能更容易理解些。

寒冬殘荷

195400 發表于 2021-6-28 13:25
動畫的定義原來是
如果改成
這樣可能更容易理解些。

我的網速慢，從0開始，瀏覽器打開后我都沒能看到第一張圖的前面一截。

寒冬殘荷

195400 發表于 2021-6-28 13:17
原來的圖片失鏈了

那里要錢的，容量要錢，流量也要錢。