|
|

楼主 |
发表于 2022-6-4 09:30
|
显示全部楼层
- <style>
- /* 地板 */
- .floor {
- left: -20px;
- width: 800px;
- height: 600px;
- background: repeating-linear-gradient(-45deg, transparent, transparent 25%, #f55 0, #f55 50% ), repeating-linear-gradient(45deg, transparent, transparent 25%, #55f 0, #55f 50% ), #efb;
- background-size: 400px 400px;
- background-blend-mode: multiply;
- box-shadow: 4px 4px 8px 0 #444;
- display: flex;
- position: relative;
- }
- /* 球 */
- .ball {
- margin: 100px auto 0;
- width: 200px;
- height: 200px;
- border-radius: 50%;
- background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
- position: relative;
- animation: up 1s linear infinite alternate;
- }
- /* 球的伪元素一:底部阴影 */
- .ball::before {
- position: absolute;
- content: '';
- width: 100px;
- height: 50px;
- left: calc(50% - 50px);
- top: 300px;
- border-radius: 50%;
- background: rgba(0, 0, 0, .1);
- filter: blur(1px);
- animation: down 1s linear infinite alternate;
- }
- /* 球的伪元素二:顶部光影 */
- .ball::after {
- content: "";
- position: absolute;
- top: 1%;
- left: 5%;
- width: 90%;
- height: 90%;
- border-radius: 50%;
- background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%); filter: blur(5px);
- }
- /* 图片定位与混合滤镜 */
- .gif {
- position: absolute;
- bottom: 0;
- mix-blend-mode: multiply;
- cursor: pointer;
- }
- /* 关键帧动画:球上下弹跳 */
- @keyframes up {
- to { transform: translateY(100px); }
- }
- /* 关键帧动画:阴影变化 */
- @keyframes down {
- to { transform: translateY(-100px) scale(1.2); }
- }
- </style>
- <div class="floor">
- <div class="ball"></div>
- <img class="gif" src="/data/attachment/forum/202206/04/092536dnh2hngqz2t2sfxe.gif" alt="" />
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1863430078.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- let aud = document.querySelector('#aud'), gif = document.querySelector('.gif');
- gif.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|