动图《游戏人物》----仿“前面喜欢的”作品

红枫发表于 2021-7-18 08:44

本帖最后由红枫于 2021-7-22 09:43 编辑 <br /><br /><DIV style="POSITION: relative; WIDTH:1600px; TOP: 0px; LEFT: -380px">

<IFRAME height=850 marginHeight=0 src="http://pan.yinhuabbs.cn/view.php/3799ae20748ec72d2f2b162e04909227.html" frameBorder=0 width=1600 marginWidth=0 scrolling=no></IFRAME>

<DIV style="POSITION: absolute;TOP:340px; LEFT: -50px"><img src="https://z3.ax1x.com/2021/07/22/WwImB4.gif" WIDTH=580px;Height=580px; >
</DIV>

<DIV style="POSITION: absolute;TOP:535px; LEFT: 180px"><img src="https://z3.ax1x.com/2021/07/22/WwfZoq.gif" WIDTH=380px;Height=380px; >
</DIV>

<DIV style="POSITION: absolute;TOP:430px; LEFT: 1250px"><img src="https://z3.ax1x.com/2021/07/22/WwTpYn.gif" WIDTH=400px;Height=400px; >
</DIV>

<DIV style="POSITION: absolute;TOP:515px; LEFT: 1000px"><img src="https://z3.ax1x.com/2021/07/22/WwIvP1.gif" WIDTH=600px;Height=600px; >
</DIV>

</DIV>

<audio style="width:0px;height:0px;" controls="controls" autoplay="autoplay" loop="loop" src="http://m10.music.126.net/20210718091503/e6f32951ea671a97dc7b71e8da2e7108/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3049298787/d7e6/2845/8a84/e89b6df6cdfd4fa3c99bb3cfd0828d6d.mp3" type="audio/mpeg"></audio>

195400 发表于 2021-7-18 10:12

我也来借用一下
<style type="text/css">
#outframe {
width:1280px;height:640px;
position:relative;overflow:hidden;
margin:160px 0 32px -200px;
background-color:#ccf;
border-radius:32px;
background-image:url(http://pan.yinhuabbs.cn/view.php/0f963736a89f2d4716c121a37e537f7a.jpg);
background-size:cover;
}
#picHolder    {
width:144px;height:400px;
position:absolute;top:240px;left:720px;
/*声明一个3D空间*/
transform-style: preserve-3d;
transform: rotateX(-0.5deg);
}
#picHolder img    {
width:128px;height:150px;
position: absolute;
overflow:hidden;
-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5)));
}
:root {
   --turn: 360deg / 6;
}
#picHolder img:nth-child(1){
transform: rotateY(0deg) translateY(160px) translateZ(280px);
animation: animateP0 30s linear infinite;
}
#picHolder img:nth-child(2){
transform: rotateY(-60deg) translateZ(280px);
animation: animateP1 30s linear infinite;
}
#picHolder img:nth-child(3){
transform: rotateY(-120deg) translateZ(280px);
animation: animateP2 30s linear infinite;
}
#picHolder img:nth-child(4){
transform: rotateY(-180deg) translateZ(280px);
animation: animateP3 30s linearinfinite;
}
#picHolder img:nth-child(5){
transform: rotateY(-240deg) translateZ(280px);
animation: animateP4 30s linearinfinite;
}
#picHolder img:nth-child(6){
transform: rotateY(-300deg) translateZ(280px);
animation: animateP5 30s linear infinite;
}

