黨的百年長(zhǎng)廊——css動(dòng)畫(huà)

寒冬殘荷

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

        #pichold        {

老師，你這是大師級(jí)的！我是才在網(wǎng)上學(xué)了幾個(gè)CSS屬性，且是不甚了解。沒(méi)有基礎(chǔ)、人笨，加上人老癡呆沒(méi)記性，學(xué)起來(lái)很難！但為了刺激大腦，學(xué)不會(huì)也得學(xué)……

寒冬殘荷

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

        #pichold        {

animation-play-state這個(gè)屬性沒(méi)想到

寒冬殘荷

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

還有一點(diǎn)：鼠標(biāo)放在圖片上時(shí)暫停移動(dòng)。我在開(kāi)始有延遲，是考慮到點(diǎn)開(kāi)網(wǎng)頁(yè)之后馬上移動(dòng)看不到第一張圖片的開(kāi)頭部分。

195400

華妹 發(fā)表于 2021-6-26 23:02
animation-play-state這個(gè)屬性沒(méi)想到

原來(lái)帖子改的，這個(gè)屬性對(duì)于連續(xù)的畫(huà)片不要也行，如果是多個(gè)單張就是要的好。

寒冬殘荷

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;">

圖片來(lái)源：人民日?qǐng)?bào)訂閱號(hào)　編輯制作：華妹

寒冬殘荷

圖片來(lái)源：人民日?qǐng)?bào)訂閱號(hào)　編輯制作：華妹

195400

華妹 發(fā)表于 2021-6-27 20:32
#pichold        { /* 動(dòng)畫(huà)div        */
height:540px;
width:49817.5px; /* 48335px + 1482.5px;        */

原來(lái)的圖片失鏈了

195400

華妹 發(fā)表于 2021-6-27 20:32
#pichold        { /* 動(dòng)畫(huà)div        */
height:540px;
width:49817.5px; /* 48335px + 1482.5px;        */

動(dòng)畫(huà)的定義原來(lái)是

1. @keyframes picMoveUp        { /* 定義動(dòng)畫(huà) */
   
2. from        {right:-48617.5px;} /* 動(dòng)畫(huà)起點(diǎn) */
   
3. to                {right:-282.5px;} /* 動(dòng)畫(huà)終點(diǎn) */
   
4. }

復(fù)制代碼

如果改成

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

復(fù)制代碼

這樣可能更容易理解些。

寒冬殘荷

195400 發(fā)表于 2021-6-28 13:25
動(dòng)畫(huà)的定義原來(lái)是
如果改成
這樣可能更容易理解些。

我的網(wǎng)速慢，從0開(kāi)始，瀏覽器打開(kāi)后我都沒(méi)能看到第一張圖的前面一截。

寒冬殘荷

195400 發(fā)表于 2021-6-28 13:17
原來(lái)的圖片失鏈了

那里要錢(qián)的，容量要錢(qián)，流量也要錢(qián)。