寒冬残荷 发表于 2021-8-2 17:09

《红楼梦》之十二金钗——纯CSS代码轮播图片练习


<DIV style="WIDTH: 100%; height:1600px; POSITION: relative; margin:0px auto;align-content: center; text-align:center;left:0px;">
<iframe frameborder=0 style="WIDTH:1020px; height:1600px; " marginheight=0 marginwidth=0 scrolling=no src="http://tanglianhua.3vcm.vip/yinhua/shierjincha.html"></iframe>
<audio autoplay="autoplay" loop="loop" src="http://url.amp3a.com/kuwo.php/169254259.mp3.mp3" type="audio/mpeg"></audio>
</DIV>

雄鹰翱翔 发表于 2021-8-2 18:05

欣赏老师精美佳作，赞一个！

195400 发表于 2021-8-2 18:11

http://www.yinhuabbs.cn/data/attachment/forum/201804/25/164432varsaks1nnncgkz4.gif


195400 发表于 2021-8-2 18:21

吹毛求疵来一下:L


.
1. 下面的文字是有意放在框外还是 ？
2.
/*鼠标放在图片上时动画暂停。*/
#picdiv:hover{animation-play-state: paused;}
这个会影响画面的移动，如果画面移到一半鼠标放上去就显示两个半边画片

3.
0%{left:0px;}
2%{left:0px;}
4%{left:-640px;}
6%{left:-640px;}
......可写作0%，2%{left:0px;}
4% ，6% {left:-640px;}
…………


寒冬残荷 发表于 2021-8-2 19:40

195400 发表于 2021-8-2 18:21
吹毛求疵来一下




谢谢老师的指导！1、鼠标放图片上暂停，是想认真看某一个美女。:lol2、最后一行字超出边框，那我就不得其解了，因为在我的浏览器上位置刚好合适。
3、两个时间可以写在一起，这个我是不知道，我以为只能一个一个的写。


寒冬残荷 发表于 2021-8-2 19:46

雄鹰翱翔 发表于 2021-8-2 18:05
欣赏老师精美佳作，赞一个！

感谢版主的支持和鼓励！遥祝夏安！

195400 发表于 2021-8-2 21:47

寒冬残荷 发表于 2021-8-2 19:40
谢谢老师的指导！1、鼠标放图片上暂停，是想认真看某一个美女。2、最后一行字超出边框，那我就不得其 ...

确实有些奇怪，用你的代码直接贴在发帖框里最后一行是在框里的，但你的那帖无论是哪种浏览器都是出框的。

三个浏览器（chrome、edge、firefox）都是一样的结果。

195400 发表于 2021-8-3 20:31

本帖最后由 195400 于 2021-8-4 05:33 编辑 <br /><br /><style type="text/css">
/*外边框div */
#wbkdiv0{
width:1000px;
height:1500px;
position:relative;
text-align: center;
background-image:url(https://z3.ax1x.com/2021/07/31/Wv2qFP.jpg);
border:9px #800000 groove;
}
/*视窗div */
#scdiv0{
width:640px;
height:640px;
overflow:hidden;
margin:24px auto;
border: 9px solid #ffb6c1;
border-radius: 50%;
background-color : #ffffff;
margin-top:600px;
}
/*装所有图片移动的动画div，总宽度640*12＝7680，每张图片的高度640，一周期72秒，线性移动，滞迟2秒，无限循环，来回运动*/
#picdiv0{
width:7680px;
height:640px;
animation: runing0 36s linear infinite alternate;
position: relative;
left:0px;
}
/*鼠标放在图片上时动画暂停。*/
#picdiv0:hover{animation-play-state: paused;}
/* runing0动画定义-图片左右移动*/
@keyframes runing0 {
0%, 7%                        {left:0px;}
8.33%, 15.33%        {left:-640px;}
16.67%, 23.67%        {left:-1280px;}
25%, 32%                 {left:-1920px;}
33.33%, 40.33%        {left:-2560px;}
41.67%, 48.67%        {left:-3200px;}
50%, 57%                        {left:-3840px;}
58.33%, 65.33%        {left:-4480px;}
66.67%, 73.67%        {left:-5120px;}
75%, 82%                        {left:-5760px;}
83.33%, 90.33%        {left:-6400px;}
91.67%, 100%                {left:-7040px;}
}
/*img元素的样式。float:left 表示图片从左至右排列， */
#picdiv0 > img {
float:left;
height:640px;
width:640px;
margin-right:0px;
border-radius: 50%;
}
/*放字的div样式。*/
#zidiv0{
height: 100px;
margin:10px auto;
font-family:微软雅黑;
font-size : 5em;
text-align : center;
margin-top:32px;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:2px red;
}

#wzp                {
font-family:楷体;
font-size:22pt;
margin:10px auto;
color: blue;
text-align:center;
}

/*放花鸟的动画div样式。*/
#niao0{
width:253px;
height:180px;
position: absolute;
animation: niao01 30s linear infinite alternate;
animation-delay: 5s;
left: -20px;
top:650px;
background-image:url(https://z3.ax1x.com/2021/07/31/WvH7PH.png);
}

@keyframes niao01 {
0%        {left:-20px;top:650px;}
5%        {left:-20px; top:650px;}
10%        {left:0px; top:700px; transform:rotate(45deg);}
20%        {left:0px; top:700px;}
25%        {left: 500px; top:750px;}
30%        {left: 500px; top:750px;}
35%        {left: 0px; top:800px; transform:rotate(90deg);}
40%        {left: 0px; top:800px;}
45%        {left: 410px; top:850px;}
55%        {left: 410px; top:850px;}
60%        {left: 700px; top:520px; transform:rotate(180deg);}
65%        {left: 700px; top:520px;}
70%        {left: 0px; top:620px;}
75%        {left: 0px; top:620px;}
80%        {left:640px; top:420px;}
85%        {left:640px; top:420px;}
90%        {left: 0px; top:520px;}
100%{left:0px; top:520px;}
}
</style>
<div id="wbkdiv0">
<div id="scdiv0">
<div id="picdiv0" >
<img src="https://z3.ax1x.com/2021/07/31/WvDEtg.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvDepj.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvDAAS.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvDF78.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvDi0f.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvDPnP.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvD9Xt.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvBXkD.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvBzpd.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvBvfH.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvBjte.jpg">
<img src="https://z3.ax1x.com/2021/07/31/WvDS1A.jpg">
</div>
</div>
<div id="niao0"></div>
<div id="zidiv0">《红楼梦》之十二金钗</div>
<p id="wzp">素材/网络&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;剪辑制作/寒冬残荷</p>

</div>

lrctz 发表于 2021-8-4 14:21

问好！太漂亮了
页: [1]
查看完整版本: 《红楼梦》之十二金钗——纯CSS代码轮播图片练习