CSS小温泉

凡哥

2024年5月23日 星期四

刚做的一个纯CSS动画。效果如下：

代码

<style> #outer { position: relative; margin: 20px auto; width: 150px; height: 150px; border-radius: 50%; border: 10px groove tan; border-color: seagreen lightgreen forestgreen; } #outer::before, #outer::after { position: absolute; content: ''; width: 100%; height: 100%; background: radial-gradient(silver, green, lightgreen, snow, red); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: rot 8s linear infinite; } #outer::before { animation-delay: 0; } #outer::after { animation-delay: -1s; } @keyframes rot { to { transform: rotate(360deg); } } </style>   <div id="outer"></div>

原理：

id="outer" 的div元素，在CSS中定义了两个伪元素，伪元素着径向渐变背景色，切成菱形，做 rot 关键帧动画，第二个伪元素提前一秒运行动画。

灵儿

灵儿

怎么回事，回复会改动主楼吗？

凡哥

灵儿 发表于 2024-5-23 15:56
怎么回事，回复会改动主楼吗？

老虎是特殊动物，它们喜独居，需要的时候才会在一起

花简静

这个小播是真漂亮啊。颜值极高。。
从色彩可见人。。。

凡哥

花简静 发表于 2024-5-23 21:53
这个小播是真漂亮啊。颜值极高。。
从色彩可见人。。。

明天用它做个帖子 看看行不行

花简静

凡哥 发表于 2024-5-23 22:16
明天用它做个帖子 看看行不行

这是布置作业给我呢……啊，我小白不行……

凡哥

花简静 发表于 2024-5-23 22:31
这是布置作业给我呢……啊，我小白不行……

半成品都出来了

凡哥

2024年5月24日 星期五
《半妖倾城》代码：

1. <style>
   
2.     #papa {
   
3.         position: relative;
   
4.         margin: 20px 0 20px calc(50% - 730px);
   
5.         width: 1280px;
   
6.         height: 720px;
   
7.         background: url('https://media.9game.cn/gamebase/2021/4/23/226964855.jpeg') no-repeat center/cover;
   
8.         box-shadow: 2px 2px 6px #333;
   
9.         overflow: hidden;
   
10.         z-index: 1;
    
11.         --state: running;
    
12.     }
    
13.     .vid {
    
14.         position: absolute;
    
15.         bottom: 0;
    
16.         width: 100%;
    
17.         height: calc(100% + 65px);
    
18.         object-fit: cover;
    
19.         mix-blend-mode: screen;
    
20.     }
    
21.     .vid:nth-of-type(2) { opacity: .5; }
    
22.     .player {
    
23.         position: absolute;
    
24.         left: 375px;
    
25.         top: 400px;
    
26.         width: 120px;
    
27.         height: 120px;
    
28.         border-radius: 50%;
    
29.         border: 6px groove tan;
    
30.         border-color: black white black;
    
31.         opacity: .5;
    
32.         transition: 1s;
    
33.         cursor: pointer;
    
34.     }
    
35.     .player:hover {
    
36.         filter: hue-rotate(100deg) drop-shadow(0 0 30px red);
    
37.         border-color: purple red plum;
    
38.     }
    
39.     .player::before, .player::after {
    
40.         position: absolute;
    
41.         content: '';
    
42.         width: 100%;
    
43.         height: 100%;
    
44.         background: radial-gradient(snow, purple, pink, lightblue, transparent);
    
45.         clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    
46.         animation: rot 8s linear infinite var(--state);
    
47.     }
    
48.     .player::after { animation-delay: -1s; }
    
49.     .player:nth-of-type(2) { left: 750px; top: 470px; }
    
50.     @keyframes rot { to { transform: rotate(360deg); } }
    
51. </style>
    
52. 
    
53. <div id="papa">
    
54.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=430787639" autoplay loop></audio>
    
55.     <video class="vid" src="https://img.tukuppt.com/video_show/53950850/05/48/30/649e911ea2def.mp4" loop muted></video>
    
56.     <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/06/5b50065e45b04.mp4" loop muted></video>
    
57.     <div class="player" title="播放/暂停"></div>
    
58.     <div class="player" title="播放/暂停"></div>
    
59. </div>
    
60. 
    
61. <script>
    
62.     var players = document.querySelectorAll('.player'),
    
63.         vids = document.querySelectorAll('.vid');
    
64.     aud.onplaying = aud.onpause = () => {
    
65.         papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
66.         vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    
67.     };
    
68.     players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
    
69. </script>

复制代码

花简静

凡哥 发表于 2024-5-23 22:34
半成品都出来了

原来那个时候已有半成品了
小图标变贴子，老师这出贴速度够快的。。