红影 发表于 2022-5-16 11:23

深夜的酒（学习酒杯里看海）


<style type="text/css">
.bgbox {
        width: 1200px;
        height: 660px;
        left: -301px;
      top:120px;
        background: skyblue url('https://pic.imgdb.cn/item/6280df2f0947543129aeafc4.jpg') no-repeat;
        position: relative;
      box-shadow: 4px 4px 5px #888;
      border-radius:12px;
}
.bgbox::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
      top:0px;
      right: 0px;
      transform: rotateY(180deg);
        background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
        opacity: .18;
}
.outer {
        width: 117px;
        height: 117px;
        left: 252px;
        top: 240px;
        clip-path:polygon(24% 7%, 24% 65%, 26% 80%, 31% 92%, 41% 100%, 59% 100%, 69% 92%, 74% 80%,

75% 65%, 75% 7%, 64% 2%, 50% 0%, 36% 2%);
        position: absolute;
}
.wrap {
        width: 117px;
        height: 117px;
        overflow: hidden;
        background-color: rgba(178,34,34,.35);
        clip-path:polygon(24% 0, 24% 65%, 26% 80%, 31% 92%, 41% 100%, 59% 100%, 69% 92%, 74% 80%,

75% 65%, 75% 0, 64% 0%, 50% 0%, 36% 0%);
        position: absolute;
}
.wrap::before, .wrap::after {
        content: '';
        position: absolute;
        width: 400px;
        margin-top: -320px;
        margin-left: -140px;
        height: 400px;
        transform-origin: 50% 48%;
        border-radius: 50%;
        background-color: #fff;
        animation: rot 4s linear infinite;
        opacity: .08;
}
.wrap::after{
        animation: rot 4s 2.5s linear infinite;
}
@keyframes rot { to { transform: rotate(1turn); } }
.circle {
        --x: 120px;
        position: absolute;
        width: var(--x);
        height: var(--x);
        left: 70px;
      top: 80px;
        transform-style: preserve-3d;
        animation: rot1 7s linear infinite;
        cursor: pointer;
}
.circle div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid #cc6633;
        border-radius: 50%;
        padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot1{
        0%{ transform: rotateZ(0deg) rotateY(0turn);}
        100%{ transform: rotateZ(360deg) rotateY(1turn);}
}
.txtFly {
      position: absolute;
      --w: 460px;
      width: var(--w);
      left: 260px;
      top: 610px;
      overflow: hidden;
}
.txtFly div {
       word-break: keep-all;
       white-space: nowrap;
       font: normal 22px /24px '楷体','微软雅黑';
       color:#ccff99; text-shadow: 0 0 2px #ff66ff;
       animation: fly 86s linear infinite;
}

@keyframes fly {
                from { transform: translateX(100%); }
                to { transform: translateX(calc(-340% - var(--w))); }
      }
</style>

<div class="bgbox">
        <div class="outer">
                <div class="wrap"></div>
        </div>
        <div id="roBox" class="circle">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
        </div>
   <div class="txtFly" >
   <div>《深夜的酒》喝下了无味，喝下了后悔，一杯再一杯，想念的时候，酒杯里装满泪水，你不懂我伤悲，就别管我是喜是悲，深夜的酒如此狼狈，连空气都将我摧毁，一个人在夜里碰杯，这寂寞将我包围……</div></div>
</div><br><br><br><br><br><br><br><br>
<audio id="ymusic" src="https://music.163.com/song/media/outer/url?id=1918678274.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusic');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") :
(mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>

红影 发表于 2022-5-16 11:24

酒杯没画好，多了一点点，懒得再细调了。也跟着学个杯子里的海@马黑黑

梦油 发表于 2022-5-16 11:42

红影朋友早上好！你选的这支歌曲真不错，深夜的酒是喜还是悲，只有当事人最清楚。

马黑黑 发表于 2022-5-16 12:09

喝醉了都{:4_170:}

加林森 发表于 2022-5-16 12:37

给力，有创意。{:4_199:}

红影 发表于 2022-5-16 13:47

梦油 发表于 2022-5-16 11:42
红影朋友早上好！你选的这支歌曲真不错，深夜的酒是喜还是悲，只有当事人最清楚。

先找的图片，跟着图片去找的歌曲{:4_173:}

红影 发表于 2022-5-16 13:47

马黑黑 发表于 2022-5-16 12:09
喝醉了都

酒杯里的海太小了点，都看不出来了{:4_173:}

红影 发表于 2022-5-16 13:48

加林森 发表于 2022-5-16 12:37
给力，有创意。

酒杯没画好，意思意思弄个容器{:4_173:}

加林森 发表于 2022-5-16 13:59

红影 发表于 2022-5-16 13:48
酒杯没画好，意思意思弄个容器

明白的。就是那个女酒鬼太厉害了。{:4_189:}

梦油 发表于 2022-5-16 14:25

红影 发表于 2022-5-16 13:47
先找的图片，跟着图片去找的歌曲

挺好，挺好。这支歌曲配的挺好。

马黑黑 发表于 2022-5-16 20:08

红影 发表于 2022-5-16 13:47
酒杯里的海太小了点，都看不出来了

还行

东篱闲人 发表于 2022-5-16 20:11

喝这样？{:5_115:}

红影 发表于 2022-5-16 21:41

加林森 发表于 2022-5-16 13:59
明白的。就是那个女酒鬼太厉害了。
酒不伤人情伤人{:4_173:}

红影 发表于 2022-5-16 21:43

梦油 发表于 2022-5-16 14:25
挺好，挺好。这支歌曲配的挺好。

谢谢梦油鼓励{:4_204:}

加林森 发表于 2022-5-16 21:43

红影 发表于 2022-5-16 21:41
酒不伤人情伤人

嗯嗯，明白的。

红影 发表于 2022-5-16 21:44

马黑黑 发表于 2022-5-16 20:08
还行

能看出来就行，正太大也不行的呢{:4_173:}

红影 发表于 2022-5-16 21:44

东篱闲人 发表于 2022-5-16 20:11
喝这样？

是不是你弄得她伤心了{:4_172:}

马黑黑 发表于 2022-5-16 21:46

红影 发表于 2022-5-16 21:44
能看出来就行，正太大也不行的呢

再精致一点也无妨

东篱闲人 发表于 2022-5-16 22:52

红影 发表于 2022-5-16 21:44
是不是你弄得她伤心了

不是。是隔离的时间太长了，憋的。。。{:5_112:}

梦油 发表于 2022-5-17 11:30

红影 发表于 2022-5-16 21:43
谢谢梦油鼓励

红影朋友早上好！是你制作的帖子为大家带来了欢乐，你辛苦了！
页: [1] 2 3
查看完整版本: 深夜的酒（学习酒杯里看海）