本帖最后由 静思的 于 2019-5-17 22:00 编辑
http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png
谢谢老师给大家带来美的享受和美的陶冶，祝幸福安好！
朋友，感谢你提供如此精美的音画与大家分享，中画论坛因你而精采，在此轻轻道一声：朋友辛苦了！祝你创作快乐！
安静听雨2016 发表于 2019-5-17 22:13
谢谢老师给大家带来美的享受和美的陶冶，祝幸福安好！
http://www.yinhuabbs.cn/data/attachment/forum/201904/06/163734w7lzlr5r4if55jij.gif
黔中一叟 发表于 2019-5-17 23:07
朋友，感谢你提供如此精美的音画与大家分享，中画论坛因你而精采，在此轻轻道一声：朋友辛苦了！祝你创作快 ...
http://www.yinhuabbs.cn/data/attachment/forum/201904/06/163734w7lzlr5r4if55jij.gif
￡渴々望〤 发表于 2019-5-17 11:19
分享老师的精彩佳贴
http://www.yinhuabbs.cn/data/attachment/forum/201904/06/163734w7lzlr5r4if55jij.gif
静思的 发表于 2019-5-17 21:56
http://wp.zp68.com/sub/filestores/2019/05/18/cd2eecab611ee072bd4d8ab0a018d0e0.swf
静思的 发表于 2019-5-17 21:56
<style>
/* 这帖旋转体的id 为 items */
/* 以下是定义所有图片的 */
#items img{
width:300px; /* 图片宽度 */
height: 300px; /* 图片高度 */
position: absolute;
/*---------下面几条不是必要的， 只是修饰图片所用 -------*/
overflow:hidden; /* 这条及下面一条是为使图片圆角 */
border-radius:16px;
border:4px blue inset; /* 图片边框设置 */
opacity:0.9; /* 图片透明度 */
}
/*以下为逐一定义图片偏转角度及距中心的距离 */
/*本例中用到8张图片，每张图片逐一偏转 360 / 8 = 45 度 (rotateX)*/
/*距中心距离 = 图片高度 ÷ 2 ÷ tan(每一图片偏转角度 / 2) */
/*本例中： 300 ÷ 2 ÷ tan(45 ÷ 2) ≈ 362.132 */
/* 小于计算值图片会挤在一起，略大于是为了使图片间有个小间隔*/
#items img:nth-child(1){
transform: rotateX(0deg)translateZ(375px);
}
#items img:nth-child(2){
transform: rotateX(45deg) translateZ(375px);
}
#items img:nth-child(3){
transform: rotateX(90deg) translateZ(375px);
}
#items img:nth-child(4){
transform: rotateX(135deg) translateZ(375px);
}
#items img:nth-child(5){
transform: rotateX(180deg) translateZ(375px);
}
#items img:nth-child(6){
transform: rotateX(225deg) translateZ(375px);
}
#items img:nth-child(7){
transform: rotateX(270deg) translateZ(375px);
}
#items img:nth-child(8){
transform: rotateX(315deg) translateZ(375px);
}
/*以下是旋转体的有关定义 */
/*id选择器 id不能重复命名 ， 本例中 id 为 items*/
#items{
margin: 300px auto; /*让父元素居中*/
width: 300px; /* 旋转体宽度， 和单张图片相等 */
height: 300px; /*旋转体高度， 和单张图片相等 */
/*声明一个3D空间*/
transform-style: preserve-3d; /* 这句很重要，显示立体效果*/
transform: rotateY(5deg); /* 略微偏转一点以免前后重叠*/
/*最重要的动画定义来了*/
/*名称animate00这个必须有，随自己心意起个名称*/
/* 一次动画持续时间（秒）， 本例中是 120秒 */
/* 动画变化曲线， 本例中 linear 表示匀速变化，
不设定则是两头快中间慢 */
/* 动画次数， 本例中的 infinite表示无限次*/
animation: animate00 120s linear infinite;
position: relative; /* 为内部的图片指定个定位依据*/
/* ---- 下面的不重要， 根据自己需要设定， 与动画无关*/
/*left:0px;top:50px;
margin-bottom:80px;*/
}
/*定义一个动画效果，注意动画名animate00 用到了这里*/
/* 这动画定义的含义是，旋转体Y轴方向偏5°，绕X轴方向一周，360° --> 0 ° */
@keyframes animate00 {
from {
transform: rotateY(5deg) rotateX(360deg);
}
to {
transform: rotateY(5deg) rotateX(0deg);
}
}
</style>
<div style="width:500px;height:900px;margin:32px auto;">
<div id="items"> <!-- 旋转体id在这里-->
<!-- 以下是用到的各张图片-->
<img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104028uaxj6mb3xos163b1.jpg"/>
<img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104106gtk6vuoouzzvk19y.jpg"/>
<img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104129i5yt5a2eeed6iiyp.jpg"/>
<img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104148u7nygaka5yi79sag.jpg"/>
</div>
</div><br><br><br><br><br>
￡渴々望〤 发表于 2019-5-17 11:19
好漂亮的制作
http://www.yinhuabbs.cn/data/attachment/forum/201904/06/163734w7lzlr5r4if55jij.gif
红松故乡 发表于 2019-5-17 11:40
欣赏精彩制作。
http://www.yinhuabbs.cn/data/attachment/forum/201904/06/163734w7lzlr5r4if55jij.gif