论坛 › 【代码图腾】 › 党的百年长廊——css动画

寒冬残荷 发表于 2021-6-24 21:51

党的百年长廊——css动画

<style type="text/css">
#pichold        { /* 动画div        */
height:540px;
width:49817.5px; /* 48335px + 1482.5px;        */
position:absolute;
animation: picMoveUp 350s linear infinite;
animation-delay :3s ; /* 动画延迟3秒        */
border: 1px dotted red; /* 边框：粗1、虚线、红色 */
}
@keyframes picMoveUp        { /* 定义动画 */
from        {right:-48617.5px;} /* 动画起点 */
to                {right:-282.5px;} /* 动画终点 */
}
#pichold img        {
height:540px;
float:left;
}
#slideframe        { /* 装动画div的div        */
width:98%; /* 宽1000px         */
height:542px; /* 高540px         */
overflow:hidden; /* 禁止溢出         */
position:relative; /* 相对位置         */
margin: 0px; /* 外边距：上20、右0、下50、左0         */
border:12px brown groove; /* 边框：粗12、棕色、凹线        */
}
#pichold:hover        { /*暂停动画。CSS的 :hover 选择器是鼠标指针浮动在元素上后执行选择器里的指令。*/
animation-play-state: paused;
}
</style>
<div style="align-content: center; position: relative; " align="center">
<div id="slideframe">
<div id="pichold">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211032sjunfjz77psjxhf5.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211032uzl0zwngn03787nz.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211032qszsi55ssnnsclc2.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033ett2bxx2xtzle8ek.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033lktq7zg7g2yybydo.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033nny1nmspycy1slqz.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033wj23d02j4x3ukqkz.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159tbct67llspld7th0.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159nlxqal111dcclila.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159hj29z4n2saawbppt.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159i8ewnr6zhlina6gw.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159twvqoe9t9rwexoqk.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200d855men5n85hnznm.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200dvzvvsj6xug09rzr.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200deqjdee4d9xqqce2.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200ym46qm6mmqzormd1.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200pz7zfljpa1rsajvb.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200qcz2md3l3mcz8mmj.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201wlintdlbklkyxbts.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201gihyyb7zlt5inqgn.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201ez7nzxnb7qbbjjr7.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201n6yp9ejixkyy72yy.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201azc888b6983h8kzh.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201lc0p0czsk6ckm0aa.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202afkwp1gnptw8ft8f.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201v1umwe6auphv7177.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202c8nb6pp9xp9bpbex.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202ifzy16tfiy4zaiqo.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202ejs6wl06sjzldtp8.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212203ddlhwdwkqzw49jrb.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202w42irwwwz2zgjw87.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202pi9ns8i588ivm81s.jpg">
<img src="http://www.yinhuabbs.cn/data/attachment/album/202106/26/211032sjunfjz77psjxhf5.jpg">
</div>
</div>
<div style="MARGIN-TOP: 50px; font-size : 26pt; font-family : 楷体; font-weight : bold; text-align : center;color : #FF4A20; width:95%; height:90px;" align="center">图片来源：人民日报订阅号　编辑制作：华妹</div>
<audio src="http://url.amp3a.com/kuwo.php/2288403.mp3" loop="loop" autoplay="autoplay"></audio>
</div>

雄鹰翱翔 发表于 2021-6-26 05:05

欣赏您的精美佳作，赞一个！

195400 发表于 2021-6-26 09:44

http://www.yinhuabbs.cn/data/attachment/forum/202010/12/172524vwyfy603w3z01f6x.gif

195400 发表于 2021-6-26 09:47

播放结束后重新从头开始播放会好些吧。

195400 发表于 2021-6-26 13:16

很奇怪，在iPad和iphone上居然反着滚动

寒冬残荷 发表于 2021-6-26 22:05

雄鹰翱翔 发表于 2021-6-26 05:05
欣赏您的精美佳作，赞一个！

感谢版主的鼓励和支持！

寒冬残荷 发表于 2021-6-26 22:08

195400 发表于 2021-6-26 13:16
很奇怪，在iPad和iphone上居然反着滚动

应该是ios系统的不同吧？我在手机上浏览和电脑上的一样。

寒冬残荷 发表于 2021-6-26 22:15

195400 发表于 2021-6-26 09:47
播放结束后重新从头开始播放会好些吧。

不会呀！:lol。现在这样我还是折腾了很久才得的，动画的起始位置改了很多次。原是用img标签放图，在我的个人空间测试不得，在个人空间那里，img标签的图片宽度大于720px的系统都改为720px。论坛这里如何不知道？为保险起见，我就用div背景（在个人空间背景图大小不限制）。

195400 发表于 2021-6-26 22:22

华妹 发表于 2021-6-26 22:15
不会呀！。现在这样我还是折腾了很久才得的，动画的起始位置改了很多次。原是用img标签放图，在我的 ...

这样吧，我给您看看我模仿的
<style type="text/css">
        #pichold        {
                height:540px;
                width:49817.5px; /* 48335px + 1482.5px;        */
                position:absolute;
                animation: picMoveUp 360s linear infinite;
                border:thin dotted red;               
        }
       
        #pichold img        {
                height:540px;
                float:left;
        }
       
        #slideframe        {
                width:1200px;
                height:540px;
                overflow:hidden;
                position:relative;
                margin:100px 0 32px -200px;
                border:12px brown groove;
        }
       
        #pichold:hover        {
                animation-play-state: paused;
        }
        @keyframes picMoveUp        {                                                                                                       
                from        {left:0px;}                                                                                                       
                to                {left:-48335px;}                                                                                                                 
        }

</style>

<div id="slideframe">
<div id="pichold">
<img src="https://637236.freep.cn/637236/图片/红色/62301.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62302.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62303.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62304.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62305.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62306.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62307.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62308.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62309.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62310.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62311.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62312.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62313.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62314.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62315.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62316.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62317.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62318.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62319.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62320.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62321.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62322.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62323.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62324.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62325.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62326.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62327.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62328.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62329.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62330.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62331.jpg">
<img src="https://637236.freep.cn/637236/图片/红色/62332.jpg">

<img src="https://637236.freep.cn/637236/图片/红色/62301.jpg">
</div>
</div>

195400 发表于 2021-6-26 22:24

注意全部播放完后不是倒回来而是从头开始，这是和您帖子不同之处。

查看完整版本: 党的百年长廊——css动画