党的百年长廊——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.yinhuabbs.cn/data/att ... junfjz77psjxhf5.jpg); background-size:cover;">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://www.yinhuabbs.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
原来的图片失链了

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