旗袍女儿情

绿地水池

糊里糊涂 发表于 2019-5-18 16:35

我现在正在欣赏佳作。

绿地水池

糊里糊涂 发表于 2019-5-18 16:34

我今天一天都在聆听美妙的歌声。

静思的

静思的 发表于 2019-5-17 21:56

旋转体代码可以告人吗？

静思的

糊里糊涂 发表于 2019-5-18 16:29
/* 这帖旋转体的id 为 items */
            /* 以下是定义所有图片的   */
            ...

太精彩了，  作品真棒

静思的

糊里糊涂 发表于 2019-5-18 16:31

旗袍女儿情
http://www.yinhuabbs.cn/forum.ph ... 8&fromuid=87235
(出处: 中画网)

布衣人家

老师晚上好！欣赏您的精彩佳作,为您点赞且学习,因故未能及时回复抱歉.遥祝安康！

黔中一叟

糊里糊涂 发表于 2019-5-18 16:17

朋友不客气，因为有缘，相逢在网络空间，愿你的每一天都充满阳光和欢愉！

糊里糊涂

静思的 发表于 2019-5-18 20:20
旋转体代码可以告人吗？

1. 互相学习，没有秘密的，代码如下：
   
2. 
   
3. <style>
   
4.             /* 这帖旋转体的id 为 items */
   
5.             /* 以下是定义所有图片的   */
   
6.             #items img{
   
7.                 width:300px;        /* 图片宽度 */
   
8.                 height: 300px;        /* 图片高度 */
   
9.                 position: absolute;
   
10.                 /*---------  下面几条不是必要的， 只是修饰图片所用    -------*/
    
11.                 overflow:hidden;        /* 这条及下面一条是为使图片圆角 */
    
12.                 border-radius:16px;
    
13.                 border:4px blue inset;        /* 图片边框设置 */            
    
14.                 opacity:0.9;       /* 图片透明度 */
    
15.             }           
    
16.            /*  以下为逐一定义图片偏转角度及距中心的距离   */
    
17.            /*  本例中用到8张图片，每张图片逐一偏转 360 / 8 = 45 度 (rotateX)  */                     
    
18.            /*  距中心距离 = 图片高度 ÷ 2 ÷ tan(每一图片偏转角度 / 2)   */
    
19.            /*  本例中： 300 ÷ 2 ÷ tan(45 ÷ 2) ≈ 362.132   */
    
20.            /*   小于计算值图片会挤在一起，略大于是为了使图片间有个小间隔  */
    
21.             #items img:nth-child(1){
    
22.                 transform: rotateX(0deg)  translateZ(375px);
    
23.             }
    
24.             #items img:nth-child(2){
    
25.                 transform: rotateX(45deg) translateZ(375px);
    
26.             }
    
27.             #items img:nth-child(3){
    
28.                 transform: rotateX(90deg) translateZ(375px);
    
29.             }
    
30.             #items img:nth-child(4){
    
31.                 transform: rotateX(135deg) translateZ(375px);
    
32.             }
    
33.             #items img:nth-child(5){
    
34.                 transform: rotateX(180deg) translateZ(375px);
    
35.             }
    
36.             #items img:nth-child(6){
    
37.                 transform: rotateX(225deg) translateZ(375px);
    
38.             }
    
39.             #items img:nth-child(7){
    
40.                 transform: rotateX(270deg) translateZ(375px);
    
41.             }
    
42.             #items img:nth-child(8){
    
43.                 transform: rotateX(315deg) translateZ(375px);
    
44.             }
    
45.             
    
46.             /*  以下是旋转体的有关定义        */
    
47.             /*  id选择器   id不能重复命名 ， 本例中 id 为 items*/
    
48.             #items{
    
49.                 margin: 300px auto;         /*让父元素居中*/
    
50.                 width: 300px;                /* 旋转体宽度， 和单张图片相等 */
    
51.                 height: 300px;                /*旋转体高度， 和单张图片相等   */
    
52.                 /*声明一个3D空间*/
    
53.                 transform-style: preserve-3d;          /* 这句很重要，显示立体效果  */
    
54.                 transform: rotateY(5deg);       /* 略微偏转一点以免前后重叠  */
    
55.                 /*  最重要的动画定义来了  */
    
56.                        /*  名称  animate00  这个必须有，随自己心意起个名称  */
    
57.                 /*   一次动画持续时间（秒）， 本例中是 120秒   */
    
58.                 /*   动画变化曲线， 本例中 linear 表示匀速变化，
    
59.                      不设定则是两头快中间慢       */
    
60.                 /*   动画次数， 本例中的 infinite表示无限次  */
    
61.                 animation: animate00 120s linear infinite;
    
62.                 position: relative;    /* 为内部的图片指定个定位依据  */
    
63.                 /* ----   下面的不重要， 根据自己需要设定， 与动画无关  */
    
64.                 /*left:0px;top:50px;
    
65.                 margin-bottom:80px;*/
    
66.             }
    
67.             
    
68.             /*定义一个动画效果，注意动画名  animate00 用到了这里  */
    
69.             /* 这动画定义的含义是，旋转体Y轴方向偏5°，绕X轴方向一周，360° --> 0 °   */
    
70.             @keyframes animate00 {
    
71.                 from {
    
72.                     transform: rotateY(5deg) rotateX(360deg);
    
73.                 }
    
74.                 to {
    
75.                     transform: rotateY(5deg) rotateX(0deg);
    
76.                 }
    
77.             }
    
78.         </style>
    
79. 
    
80.         <div style="width:500px;height:900px;margin:32px auto;">
    
81.                 <div id="items">     <!-- 旋转体id在这里  -->
    
82.                  <!-- 以下是用到的各张图片  -->
    
83.                 <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
    
84.                 <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104028uaxj6mb3xos163b1.jpg"/>
    
85.                 <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
    
86.                 <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104106gtk6vuoouzzvk19y.jpg"/>
    
87.                 <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
    
88.                 <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104129i5yt5a2eeed6iiyp.jpg"/>
    
89.                 <img src="http://www.yinhuabbs.cn/data/attachment/album/201904/06/162637iewgek6hi8k662gh.png"/>
    
90.                 <img src="http://www.yinhuabbs.cn/data/attachment/forum/201905/14/104148u7nygaka5yi79sag.jpg"/>
    
91.                 </div>
    
92. 
    
93.         </div>

复制代码

糊里糊涂

布衣人家 发表于 2019-5-18 21:06
老师晚上好！欣赏您的精彩佳作,为您点赞且学习,因故未能及时回复抱歉.遥祝安康！

糊里糊涂

绿地水池 发表于 2019-5-18 16:56
我今天一天都在聆听美妙的歌声。