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

195400 发表于 2021-6-26 22:22
这样吧，我给您看看我模仿的

        #pichold        {


老师，你这是大师级的！我是才在网上学了几个CSS属性，且是不甚了解。没有基础、人笨，加上人老痴呆没记性，学起来很难！但为了刺激大脑，学不会也得学……

寒冬残荷 发表于 2021-6-26 23:02

195400 发表于 2021-6-26 22:22
这样吧，我给您看看我模仿的

        #pichold        {


animation-play-state这个属性没想到:lol

寒冬残荷 发表于 2021-6-26 23:09

195400 发表于 2021-6-26 22:24
注意全部播放完后不是倒回来而是从头开始，这是和您帖子不同之处。

还有一点：鼠标放在图片上时暂停移动。我在开始有延迟，是考虑到点开网页之后马上移动看不到第一张图片的开头部分。:lol

195400 发表于 2021-6-26 23:17

华妹 发表于 2021-6-26 23:02
animation-play-state这个属性没想到

原来帖子改的，这个属性对于连续的画片不要也行，如果是多个单张就是要的好。

寒冬残荷 发表于 2021-6-27 20:31

<style type="text/css">
#div1{ /* 设置动画div的参数(id选择器) */
width:48330px; /* 动画div总宽度，须大于内装的div的总宽度 */
height:540px;
background:#ffffff;
top:0px;
left:0px;
bottom : 0px ;
padding : 0px;
position: absolute;
animation: mymove 360s linear infinite ;
animation-delay :3s ;
}
@keyframes mymove
{
0% {left:20px;}
100% {
left: -47080px; }/*等于总宽度减最后一个div的宽度 */
}
@-webkit-keyframes mymove/* Safari and Chrome */
{
0% {left:20px;}
100% {left: -47680px; }
}
</style>
<div style="align-content: center; position: relative; " align="center">
<div align="center" style="left: 0px; top: 10px; width: 99%; height: 540px; text-align: center; overflow: hidden; position: relative; border-width : 5px; border-color : #FF0000;border-style : double;">
<div id="div1">
<div style="float: left;width:1483px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/211032sjunfjz77psjxhf5.jpg); background-size:cover;">
</div>
<div style="float: left;width:1483px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/211032uzl0zwngn03787nz.jpg); background-size:cover;">
</div>
<div style="float: left;width:1485px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/211032qszsi55ssnnsclc2.jpg); background-size:cover;">
</div>
<div style="float: left;width:1534px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033ett2bxx2xtzle8ek.jpg); background-size:cover;">
</div>
<div style="float: left;width:1514px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033lktq7zg7g2yybydo.jpg); background-size:cover;">
</div>
<div style="float: left;width:1475px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033nny1nmspycy1slqz.jpg); background-size:cover;">
</div>
<div style="float: left;width:1457px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/211033wj23d02j4x3ukqkz.jpg); background-size:cover;">
</div>
<div style="float: left;width:1520px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159tbct67llspld7th0.jpg"); background-size:cover;">
</div>
<div style="float: left;width:1482px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159nlxqal111dcclila.jpg); background-size:cover;">
</div>
<div style="float: left;width:1628px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159hj29z4n2saawbppt.jpg); background-size:cover;">
</div>
<div style="float: left;width:1595px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159i8ewnr6zhlina6gw.jpg); background-size:cover;">
</div>
<div style="float: left;width:1639px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212159twvqoe9t9rwexoqk.jpg); background-size:cover;">
</div>
<div style="float: left;width:1482px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200d855men5n85hnznm.jpg); background-size:cover;">
</div>
<div style="float: left;width:1519px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200dvzvvsj6xug09rzr.jpg); background-size:cover;">
</div>
<div style="float: left;width:1482px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200deqjdee4d9xqqce2.jpg); background-size:cover;">
</div>
<div style="float: left;width:1643px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200ym46qm6mmqzormd1.jpg); background-size:cover;">
</div>
<div style="float: left;width:1510px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200pz7zfljpa1rsajvb.jpg); background-size:cover;">
</div>
<div style="float: left;width:1482px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212200qcz2md3l3mcz8mmj.jpg); background-size:cover;">
</div>
<div style="float: left;width:1703px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201wlintdlbklkyxbts.jpg); background-size:cover;">
</div>
<div style="float: left;width:1477px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201gihyyb7zlt5inqgn.jpg); background-size:cover;">
</div>
<div style="float: left;width:1278px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201ez7nzxnb7qbbjjr7.jpg); background-size:cover;">
</div>
<div style="float: left;width:1580px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201n6yp9ejixkyy72yy.jpg); background-size:cover;">
</div>
<div style="float: left;width:1208px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201azc888b6983h8kzh.jpg); background-size:cover;">
</div>
<div style="float: left;width:1718px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201lc0p0czsk6ckm0aa.jpg); background-size:cover;">
</div>
<div style="float: left;width:1544px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202afkwp1gnptw8ft8f.jpg); background-size:cover;">
</div>
<div style="float: left;width:1217px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212201v1umwe6auphv7177.jpg); background-size:cover;">
</div>
<div style="float: left;width:1551px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202c8nb6pp9xp9bpbex.jpg); background-size:cover;">
</div>
<div style="float: left;width:1617px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202ifzy16tfiy4zaiqo.jpg); background-size:cover;">
</div>
<div style="float: left;width:1390px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202ejs6wl06sjzldtp8.jpg); background-size:cover;">
</div>
<div style="float: left;width:1482px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212203ddlhwdwkqzw49jrb.jpg); background-size:cover;">
</div>
<div style="float: left;width:1482px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202w42irwwwz2zgjw87.jpg); background-size:cover;">
</div>
<div style="float: left;width:1650px;height:540px;overflow: hidden; background-image:url(http://www.yinhuabbs.cn/data/attachment/album/202106/26/212202pi9ns8i588ivm81s.jpg); background-size:cover;">
</div>
</div></div>
<div style="margin-top: 30px; font-size : 26pt; font-family : 楷体; font-weight : bold; text-align: center; color: #FF4A20; width:95%; height:90px; position: relative; " align="center">图片来源：人民日报订阅号　编辑制作：华妹</div>
<audio src="http://url.amp3a.com/kuwo.php/2288403.mp3" loop="loop" autoplay="autoplay"></audio>
</div>
<br><br><br><br><br>

