马黑黑 发表于 2024-1-12 08:56

Dreaming Girl

本帖最后由 马黑黑 于 2024-1-12 08:58 编辑 <br /><br /><style>
#papa {
        margin: -70px 0 0 calc(50% - 801px);
        width: 1440px;
        height: 810px;
        background: url('https://638183.freep.cn/638183/t24/jpg/dream.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 16px rgba(0,0,0,.7);
        overflow: hidden;
        position: relative;
        pointer-events: none;
        z-index: 1;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
}
#papa::after {
        background: rgba(0,122,45,.5);
        clip-path: polygon(50% 0,100% 50%,50% 100%, 0 50%);
        animation: opt 20s infinite alternate var(--state);
}

#papa::before {
        width: 428px;
        height: 428px;
        left: calc(50% - 214px);
        top: calc(50% - 214px);
        clip-path: circle(214px);
        background: url('https://638183.freep.cn/638183/t24/webp/dreamgirl.webp') no-repeat center;
        opacity: .45;
        box-shadow: inset 0 0 300px blue;
        cursor: pointer;
        pointer-events: auto;
        animation: rot 10s infinite linear var(--state);
}
@keyframes opt {
        from { transform: scale(1) rotate(0); }
        to { transform: scale(0) rotate(45deg); }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa" title="play|pause"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1494213335" autoplay loop></audio>

<script>

var mState = () => aud.paused ?
        (papa.style.setProperty('--state','paused'),papa.title = '点击播放') :
        (papa.style.setProperty('--state','running'),papa.title = '点击暂停');
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>

马黑黑 发表于 2024-1-12 08:58

代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 801px);
        width: 1440px;
        height: 810px;
        background: url('https://638183.freep.cn/638183/t24/jpg/dream.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 16px rgba(0,0,0,.7);
        overflow: hidden;
        position: relative;
        pointer-events: none;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
}
#papa::after {
        background: rgba(0,122,45,.5);
        clip-path: polygon(50% 0,100% 50%,50% 100%, 0 50%);
        animation: opt 20s infinite alternate var(--state);
}

#papa::before {
        width: 428px;
        height: 428px;
        left: calc(50% - 214px);
        top: calc(50% - 214px);
        clip-path: circle(214px);
        background: url('https://638183.freep.cn/638183/t24/webp/dreamgirl.webp') no-repeat center;
        opacity: .45;
        box-shadow: inset 0 0 300px blue;
        cursor: pointer;
        pointer-events: auto;
        animation: rot 10s infinite linear var(--state);
}
@keyframes opt {
        from { transform: scale(1) rotate(0); }
        to { transform: scale(0) rotate(45deg); }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa" title="play|pause"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1494213335" autoplay loop></audio>

<script>

var mState = () => aud.paused ?
        (papa.style.setProperty('--state','paused'),papa.title = '点击播放') :
        (papa.style.setProperty('--state','running'),papa.title = '点击暂停');
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>

马黑黑 发表于 2024-1-12 09:12

本帖最后由 马黑黑 于 2024-1-12 09:13 编辑

帖子总共用了两个CSS关键帧动画，一是播放控制器（伪元素 ::before）旋转，二是菱形（伪元素 ::after）往复缩放+旋转。

帖子中用到 clip-path 技术，对两个伪元素进行切片。菱形伪元素尺寸与宿主元素一致，用 polygon 函数裁剪而成；圆形伪元素有自己的尺寸，用 circle 函数切出来（其实也可以直接用 border-radius: 50% 做出）。

JS极其简单，基本就两个功能：按钮（及其按钮信息）交互；音频控制。音频控制与按钮的交互是互为关联的有机操控。

马黑黑 发表于 2024-1-12 09:20

Firefox和Chromium下，设计的效果均得到完美渲染。

IE7下，音乐都木有。IE11下，有音乐，但其他的效果出不来。其他版本的IE没有测试，肯定也不行。怪不得微软抛弃了自己的亲生儿子，领养了开源的大胖妞 Chromium 做成 Edge（话说Edge是优秀的）。

侃大山 发表于 2024-1-12 11:03

外国风格的，好看{:4_204:}

红影 发表于 2024-1-12 11:16

又是一个新的效果，黑黑太厉害了{:4_199:}

醉美水芙蓉 发表于 2024-1-12 11:38

马黑黑 发表于 2024-1-12 11:51

醉美水芙蓉 发表于 2024-1-12 11:38
老师这个特效漂亮！

谢谢

马黑黑 发表于 2024-1-12 11:51

侃大山 发表于 2024-1-12 11:03
外国风格的，好看

{:4_190:}

马黑黑 发表于 2024-1-12 11:51

红影 发表于 2024-1-12 11:16
又是一个新的效果，黑黑太厉害了

哪里哪里，一般般

樵歌 发表于 2024-1-12 15:19

童话世界，美极！风格有点像中亚的{:4_173:}

马黑黑 发表于 2024-1-12 18:17

樵歌 发表于 2024-1-12 15:19
童话世界，美极！风格有点像中亚的

也像那个波兰的印第安人后裔歌手的风格，演唱最后一个莫西干人的那位，不同的是这支曲子是积极乐观的

红影 发表于 2024-1-12 20:08

马黑黑 发表于 2024-1-12 11:51
哪里哪里，一般般

音乐也很合适，这样的帖子好看{:4_187:}

马黑黑 发表于 2024-1-12 20:24

红影 发表于 2024-1-12 20:08
音乐也很合适，这样的帖子好看

谢谢认同

红影 发表于 2024-1-12 21:38

马黑黑 发表于 2024-1-12 20:24
谢谢认同

用菱形罩起一个梦，有趣{:4_187:}

马黑黑 发表于 2024-1-12 21:47

红影 发表于 2024-1-12 21:38
用菱形罩起一个梦，有趣

旋转的时候有立体感

小辣椒 发表于 2024-1-12 23:46

突然发现这里还有一个我没有看见过的

小辣椒 发表于 2024-1-12 23:49

黑黑你的速度超过神15了

小辣椒 发表于 2024-1-12 23:50

明天上来继续看了，今天太迟了

马黑黑 发表于 2024-1-13 08:45

小辣椒 发表于 2024-1-12 23:50
明天上来继续看了，今天太迟了

注意休息
页: [1] 2
查看完整版本: Dreaming Girl