/*定义一个动画*/
@keyframes animateP5 {
0% , 12% { transform: rotateY(-300deg) translateZ(280px) scale(1.0); }
12.1% , 12.3% { transform: rotateY(60deg) translateZ(280px) scale(1.0); }
16.67% ,28.67% { transform: rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
33.34%, 45.34% { transform:rotateY(-60deg) translateZ(280px) scale(1.0); }
50%, 62% { transform:rotateY(-120deg) translateZ(280px) scale(0.5); }
66.67% , 78.67% { transform:rotateY(-180deg) translateZ(280px) scale(0.2); }
83.34% , 95.34% { transform:rotateY(-240deg) translateZ(280px) scale(0.5); }

}
@keyframes animateP4 {
0% , 12% { transform:rotateY(-240deg) translateZ(280px) scale(0.5); }
16.67% ,28.67% { transform:rotateY(-300deg) translateZ(280px) scale(1.0); }
28.77% ,28.97% { transform:rotateY(60deg) translateZ(280px) scale(1.0); }
33.34%, 45.34% { transform:rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
50%, 63% { transform:rotateY(-60deg) translateZ(280px) scale(1.0); }
66.67% , 78.67% { transform:rotateY(-120deg) translateZ(280px) scale(0.5); }
83.34% , 95.34% { transform:rotateY(-180deg) translateZ(280px) scale(0.2); }
}

@keyframes animateP3 {
0% , 12% { transform:rotateY(-180deg) translateZ(280px) scale(0.2); }
16.67% ,28.67% { transform:rotateY(-240deg) translateZ(280px) scale(0.5); }
33.34%, 45.34% { transform:rotateY(-300deg) translateZ(280px) scale(1.0); }
45.44%, 45.64% { transform:rotateY(60deg) translateZ(280px) scale(1.0); }
50%, 63% { transform:rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
66.67% , 78.67% { transform:rotateY(-60deg) translateZ(280px) scale(1.0); }
83.34% , 95.34% { transform:rotateY(-120deg) translateZ(280px) scale(0.5); }
}
@keyframes animateP2 {
0% , 12% {
transform:rotateY(-120deg) translateZ(280px) scale(0.5);
}
16.67% ,28.67% {
transform:rotateY(-180deg) translateZ(280px) scale(0.2);
}
33.34%, 45.34% {
transform:rotateY(-240deg) translateZ(280px) scale(0.5);
}
50%, 63% {
transform:rotateY(-300deg) translateZ(280px) scale(1.0);
}
63.1%, 63.3% {
transform:rotateY(60deg) translateZ(280px) scale(1.0);
}
66.67% , 78.67% {
transform:rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5);
}
83.34% , 95.34% {
transform:rotateY(-60deg) translateZ(280px) scale(1.0);
}
}

@keyframes animateP1 {
0% , 12% {
transform:rotateY(-60deg) translateZ(280px) scale(1.0);
}
16.67% ,28.67% {
transform:rotateY(-120deg) translateZ(280px) scale(0.5);
}
33.34%, 45.34% {
transform:rotateY(-180deg) translateZ(280px) scale(0.2);
}
50%, 63% {
transform:rotateY(-240deg) translateZ(280px) scale(0.5);
}
66.67% , 78.67% {
transform:rotateY(-300deg) translateZ(280px) scale(1.0);
}
78.77% , 78.97% {
transform:rotateY(60deg) translateZ(280px) scale(1.0);
}
83.34% , 95.34% {
transform:rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5);
}
}

@keyframes animateP0 {
0% , 12% { transform:rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
16.67% ,28.67% { transform:rotateY(-60deg) translateZ(280px) scale(1.0); }
33.34%, 45.34% { transform:rotateY(-120deg) translateZ(280px) scale(0.5); }
50%, 63% { transform:rotateY(-180deg) translateZ(280px) scale(0.2); }
66.67% , 78.67% { transform:rotateY(-240deg) translateZ(280px) scale(0.5); }
83.34% , 95.34% { transform:rotateY(-300deg) translateZ(280px) scale(1.0); }
95.44% , 95.54% { transform:rotateY(60deg) translateZ(280px) scale(1.0); }
}</style>

<div id="outframe">
<div id="picHolder">
<img class="RotatingIcon"src="https://z3.ax1x.com/2021/07/18/W1xlzF.gif" >
<img class="RotatingIcon"src="https://z3.ax1x.com/2021/07/18/W1xtd1.gif" >
<img class="RotatingIcon"src="https://z3.ax1x.com/2021/07/18/W1xYZR.gif" >
<img class="RotatingIcon"src="https://z3.ax1x.com/2021/07/18/W1xGL9.gif" >
<img class="RotatingIcon"src="https://z3.ax1x.com/2021/07/18/W1x8sJ.gif" >
<img class="RotatingIcon"src="https://z3.ax1x.com/2021/07/18/W1x3M4.gif" >
</div>
<img src="https://z3.ax1x.com/2021/07/18/W1vb8O.gif" style="width:280px;position:absolute;right:300px;top:50px;">
</div>

红枫发表于 2021-7-18 13:08

195400 发表于 2021-7-18 10:12
我也来借用一下

#outframe {

你的旋转木马代码是纯css的，很实用，收藏了。谢谢！！

寒冬残荷 发表于 2021-7-18 16:35

195400 发表于 2021-7-18 10:12
我也来借用一下

#outframe {

<style type="text/css">
#outframe {width:1500px;height:620px; position:relative;overflow:hidden; margin:6px 0 32px -300px; background-color:#ccf; background-image:url(http://pan.yinhuabbs.cn/view.php/0f963736a89f2d4716c121a37e537f7a.jpg); background-size:cover; }
/*声明一个3D空间*/
#picHolder{width:144px;height:400px;position:absolute;top:230px;left:690px;transform-style: preserve-3d;transform: rotateX(-0.5deg); }
#picHolder img {width:128px;height:150px;position: absolute;overflow:hidden;-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5))); }
:root {--turn: 360deg / 6;}
#picHolder img:nth-child(1){transform: rotateY(0deg) translateY(160px) translateZ(280px);animation: animateP0 30s linear infinite;}
#picHolder img:nth-child(2){transform: rotateY(-60deg) translateZ(280px);animation: animateP1 30s linear infinite;}
#picHolder img:nth-child(3){transform: rotateY(-120deg) translateZ(280px);animation: animateP2 30s linear infinite;}
#picHolder img:nth-child(4){transform: rotateY(-180deg) translateZ(280px);animation: animateP3 30s linear infinite;}
#picHolder img:nth-child(5){transform: rotateY(-240deg) translateZ(280px);animation: animateP4 30s linear infinite;}
#picHolder img:nth-child(6){transform: rotateY(-300deg) translateZ(280px);animation: animateP5 30s linear infinite;}
@keyframes animateP5 {0% , 12% {transform: rotateY(-300deg) translateZ(280px) scale(1.0);}
12.1% , 12.3% {transform: rotateY(60deg) translateZ(280px) scale(1.0); }
16.67% ,28.67% {transform: rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
33.34%, 45.34% {transform: rotateY(-60deg) translateZ(280px) scale(1.0); }
50%, 62% {transform: rotateY(-120deg) translateZ(280px) scale(0.5); }
66.67% , 78.67% {transform: rotateY(-180deg) translateZ(280px) scale(0.2); }
83.34% , 95.34% {transform: rotateY(-240deg) translateZ(280px) scale(0.5); }
}
@keyframes animateP4 {
0% , 12% {transform: rotateY(-240deg) translateZ(280px) scale(0.5); }
16.67% ,28.67% {transform: rotateY(-300deg) translateZ(280px) scale(1.0); }
28.77% ,28.97% {transform: rotateY(60deg) translateZ(280px) scale(1.0); }
33.34%, 45.34% {transform: rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
50%, 63% {transform: rotateY(-60deg) translateZ(280px) scale(1.0); }
66.67% , 78.67% {transform: rotateY(-120deg) translateZ(280px) scale(0.5); }
83.34% , 95.34% {transform: rotateY(-180deg) translateZ(280px) scale(0.2); }
}
@keyframes animateP3 {
0% , 12% {transform: rotateY(-180deg) translateZ(280px) scale(0.2); }
16.67% ,28.67% {transform: rotateY(-240deg) translateZ(280px) scale(0.5); }
33.34%, 45.34% {transform: rotateY(-300deg) translateZ(280px) scale(1.0); }
45.44%, 45.64% {transform: rotateY(60deg) translateZ(280px) scale(1.0); }
50%, 63% {transform: rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
66.67% , 78.67% {transform: rotateY(-60deg) translateZ(280px) scale(1.0); }
83.34% , 95.34% {transform: rotateY(-120deg) translateZ(280px) scale(0.5); }
}
@keyframes animateP2 {
0% , 12% {transform: rotateY(-120deg) translateZ(280px) scale(0.5); }
16.67% ,28.67% {transform: rotateY(-180deg) translateZ(280px) scale(0.2); }
33.34%, 45.34% {transform: rotateY(-240deg) translateZ(280px) scale(0.5); }
50%, 63% {transform: rotateY(-300deg) translateZ(280px) scale(1.0); }
63.1%, 63.3% {transform: rotateY(60deg) translateZ(280px) scale(1.0); }
66.67% , 78.67% {transform: rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
83.34% , 95.34% {transform: rotateY(-60deg) translateZ(280px) scale(1.0); }
}
@keyframes animateP1 { 0% , 12% {transform: rotateY(-60deg) translateZ(280px) scale(1.0); }
16.67% ,28.67% {transform: rotateY(-120deg) translateZ(280px) scale(0.5); }
33.34%, 45.34% {transform: rotateY(-180deg) translateZ(280px) scale(0.2); }
50%, 63% {transform: rotateY(-240deg) translateZ(280px) scale(0.5); }
66.67% , 78.67% {transform: rotateY(-300deg) translateZ(280px) scale(1.0); }
78.77% , 78.97% {transform: rotateY(60deg) translateZ(280px) scale(1.0); }
83.34% , 95.34% {transform: rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
}
@keyframes animateP0 {
0% , 12% {transform: rotateY(0deg) translateY(160px) translateZ(280px) scale(1.5); }
16.67% ,28.67% {transform: rotateY(-60deg) translateZ(280px) scale(1.0); }
33.34%, 45.34% {transform: rotateY(-120deg) translateZ(280px) scale(0.5); }
50%, 63% {transform: rotateY(-180deg) translateZ(280px) scale(0.2); }
66.67% , 78.67% {transform: rotateY(-240deg) translateZ(280px) scale(0.5); }
83.34% , 95.34% {transform: rotateY(-300deg) translateZ(280px) scale(1.0); }
95.44% , 95.54% {transform: rotateY(60deg) translateZ(280px) scale(1.0); }
}
</style>

<div id="outframe">
<div id="picHolder">
<imgsrc="https://z3.ax1x.com/2021/07/18/W1xlzF.gif" >
<imgsrc="https://z3.ax1x.com/2021/07/18/W1xtd1.gif" >
<imgsrc="https://z3.ax1x.com/2021/07/18/W1xYZR.gif" >
<imgsrc="https://z3.ax1x.com/2021/07/18/W1xGL9.gif" >
<imgsrc="https://z3.ax1x.com/2021/07/18/W1x8sJ.gif" >
<imgsrc="https://z3.ax1x.com/2021/07/18/W1x3M4.gif" >
</div>
<img src="https://z3.ax1x.com/2021/07/18/W1vb8O.gif" style="width:280px;position:absolute;right:500px;top:50px;">
</div>

寒冬残荷 发表于 2021-7-18 16:44

195400 发表于 2021-7-18 10:12
我也来借用一下

#outframe {

老师厉害，纯ＣＳＳ代码也能做出这么逼真的动画！真的很感谢老师，来到这里学到的东西都是从您的大作中偷学到的！:P

寒冬残荷 发表于 2021-7-18 16:56

195400 发表于 2021-7-18 10:12
我也来借用一下

#outframe {

:root {--turn: 360deg / 6;}这句CSS手册找到的解释是：选择文档的根元素，不理解:P
去掉这句似乎没有影响。

195400 发表于 2021-7-18 17:20

寒冬残荷发表于 2021-7-18 16:44
老师厉害，纯ＣＳＳ代码也能做出这么逼真的动画！真的很感谢老师，来到这里学到的东西都是从您的大作中偷 ...

https://z3.ax1x.com/2021/06/15/2brM1e.gif

195400 发表于 2021-7-18 17:20

红枫发表于 2021-7-18 13:08
你的旋转木马代码是纯css的，很实用，收藏了。谢谢！！

https://z3.ax1x.com/2021/06/15/2brM1e.gif

195400 发表于 2021-7-18 17:23

寒冬残荷发表于 2021-7-18 16:56
:root {--turn: 360deg / 6;}这句CSS手册找到的解释是：选择文档的根元素，不理解
去掉这句似乎没有 ...

这是定义一个CSS变量，在这里没什么用，是以前的代码改写留下的，不是所有的浏览器都支持这种语法。

红枫发表于 2021-7-18 17:36

本帖最后由红枫于 2021-7-18 17:54 编辑 <br /><br /><div class="quote"><blockquote><font size="2"><a href="forum.php?mod=redirect&goto=findpost&pid=1940863&ptid=236796" target="_blank"><font color="#999999">195400 发表于 2021-7-18 17:20</font></a></font><br></blockquote></div><br><img src="https://z3.ax1x.com/2021/07/18/W3fFVH.gif" border="0" alt="" style="max-width:400px">

页: [1] 2

中画网's Archiver

动图《游戏人物》----仿“前面喜欢的”作品