代码音画--多图旋转

湛蓝 · 发表于 2024-1-28 08:45:25

本帖最后由风清于 2024-1-28 10:49 编辑

感谢申木老师提供的代码！

龙年新春喜气盈，龙男龙女共欢庆。贺语频频传佳音，祝福声声盈门庭。新春新景新气象，新年新岁新征程。龙年吉祥如意到，阖家欢乐万事兴。作者：AI（人工智能）

湛蓝 · 发表于 2024-1-28 08:46:39

本帖最后由湛蓝于 2024-1-28 10:26 编辑

附代码：

<font _mstmutation="1" _msttexthash="560617871385" _msthash="94"><p style=“text-align： center;”> </p>
<p style=“文本对齐：右;”><iframe frameborder=“0” height=“7” marginheight=“0” marginwidth=“0” scrolling=“no” src=“http://pan.yinhuabbs.cn/view.php/9d03b9f08df89b87e2c9fb3c2798077e.html” width=“13”></iframe><span style=“color：#2ecc71;”><span style=“font-family：宋体;”>（感谢申木老师提供代码）</span></span></p>
<p>
<style type=“text/css”>.html{MARGIN-LEFT：1px;边距顶部：1px;
宽度：960px;高度：600px;
边框：2px #ffffff solid ;
box-shadow： 0px 0px 0px 1px #ffffff， 0px 0px 0px 4px #ff0000;
溢出：隐藏;边框半径：6%;
背景图片：url（https://cccimg.com/view.php/d2fd98da221a18a05390139251275f1a.jpg）;}
#mm img{ width：180px; height： 275px; position： absolute; left：0px;
顶部：0px;
边框：6px 黄色双边框;边框半径：50%;
}
#mm img：nth-child（1）{
transform： translateZ（350px）;}
#mm img：nth-child（2）{
transform： rotateY（40deg） translateZ（350px）;
#mm img：nth-child（3）{
transform： rotateY（80deg） translateZ（350px）;
#mm img：nth-child（4）{
transform： rotateY（120deg） translatez（350px）;
#mm img：nth-child（5）{
transform： rotateY（160deg） translatez（350px）;
#mm img：nth-child（6）{
transform： rotateY（200deg） translatez（350px）;
#mm img：nth-child（7）{
transform： rotateY（240deg） translatez（350px）;
#mm img：nth-child（8）{
transform： rotateY（280deg）translatez（350px）;
#mm img：nth-child（9）{
transform： rotateY（320deg） translatez（350px）;
#mm img：nth-child（1）：hover{
transform： translateZ（350px）scale（1.8）;-webkit-filter： grayscale（60%）;}
#mm img：nth-child（2）：hover{
transform： rotateY（40deg） translateZ（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm img：nth-child（3）：hover{
transform： rotateY（80deg） translatez（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm img：nth-child（4）：hover{
transform： rotateY（120deg） translatez（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm img：nth-child（5）：hover{
transform： rotateY（160deg） translatez（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm img：nth-child（6）：hover{
transform： rotateY（200deg） translatez（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm img：nth-child（7）：hover{
transform： rotateY（240deg） translatez（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm img：nth-child（8）：hover{
transform：rotateY（280deg） translatez（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm img：nth-child（9）：hover{
transform： rotateY（320deg） translatez（350px）scale（1.8）;-webkit-filter： grayscale（60%）;
}
#mm：hover{
animation-play-state：暂停;
#mm{
margin： 160px auto;
width： 180像素;
高度：275px;
transform-style：保留-3D;
动画名称：动画;
动画持续时间：30s;
animation-iteration-count：无限;
animation-timing-function：线性;
位置：相对;
}
@keyframes animate {
from {
transform： rotatex（-8deg） rotateY（0deg）;
to {
transform： rotatex（-8deg） rotateY（-360deg）;
}
.bfq {左边距：20px;上边距：-600px;
宽度：800px;
高度：100px;
box-sizing：边框;
动画：SliderX 15S 线性无限;
transform-origin：中心;位置：相对;
不透明度：1.0;Z指数：29;
}
@keyframes sliderx{
0%{top：0px;左：70px;
30%{顶部：500px;左：-120px;
70%{顶部：500px;左：220px;
100%{顶部：0px;左：70px;
}
</style>
</p>
<div class=“html”>
<div id=“mm” style=“text-align： right;”><img src=“https://cccimg.com/view.php/eab7269a701cf4bccc51a14b1f6d9939.jpg” /> <img src=“https://cccimg.com/view.php/2f203c0ec6b4c8451f60431b4d18bf19.jpg” /> <img src=“https://cccimg.com/view.php/13b3113e7e0867bc307268a17870749f.jpg” /> <img src=“https://cccimg.com/view.php/21786a72fe7a78b846fa7aad12a15328.jpg” /> <img src=“https://cccimg.com/view.php/7557ce17e4060ed8cc1e7980d47279de.jpg” /> <imgsrc=“https://cccimg.com/view.php/663cad36c8c071a31eb4c54af7378c63.jpg” /> <img src=“https://cccimg.com/view.php/1a2341321f4bec6eec6f8fde159f5c3e.jpg” /> <img src=“https://cccimg.com/view.php/2cce28a3269a78a8fd2c7444e4432b4d.jpg” /> <img src=“https://cccimg.com/view.php/942e1439903760d570af266d5b4a6554.jpg” /> <img src=“https://cccimg.com/view.php/60bf82a81fa5db9e766dec4f4edde31a.jpg” /></div>
</div>
<div class=“nbw-blog-start”>
<p> </p>
</div>
<div class=“nbw-blog-start>
<div center=“><选框><b1123><div align=”center“><span style=”font-size：24px;”><span style=“font-family：宋体;”><span style=“颜色： rgb（255， 0， 0）;”><span style=“显示：无;”>  </span><span style=“display： none;”> </span>★★</span><span style=“color： rgb（9， 27,200）;”>《烟花响，新春到，春节礼炮声声传，祝大家龙年行大运，福寿双全，平安幸福!》</span><span style=“颜色： rgb（255， 0， 0）;”>★★</span></span></span></div>
</marquee>
<p> </p>
<div class=“nbw-blog-start”> </div>
</div>
<p>
<audio autoplay=“” loop=“” src=“http://music.163.com/song/media/outer/url?id=566442178.mp3”> </音频>
</p></font>

复制代码

微尘 · 发表于 2024-1-28 10:38:17

欣赏了你的代码音画佳作——《多图旋转》，赞一个！

风清 · 发表于 2024-1-28 10:52:13

欣赏老师新颖音画佳作！玲儿响叮当好好听，为您点赞！
上午好!

咕咚来了 · 发表于 2024-1-28 11:10:41

很不错的代码，童趣横生！

娟子 · 发表于 2024-1-28 12:36:51

欣赏老友代码音画佳作——《多图旋转》，赞一个！

湛蓝 · 发表于 2024-1-28 12:45:40

咕咚来了发表于 2024-1-28 11:10
很不错的代码，童趣横生！

我在二楼提供了全部代码，不知为何审核后代码怎么没有了

可能是我自己不小心删除了？

湛蓝 · 发表于 2024-1-28 12:47:09

丁香发表于 2024-1-28 10:34
欣赏了你的代码音画，赞一个！

谢谢老师首席欣赏，大力支持，下午好

湛蓝 · 发表于 2024-1-28 12:47:42

微尘发表于 2024-1-28 10:38
欣赏了你的代码音画佳作——《多图旋转》，赞一个！

老师，我在二楼提供了代码，看不到？我自己也看不到

湛蓝 · 发表于 2024-1-28 12:48:50

风清发表于 2024-1-28 10:52
欣赏老师新颖音画佳作！玲儿响叮当好好听，为您点赞！
上午好!

嗯，我很喜欢这首《铃儿响叮当》

谢谢老师加分鼓励，下午好

		自动登录	找回密码
密码			立即注册

代码音画--多图旋转

评分