（前3个都是在B站学习的记录（代码源自“前端创意工坊”），后一个是自己原创）
1.海浪效果
<!--python:
{
"bg-color":'rgb(240, 217, 158)',
"button-color":'rgb(250, 227, 178)',
"button-hover": "rgb(173, 214, 127)",
"text":"wave of the sea",
"text-color":"white",
}
-->
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(antiquewhite, navajowhite);
height: 100%;
}
.sea {
width: 300px;
height: 300px;
position: relative;
background-color: whitesmoke;
background-image: linear-gradient(
darkblue,
rgba(255, 255, 255, 0) 80%,
rgba(255, 255, 255, 0.5)
);
border-radius: 5px;
box-shadow:2px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.title {
font-size: 20px;
color: white;
letter-spacing: 10px;
text-transform: uppercase;
text-align: center;
line-height: 250px;
}
.sea .wave {
height: 500px;
width: 500px;
background-color: aqua;
filter: opacity(0.3);
position: absolute;
top: -250px;
left: -100px;
border-radius: 43%;
animation: drift infinite;
}
.sea .wave:nth-of-type(1) {
animation-duration: 5s;
}
.sea .wave:nth-of-type(2) {
animation-duration: 10s;
background-color: red;
filter: opacity(0.1);
}
.sea .wave:nth-of-type(3) {
animation-duration: 15s;
}
@keyframes drift
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="sea">
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
<p class="title">The Sea</p>
</div>
</body>
</html>
2.移动光瓶
<!--python:{
"text":"Colorful Glowing Liquid",
"bg-color":"#0f0f0f"
}
-->
<!DOCTYPE html>
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #121212;
}
.bowl
{
position: relative;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
border: 80x solid transparent;
transform-origin: bottom;
animation: animate 5s linear infinite;
}
.bowl::before
{
content: "";
position: absolute;
width: 40%;
height: 30px;
border: 15px solid #444;
border-radius: 50%;
top: -15px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 10px #222;
}
.bowl::after
{
content: "";
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 80px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.liquid
{
position: absolute;
top: 50%;
left: 5px;
right: 5px;
bottom: 5px;
background-color: #41c1fb;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
filter: drop-shadow(0 0 80px #41c1fb);
transform-origin: top;
animation: animateLiquid 5s linear infinite;
}
.liquid::before
{
content: "";
position: absolute;
width: 100%;
height: 20px;
background-color: #41c1e0;
border-radius: 50%;
top:-10px;
filter: drop-shadow(0 0 80px #41c1fb);
}
.shadow
{
position: absolute;
width: 300px;
height: 30px;
background-color: rgba(0, 0, 0, 0.5);
top: calc(50% + 150px);
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
@keyframes animate
{
0%
{
filter: hue-rotate(0deg);
transform: rotate(0deg);
}
25%
{
transform: rotate(15deg);
}
50%
{
transform: rotate(0deg);
}
75%
{
transform: rotate(-15deg);
}
100%
{
filter: hue-rotate(360deg);
transform: rotate(0deg);
}
}
@keyframes animateLiquid {
0%
{
transform: rotate(0deg);
}
25%
{
transform: rotate(-20deg);
}
50%
{
transform: rotate(0deg);
}
75%
{
transform: rotate(20deg);
}
100%
{
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<section>
<div class="shadow"></div>
<div class="bowl">
<div class="liquid"></div>
</div>
</section>
</body>
</html>
3.时钟
<!--python:{
"text":"clock -- for my passed time",
"bg-color":"#7b7ba1",
"text-color":"#7a7aba",
"button-color":"#acacfc",
"button-hover":"#bfbfff",
}-->
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: #acacba;
}
.play
{
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
width: 100%;
}
.clock
{
background-color: #dadada;
width: 300px;
height: 300px;
border-radius: 50px;
display: flex;
justify-content: center;
box-shadow: 20px 20px 10px -10px rgba(0, 0, 0, 0.35),
inset 10px 10px 10px 5px rgba(255, 255, 255, 0.75),
-10px -10px 10px 5px rgba(255, 255, 255, 0.25),
inset 5px 5px 4px 1px rgba(0, 0, 0, 0.35);
}
.numbers
{
width: 250px;
height: 250px;
position: absolute;
background-color: #152b4a;
display: flex;
align-self: center;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 10px 10px 5px -5px #152b4a66,
inset 10px 10px 5px -5px rgba(255, 255, 255, 0.15);
}
.numbers::before
{
content: "";
align-self: center;
position: absolute;
width: 180px;
height: 180px;
background-image: linear-gradient(rgb(245, 75, 75), rgb(105, 105, 250));
border-radius: 50%;
animation: rota 5s infinite;
}
.numbers::after
{
content: "";
position: absolute;
width: 170px;
height: 170px;
background-color: #152b4a;
border-radius: 50%
}
.numbers span
{
position: absolute;
inset: 5px;
color: white;
text-align: center;
font-size: 15px;
transform: rotate(calc(90deg * var(--i)));
}
.numbers span b
{
display: inline-block;
transform: rotate(calc(-90deg * var(--i)));
}
.numbers .center
{
display: flex;
align-self: center;
justify-content: center;
width: 10px;
height: 10px;
background-color:rgb(245, 75, 75);
z-index: 20;
border-radius: 50%;
border: solid 3px beige;
}
.number
{
position: absolute;
inset: 0;
border-radius: 50%;
display: flex;
justify-content: center;
z-index: 10;
}
.number i
{
position: absolute;
width: 3px;
height: 50%;
background-color: #fff;
transform: scaleY(0.55);
transform-origin: bottom;
}
.number#h i
{
transform: scaleY(0.35);
width: 4px;
}
.number#m i
{
transform: scaleY(0.55);
width: 3px;
}
.number#s i
{
transform: scaleY(0.65);
background-color: rgb(245, 75, 75);
width: 2px;
}
.sanlian
{
display: flex;
justify-content: center;
}
.sanlian div
{
display: flex;
align-self: center;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #dadada;
margin: 10px;
box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.35),
inset 10px 10px 10px 5px rgba(255, 255, 255, 0.35),
-10px -10px 10px -5px rgba(255, 255, 255, 0.35);
justify-content: center;
}
.sanlian div b{
display: flex;
align-self: center;
color: #7a7aba
}
.sanlian b:hover
{
color: #000
}
@keyframes rota {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="play">
<div class="clock">
<div class="numbers">
<span style="--i:1"><b>3</b></span>
<span style="--i:2"><b>6</b></span>
<span style="--i:3"><b>9</b></span>
<span style="--i:0"><b>12</b></span>
<div class="number" id="h"><i></i></div>
<div class="number" id="m"><i></i></div>
<div class="number" id="s"><i></i></div>
<div class="center"></div>
</div>
</div>
</div>
<div class="sanlian">
<div><b>点赞</b></div>
<div><b>投币</b></div>
<div><b>关注</b></div>
</div>
<script>
let h = document.querySelector("#h");
let m = document.querySelector("#m");
let s = document.querySelector("#s");
setInterval(function (){
date = new Date();
let hh = date.getHours() * 30;
let mm = date.getMinutes() * 6;
let ss = date.getSeconds() * 6;
h.style.transform = `rotate(${hh + mm/12}deg)`;
m.style.transform = `rotate(${mm}deg)`;
s.style.transform = `rotate(${ss}deg)`;
}, 1000);
</script>
</body>
</html>
4.云朵
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: darkslategrey;
}
.play
{
display: flex;
height: 80vh;
align-items: center;
}
.title
{
text-align: center;
margin-top:20px;
font-size: 40px;
font-family:'Courier New', Courier, monospace;
font-weight:800;
color:rgb(82, 122, 87)
}
.center
{
position: relative;
display: flex;
align-items: center;
margin: auto;
width: 300px;
height: 300px;
}
.cloud
{
background-color: beige;
width: 100px;
height:100px;
border-radius: 50%;
position: absolute;
animation: lighting 3s infinite;
}
@keyframes lighting
{
0% {background-color: beige;}
10% {background-color:rgb(83, 83, 74);}
20% {background-color: beige;}
30% {background-color:rgb(83, 83, 74);}
40% {background-color: beige;}
100% {background-color: beige;}
}
.cloud:nth-of-type(1)
{
top:50px;
left: 20px;
width: 120px;
height: 120px;
}
.cloud:nth-of-type(2)
{
top:30px;
left: 70px;
width: 150px;
height: 150px;
}
.cloud:nth-of-type(3)
{
top:90px;
left: 150px;
width: 110px;
height: 110px;
}
.cloud:nth-of-type(4)
{
top:60px;
left: 50px;
width: 150px;
height: 150px;
}
.rain
{
background-color: aqua;
width: 2px;
height: 10px;
position: absolute;
}
</style>
</head>
<body>
<div class="title">What a rainning day!</div>
<div class="play">
<div class="center">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="eye"></div>
<div class="eye" style="left:150px;"></div>
<div class="mouth"></div>
<div class="rains"></div>
</div>
</div>
<script>
let playObject = document.querySelector(".rains");
let startY = 200;
let minX = 50;
let deltaY = 10;
let maxW = 10;
setInterval(
function() {
let rain = document.createElement("div");
rain.className = "rain";
rain.__x = 40 + Math.random() * 150;
rain.__y = 200;
rain.__w = 3;
rain.__max_y = 300 + Math.random() * 100;
rain.__state = "fall"
rain.style.width = `${Math.random() * 2 + 2}px`;
rain.style.height = `${Math.random() * 3 + 12}px`;
playObject.appendChild(rain);
}, 100
);
setInterval(
function (){
for (var obj of playObject.children)
{
if (obj.__state == "fall")
{
obj.__y += deltaY;
obj.style.top = `${obj.__y}px`;
obj.style.left = `${obj.__x}px`;
if (obj.__y >= obj.__max_y)
{
obj.__state = "died";
obj.style.height = "2px";
}
}
else
{
obj.__w += 5;
obj.style.width = `${obj.__w}px`;
obj.__x -= 1.5
obj.style.left = `${obj.__x}px`;
if (obj.__w > maxW)
{
playObject.removeChild(obj);
}
}
}
},100
);
</script>
</body>
</html>
前几个开头都有奇怪的注释，各位大佬不要误会哈，这是因为我在另一个项目中想在pyqt端显示HTML内容的同时也改变pyqt端的主题。本想用Qwebchannel做，结果网上找的webchannel.js一运行pyqt窗口就奇怪的退出了，也没有报错。之后又想用websocket通信的方式让HTML和python通信，但我太懒，又没做，所以来了个简单粗暴的办法。这几行注释会由我自己写的解析器读取，在python端生成一个配置字典，这个字典控制着界面的配色。
对了，云朵也可加阴影，更有立体感：box-shadow: 10px 1px 10px 5px rgba(0, 0, 0, 0.25);
效果是这样：
那个项目做好后我会在GitHub开源，到时候欢迎各位大佬给出改进建议~
114
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