寒冬残荷 发表于 2021-6-27 20:32

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

</div>

195400 发表于 2021-6-28 13:17

华妹 发表于 2021-6-27 20:32
#pichold        { /* 动画div        */
height:540px;
width:49817.5px; /* 48335px + 1482.5px;        */


原来的图片失链了

195400 发表于 2021-6-28 13:25

华妹 发表于 2021-6-27 20:32
#pichold        { /* 动画div        */
height:540px;
width:49817.5px; /* 48335px + 1482.5px;        */


动画的定义原来是
@keyframes picMoveUp        { /* 定义动画 */
from        {right:-48617.5px;} /* 动画起点 */
to                {right:-282.5px;} /* 动画终点 */
}如果改成
@keyframes picMoveUp        { /* 定义动画 */
from        {left: 0px;}       /* 动画起点第一张图片左边与框的左边对齐   */
to                {left: -48335px;}/* 动画终点最后一张图片的右边与框的左边对齐，所有的图片在框中都过了一遍   */
}这样可能更容易理解些。



寒冬残荷 发表于 2021-6-28 17:59

195400 发表于 2021-6-28 13:25
动画的定义原来是
如果改成
这样可能更容易理解些。

我的网速慢，从0开始，浏览器打开后我都没能看到第一张图的前面一截。:lol

寒冬残荷 发表于 2021-6-28 18:00

195400 发表于 2021-6-28 13:17
原来的图片失链了

那里要钱的，容量要钱，流量也要钱。:lol
页: 1 [2] 3 4
查看完整版本: 党的百年长廊——css动画