最近想玩嵌入式，用到pycharm把之前的代码放这里了，你们想用就用吧
1.这里有个爱心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQVQ4T62TUQ6CMAyG2/GCByAeR7iSxmfgmahHch7HcAB5YSXb2GBlmCW6t6Xtt7/tP4QfD7r6Pu9KwKx29+Jzrtbs/nB/xmIGYIr1wcwnAY0BIBYrhqucAY8akBrejSJqBQjaix2HS4MraVZFeOR83Y05QCwhZbzyD4C8KxWIUiD6DaQ8beej7BDf+a0RiCcASG1FKqKXGSLzwbLGbzJorPQKzeYDAPdCDDL7YwPwhlrcyNuxK6WxdcWBgohtNwBu730AtzaTvX7Mz4C3G3wuJjsJkOIFnTMBCHFmkktRl00AAAAASUVORK5CYII=" />
<title>code</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
overflow: hidden;
min-width: 1600px;
min-height: 900px;
}
.box {
transform: rotate3d(0, 0, 0, 0deg);
transform-origin: 926px 576px;
transition: transform 5s;
transform-style: preserve-3d;
}
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 3px;
border-radius: 50%;
animation: opacity 3s linear infinite;
}
@keyframes opacity {
0% {
opacity: .9;
}
50% {
opacity: .5;
}
100% {
opacity: .99;
}
}
@keyframes animationColor {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
span {
position: absolute;
left: 100px;
top: 100px;
font-size: 32px;
font-weight: bolder;
font-family: cursive;
color: #ccc;
transition-property: left, top, transform, opacity;
transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-duration: 100ms;
}
@keyframes show_temp_me {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.heart {
opacity: 0;
position: absolute;
left: 1340px;
top: 546px;
font-size: 100px;
color: #f00;
text-shadow: 2px 2px 2px #f00;
z-index: 999;
transition: opacity 5s;
}
.heartBroken {
filter: blur(0.007em);
}
.heartBroken::before,
.heartBroken::after {
content: "❤";
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 80%;
}
.heartBroken::before {
animation: crack1 2.5s linear 1s forwards;
clip-path: inset(0 50% 0 0);
}
.heartBroken::after {
animation: crack2 1.5s linear 200ms forwards;
clip-path: inset(0 0 0 50%);
}
@keyframes crack1 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-10deg);
}
}
@keyframes crack2 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(10deg);
}
}
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2)
}
100% {
transform: scale(1)
}
}
.box > div {
position: relative;
transition-property: left, top, opacity;
transition-duration: 3s;
transition-timing-function: ease-out;
}
span {
position: absolute;
left: 100px;
top: 100px;
font-size: 22px;
font-weight: bolder;
font-family: cursive;
color: #ccc;
transition-property: left, top, transform, opacity;
transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-duration: 100ms;
}
.broken {
transform: rotateZ(0deg);
transition-property: transform;
transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-duration: 1s;
}
#love_left {
transform-origin: 870px 780px;
}
#love_right {
transform-origin: 870px 730px;
}
.text_ta {
opacity: 0;
position: relative;
-webkit-background-clip: text;
color: transparent;
font-size: 100px;
transition-property: top, left, opacity;
transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-duration: 2s;
}
.arrow {
width: 222px;
height: 110px;
position: absolute;
top: -300px;
left: 770px;
transform: rotateZ(0deg);
transition-property: top, left, transform;
transition-duration: 1s;
}
.bloods {
position: absolute;
left: 34px;
top: 96px;
width: 32px;
height: 32px;
border-radius: 8px 42px 24px 42px;
background-color: #d30;
transform: rotate(45deg);
transition: top 3s;
}
</style>
</head>
<body>
<div class="stars" id="stars"></div>
<script>
let arr = ['one', 'two', 'three', 'four', 'five', 'six', 'seven']
let love_2 = {
one: [[], []],
two: [[], []],
three: [[], []],
four: [[], []],
five: [[], []],
six: [[], []],
seven: [[], []],
}
let love = {
one: [
[482, 482, 463, 463, 446, 446, 434, 434, 425, 425, 423, 423, 426, 426, 434, 434, 446, 446, 461, 461, 479, 479, 499, 499, 521, 521, 542, 542, 562, 562, 583, 583, 603, 603, 623, 623, 639, 639, 655, 655, 671, 671, 685, 685, 701, 701, 714, 714, 728, 728, 744, 744, 758, 758, 773, 773, 785],
[1366, 1388, 1353, 1401, 1337, 1417, 1318, 1436, 1296, 1458, 1274, 1482, 1252, 1504, 1231, 1526, 1213, 1544, 1198, 1559, 1187, 1568, 1180, 1575, 1177, 1578, 1178, 1577, 1180, 1575, 1184, 1571, 1192, 1563, 1202, 1553, 1215, 1540, 1230, 1525, 1246, 1509, 1262, 1493, 1279, 1476, 1295, 1460, 1312, 1443, 1328, 1427, 1345, 1410, 1361, 1394, 1378]
],
two: [
[501, 501, 489, 489, 471, 471, 456, 456, 445, 445, 444, 444, 447, 447, 455, 455, 468, 468, 486, 486, 507, 507, 527, 527, 546, 546, 566, 566, 586, 586, 605, 605, 622, 622, 638, 638, 653, 653, 667, 667, 681, 681, 694, 694, 708, 708, 724, 724, 737, 737, 752, 752],
[1366, 1388, 1346, 1408, 1333, 1421, 1317, 1437, 1299, 1455, 1278, 1476, 1257, 1497, 1237, 1517, 1221, 1533, 1208, 1546, 1201, 1553, 1200, 1554, 1200, 1554, 1202, 1552, 1206, 1548, 1215, 1539, 1228, 1526, 1242, 1512, 1258, 1496, 1272, 1482, 1287, 1467, 1304, 1450, 1320, 1434, 1335, 1419, 1352, 1402, 1367, 1388]
],
three: [
[520, 520, 510, 510, 498, 498, 481, 481, 465, 465, 464, 464, 467, 467, 480, 480, 497, 497, 518, 518, 538, 538, 557, 557, 578, 578, 598, 598, 614, 614, 631, 631, 645, 645, 660, 660, 673, 673, 688, 688, 703, 703, 716, 716, 733],
[1366, 1388, 1346, 1408, 1327, 1427, 1314, 1440, 1299, 1455, 1277, 1477, 1256, 1498, 1239, 1515, 1226, 1528, 1219, 1535, 1220, 1534, 1221, 1533, 1226, 1528, 1235, 1522, 1249, 1508, 1262, 1495, 1278, 1479, 1294, 1463, 1311, 1446, 1326, 1431, 1341, 1416, 1358, 1399, 1378]
],
four: [
[539, 539, 530, 530, 518, 518, 507, 507, 490, 490, 485, 485, 496, 496, 514, 514, 534, 534, 554, 554, 574, 574, 593, 593, 610, 610, 625, 625, 639, 639, 652, 652, 668, 668, 683, 683, 696, 696, 714],
[1366, 1388, 1346, 1408, 1327, 1427, 1307, 1447, 1294, 1460, 1272, 1482, 1254, 1500, 1241, 1513, 1241, 1513, 1242, 1512, 1247, 1507, 1259, 1495, 1271, 1483, 1286, 1468, 1303, 1451, 1321, 1433, 1335, 1419, 1350, 1404, 1366, 1388, 1379]
],
five: [
[559, 559, 550, 550, 539, 539, 530, 530, 514, 514, 516, 516, 538, 538, 558, 558, 578, 578, 597, 597, 613, 613, 627, 627, 639, 639, 655, 655, 672, 672],
[1366, 1388, 1344, 1410, 1324, 1430, 1304, 1450, 1286, 1468, 1265, 1489, 1262, 1493, 1263, 1492, 1275, 1480, 1287, 1468, 1304, 1451, 1321, 1434, 1339, 1416, 1352, 1400, 1366, 1387]
],
six: [
[580, 580, 570, 570, 560, 560, 550, 550, 536, 536, 556, 556, 576, 576, 592, 592, 606, 606, 619, 619, 634, 634, 650],
[1366, 1388, 1345, 1409, 1325, 1429, 1305, 1449, 1284, 1470, 1285, 1469, 1296, 1458, 1312, 1442, 1328, 1426, 1346, 1408, 1361, 1393, 1377]
],
seven: [
[603, 603, 592, 592, 578, 578, 621],
[1367, 1389, 1346, 1408, 1324, 1428, 1376]
]
}
function stars() {
let boxShadow = "";
for (let i = 0; i < 2000; i++) {
boxShadow += parseInt(1000 - (Math.random() * 2000)) + "px " + parseInt(1000 - (Math.random() * 2000)) + "px #" + Math.random().toString(16).substr(-6) + ",";
}
boxShadow = boxShadow.replace(/,$/gi, "");
document.getElementById("stars").style.boxShadow = boxShadow;
setTimeout(function () {
stars()
}, 6000)
}
window.onload = function () {
stars()
for (const value of arr) {
for (let i = 0; i < love[value][0].length; i++) {
love_2[value][0][i] = love[value][0][i] - 360
love_2[value][1][i] = love[value][1][i] - 1166
}
}
document.getElementsByTagName('body')[0].innerHTML += '<div id="box" class="box"><div style="opacity:0" class="ta" id="ta"></div><div class="me" id="me"></div></div>'
let object = new Class()
object.start()
}
let arrow = {
top: [0, 16, 38, 62, 80, 38, 38, 38, 38, 38, 38, 38, 38, 38, 0, 14, 62, 80],
left: [0, 15, 31, 15, 0, 50, 69, 88, 107, 126, 145, 164, 183, 202, 171, 189, 189, 171],
rotate: [300, 300, 270, 225, 225, 270, 270, 270, 270, 270, 270, 270, 270, 270, 300, 300, 225, 225]
}
class Class {
async start() {
await this.showTA()
await this.show_me()
await this.discolor_me()
await this.show_ta_one()
await this.change_me_color()
await this.heart()
await this.show_ta_all()
await this.near()
await this.rotate()
await this.separate()
await this.arrow()
await this.heartBroken_()
await this.drippingBlood()
await this.ta_disappear()
await this.broken()
this.end()
}
showTA() {
let that = this
return new Promise(function (resolve) {
let width = document.documentElement.clientWidth
let height = document.documentElement.clientHeight
let backgroundImage = ""
for (let i = 0; i < 10; i++) {
backgroundImage += "#" + Math.random().toString(16).substr(-6) + ","
}
backgroundImage = backgroundImage.replace(/,$/gi, ');"');
let style = '"text-fill-color:transparent;background-clip:text;background-size:200% 100%;left:' + (width / 2 - 50) + 'px;top:' + (height / 2 - 50) + 'px;background-image: linear-gradient(to right,' + backgroundImage
document.getElementsByTagName('body')[0].innerHTML += '<p id="text_ta" class="text_ta" style=' + style + '>TA</p>'
let element = document.getElementById('text_ta')
setTimeout(function () {
element.style.opacity = '1'
},500)
setTimeout(function () {
element.style.top = "180px"
element.style.left = "165px"
element.style.animation = "animationColor 5s infinite linear"
setTimeout(function () {
resolve("showTA")
}, 2500)
}, 2800)
that.text_ta_backgroundImage_interval = setInterval(function () {
let backgroundImage = ""
for (let i = 0; i < 10; i++) {
backgroundImage += "#" + Math.random().toString(16).substr(-6) + ","
}
backgroundImage = backgroundImage.replace(/,$/gi, ')');
element.style.backgroundImage = 'linear-gradient(to right,' + backgroundImage
}, 3000)
})
}
show_me() {
return new Promise(async function (resolve, reject) {
document.getElementById("me").innerHTML += '<div id="love_left" class="broken"></div>'
document.getElementById("me").innerHTML += '<div id="love_right" class="broken"></div>'
let love_left = document.getElementById('love_left')
let love_right = document.getElementById('love_right')
let color = "#858585"
for (const value of arr) {
for (let i = 0; i < love[value][0].length; i++) {
if (i % 2 === 0) {
love_left.innerHTML += "<span id=" + value + "_" + i + " style='opacity:0;color:" + color + ";top:" + love[value][0][i] + "px;left:" + love[value][1][i] + "px;text-shadow:2px 2px 2px " + color + ";'>❤</span>"
} else {
love_right.innerHTML += "<span id=" + value + "_" + i + " style='opacity:0;color:" + color + ";top:" + love[value][0][i] + "px;left:" + love[value][1][i] + "px;text-shadow:2px 2px 2px " + color + ";'>❤</span>"
}
}
}
for (const value of arr) {
for (let i = 0; i < love[value][0].length; i++) {
await new Promise(function (resolve) {
setTimeout(function () {
let element = document.getElementById(value + "_" + i)
element.style.opacity = "1"
resolve()
}, 20)
})
}
}
resolve("show_me")
})
}
discolor_me() {
let interval = '';
let time = 800;
return new Promise(function (resolve) {
interval = setInterval(discolor, time)
function discolor() {
let element = "";
for (const value of arr) {
for (let i = 0; i < love[value][0].length; i++) {
element = document.getElementById(value + "_" + i)
element.style.color = "#" + Math.random().toString(16).substr(-6)
element.style.textShadow = "2px 2px 2px #" + Math.random().toString(16).substr(-6)
}
}
clearInterval(interval);
if (time > 400) {
time -= 80;
} else if (time > 390) {
time -= 1;
resolve("discolor_me")
}
if (time > 390) {
interval = setInterval(discolor, time);
}
}
})
}
show_ta_one() {
let that = this
return new Promise(function (resolve) {
let i = 0;
let text_ta = document.getElementById('text_ta')
text_ta.style.transitionDuration = "4s"
text_ta.style.opacity = "0"
clearInterval(that.text_ta_backgroundImage_interval)
setTimeout(function () {
document.getElementById("text_ta").remove()
}, 5000)
document.getElementById("box").innerHTML += '<div id="temp_ta" class="temp_ta"></div>'
let element = document.getElementById('temp_ta')
let interval = setInterval(function () {
element.innerHTML += "<span id=temp_" + i + " style='z-index:-1;opacity:1;:#858585;top:" + love_2.one[0][i] + "px;left:" + love_2.one[1][i] + "px;text-shadow:2px 2px 2px #858585;'>❤</span>"
i++
if (i === love_2.one[0].length) {
clearInterval(interval)
setTimeout(function () {
resolve("show_ta_one")
}, 500)
}
}, 50)
})
}
change_me_color() {
let that = this
return new Promise(async function (resolve) {
document.getElementById("me").innerHTML += '<div style="opacity:0;" id="temp_me" class="temp_me"></div>'
let element = document.getElementById("temp_me")
for (const value of arr) {
for (let i = 0; i < love[value][0].length; i++) {
element.innerHTML += "<span id=temp_" + value + "_" + i + " style='color:#EB098E;top:" + love[value][0][i] + "px;left:" + love[value][1][i] + "px;text-shadow:2px 2px 2px #FDB0DA;'>❤</span>"
}
}
setTimeout(function () {
element.style.animation = "show_temp_me 5s"
setTimeout(function () {
for (const value of arr) {
for (let i = 0; i < love[value][0].length; i++) {
let element = document.getElementById(value + "_" + i)
element.style.color = "#EB098E"
element.style.textShadow = "2px 2px 2px #FDB0DA"
}
}
setTimeout(function () {
document.getElementById("temp_me").remove()
}, 6000)
}, 4000)
resolve("change_me_color")
}, 500)
})
}
heart() {
return new Promise(function (resolve) {
document.getElementById('me').innerHTML += '<p data-text="❤" id="heart" class="heart">❤</p>'
let heart = document.getElementById("heart")
setTimeout(function () {
heart.style.opacity = "1"
heart.style.zIndex = "3"
}, 20)
setTimeout(function () {
heart.style.animation = "beat 1s linear infinite"
setTimeout(function () {
resolve("heart")
}, 500)
}, 4500)
})
}
show_ta_all() {
return new Promise(function (resolve) {
let element = document.getElementById("ta")
for (const value of arr) {
for (let i = 0; i < love_2[value][0].length; i++) {
element.innerHTML += "<span id=" + value + "_" + i + " style='color:#FDB0DA;top:" + love_2[value][0][i] + "px;left:" + love_2[value][1][i] + "px;text-shadow:2px 2px 2px #EB098E;'>❤</span>"
}
}
setTimeout(function () {
element.style.opacity = "1"
setTimeout(function () {
document.getElementById("temp_ta").remove()
resolve("show_ta_all")
}, 3500)
}, 500)
})
}
near() {
return new Promise(function (resolve) {
let me = document.getElementById("me");
let ta = document.getElementById("ta");
me.style.top = "0";
me.style.left = "0";
ta.style.top = "0";
ta.style.left = "0";
setTimeout(function () {
me.style.top = "-132px";
me.style.left = "-364px";
ta.style.top = "230px";
ta.style.left = "600px";
setTimeout(function () {
resolve("near");
}, 4000)
}, 100)
})
}
rotate() {
return new Promise(function (resolve) {
document.getElementById("box").style.transform = "rotate3d(1,1,1,360deg)";
setTimeout(function () {
resolve("rotate")
}, 6500)
})
}
separate() {
return new Promise(function (resolve) {
let ta = document.getElementById("ta")
ta.style.top = "0"
ta.style.left = "0"
setTimeout(function () {
resolve()
}, 3500)
})
}
arrow() {
return new Promise(function (resolve) {
let me = document.getElementById("me")
me.innerHTML += '<div class="arrow" id="arrow"></div>'
let element = document.getElementById("arrow");
for (let i = 0; i < 18; i++) {
let style = "'z-index:2;color:#fe0;top:" + arrow.top[i] + "px;left:" + arrow.left[i] + "px;transform: rotate(" + arrow.rotate[i] + "deg)'"
element.innerHTML += '<span id="arrow_' + i + '" style=' + style + '>❤</span>'
}
setTimeout(function () {
element.style.top = parseInt(Math.random() * (400 - 100) + 100) + "px";
}, 1000)
setTimeout(function () {
let heart = document.getElementById("heart")
let heart_center_x = Math.floor(heart.getBoundingClientRect().left) + Math.floor(heart.getBoundingClientRect().width / 2)
let heart_center_y = Math.floor(heart.getBoundingClientRect().top) + Math.floor(heart.getBoundingClientRect().height / 2)
let arrow = document.getElementById("arrow")
let rotate = 360 * Math.atan((arrow.getBoundingClientRect().y - heart.getBoundingClientRect().y) / (arrow.getBoundingClientRect().x - heart.getBoundingClientRect().x)) / (2 * Math.PI);
element.style.transform = "rotate(" + rotate + "deg)"
let x = heart_center_x + Math.abs(me.getBoundingClientRect().left) - (arrow.getBoundingClientRect().width / 2)
let y = heart_center_y + Math.abs(me.getBoundingClientRect().top) - (arrow.getBoundingClientRect().height / 2)
setTimeout(function () {
element.style.top = y + 'px'
element.style.left = x + 'px'
setTimeout(function () {
heart.style.animation = ""
resolve()
}, 2000)
}, 2000)
}, 3000)
})
}
heartBroken_() {
return new Promise(function (resolve) {
let element = document.getElementById('heart')
element.classList.add("heartBroken")
setTimeout(function () {
element.innerHTML = ''
element.innerText = ''
setTimeout(function () {
document.getElementById('arrow').style.top = window.screen.height + 200 + "px"
setTimeout(function () {
resolve()
}, 2000)
}, 2000)
}, 800)
})
}
drippingBlood() {
return new Promise(function (resolve) {
let height = document.documentElement.clientHeight + 50
let heart = document.getElementById("heart")
heart.innerHTML += '<div id="blood"></div>'
let blood = document.getElementById('blood')
let i = 1;
let stop = 10;
let intervalID = setInterval(function () {
if (i === 6){
resolve()
}
if (i > stop) {
clearInterval(intervalID)
return
}
blood.innerHTML += "<p id='blood_" + i + "'class='bloods'></p>"
start(i)
i++
}, 1000)
function start(i){
if(i === stop){
setTimeout(function () {
blood.innerHTML = ''
},2100)
}
setTimeout(function () {
document.getElementById("blood_" + i).style.top = height+"px"
}, 50)
}
})
}
ta_disappear(){
return new Promise(function (resolve){
let ta = document.getElementById('ta');
ta.style.top = "-300px"
ta.style.left = "-200px"
ta.style.opacity = '0'
setTimeout(function () {
document.getElementById("heart").style.opacity = '0'
setTimeout(function () {
resolve()
},3500)
},3000)
})
}
broken(){
return new Promise(function (resolve){
let height = window.screen.height * 1.2
let width = window.screen.width * 1.2
let top = "";
let left = "";
let love_left = document.getElementById('love_left').childNodes;
let love_right = document.getElementById('love_right').childNodes
for (let i = 0; i < love_left.length; i++) {
top = parseInt(Math.random() * (height - 1) + 1)
left = parseInt(Math.random() * (width - 1) + 1)
love_left[i].style.transitionDuration = '3s';
love_left[i].style.top = top + "px";
love_left[i].style.left = left + "px";
love_left[i].style.transform = "rotate("+(Math.random() * (360 - 1) + 1)+"deg)"
}
for (let i = 0; i < love_right.length; i++) {
top = parseInt(Math.random() * (height - 1) + 1)
left = parseInt(Math.random() * (width - 1) + 1)
love_right[i].style.transitionDuration = '3s';
love_right[i].style.top = top + "px";
love_right[i].style.left = left + "px";
love_right[i].style.transform = "rotate("+(Math.random() * (360 - 1) + 1)+"deg)"
}
setTimeout(function () {
resolve()
},3500)
})
}
end(){
document.getElementById('me').style.opacity = '0'
setTimeout(function () {
let body = document.getElementsByTagName('body');
body.removeChild(document.getElementById('box'));
},5000)
}
}
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下雪背景效果和爱心</title>
<style type="text/css">
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
background-color: #fce8f5;
}
#snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.snowflake {
position: absolute;
width: 10px;
height: 10px;
background-color: #913645;
border-radius: 50%;
opacity: 0.8;
pointer-events: none;
animation: snowfall linear infinite;
}
@keyframes snowfall {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100vh);
}
}
.heart {
width: 300px;
height: 300px;
position: relative;
animation: heartbeat 2s infinite;
transform-origin: center center;
}
.heart:before,
.heart:after {
content: "";
background-color: #ff0000;
border-radius: 50px 50px 0 0;
position: absolute;
top: 0;
}
.heart:before {
left: 100px;
width: 100px;
height: 160px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
width: 100px;
height: 160px;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
#timeElapsed {
text-align: center;
font-size: 24px;
margin-top: 18px;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes falling {
0% {
transform: translateY(-100vh);
}
100% {
transform: translateY(100vh);
}
}
.sakura {
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
background-image: url('https://www.unicode.org/emoji/charts/full-emoji-list.html#1f338'); /* 🌸的Unicode转义序列 */
background-size: cover;
animation: falling linear infinite;
animation-duration: 10s;
}
</style>
</head>
<body>
<div id="snow-container"></div>
<div class="heart"></div>
<div id="timeElapsed"></div>
<script>
function getTimeElapsed() {
var startDate = new Date("2020-02-04"); // 设置开始日期，替换为实际的起始日期
var currentDate = new Date();
var timeDiff = currentDate - startDate;
var milliseconds = timeDiff % 1000;
timeDiff = Math.floor(timeDiff / 1000);
var seconds = timeDiff % 60;
timeDiff = Math.floor(timeDiff / 60);
var minutes = timeDiff % 60;
timeDiff = Math.floor(timeDiff / 60);
var hours = timeDiff % 24;
timeDiff = Math.floor(timeDiff / 24);
var days = timeDiff;
var timeString = "宝贝我们已经在一起 " + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒了";
document.getElementById("timeElapsed").textContent = timeString;
}
setInterval(getTimeElapsed, 1000);
</script>
<script>
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
snowflake.style.opacity = Math.random();
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
const randomColor = getRandomColor();
snowflake.style.backgroundColor = randomColor;
snowflake.innerHTML = '命运之光'; // You can customize the snowflake symbol here
return snowflake;
}
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function snowfall() {
const snowContainer = document.getElementById('snow-container');
const numSnowflakes = 50; // Adjust the number of snowflakes here
for (let i = 0; i < numSnowflakes; i++) {
const snowflake = createSnowflake();
snowContainer.appendChild(snowflake);
}
}
snowfall();
</script>
<script>
function createSakura() {
var sakura = document.createElement("div");
sakura.className = "sakura";
sakura.style.left = Math.random() * 100 + "vw";
sakura.style.animationDelay = Math.random() * 5 + "s";
document.body.appendChild(sakura);
setTimeout(function () {
sakura.remove();
}, 10000);
}
setInterval(createSakura, 200);
</script>
</body>
</html>
3.带相册的
css的
/*默认样式*/
*{
margin: 0;
padding: 0;
}
ol,ul{list-style: none;}
/*外层盒子*/
#cube{
height: 300px;
width: 300px;
/* 将整个盒子至于中间 */
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/* 这是旋转基点 */
transform-origin: -550px 550px 100px;
/* 设置景深 */
perspective:800px;
}
#cube ul{
width: 250px;
height: 250px;
transform-style: preserve-3d;
animation: rotate1 20s linear infinite;
}
#cube ul img{
width: 200px;
height: 200px;
}
#cube ul li{
width: 200px;
height: 200px;
position: absolute;
/* 设置过渡时间 */
transition: 5s;
}
#cube ul li:nth-child(1){left: 0;top: 0;opacity: .4;transform: translateZ(100px);}
#cube ul li:nth-child(2){left: 100px;top: 0;transform: rotateY(90deg);opacity: .4;}
#cube ul li:nth-child(3){left: -100px;top: 0;transform: rotateY(-90deg);opacity: .4;}
#cube ul li:nth-child(4){left: 0;top: 100px;transform: rotateX(-90deg);opacity:.4;}
#cube ul li:nth-child(5){left: 0;top: -100px;transform: rotateX(90deg);opacity: .4;}
#cube ul li:nth-child(6){left: 0;top: 0;transform: translateZ(-100px) rotateY(180deg);opacity: .4;}
/* 内层盒子*/
#cube ol{
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
/* 给内层盒子设置3d空间 */
transform-style: preserve-3d;
/* 设置动画 */
animation: rotate1 5s linear infinite;
}
#cube ol img{
width: 100px;
height: 100px;
}
#cube ol li{
width: 100px;
height: 100px;
position: absolute;
}
#cube ol li:nth-child(1){left: 0;top: 0;opacity: .7;transform: translateZ(50px);}
#cube ol li:nth-child(2){left: 100px;top: 0px;transform-origin: left;transform:translateZ(50px) rotateY(90deg);opacity: .7;}
#cube ol li:nth-child(3){left: -100px;top: 0px;transform-origin: right;transform:translateZ(50px) rotateY(-90deg);opacity: .7;}
#cube ol li:nth-child(4){left:0px;top: 100px;transform-origin: top;transform:translateZ(50px) rotateX(-90deg);opacity: .7;}
#cube ol li:nth-child(5){left:0px;top: -100px;transform-origin: bottom;transform:translateZ(50px) rotateX(90deg);opacity: .7;}
#cube ol li:nth-child(6){left:0px;top: 0px;transform: translateZ(-50px) rotateY(180deg);opacity: .7;}
/*外层盒子鼠标移入效果*/
#cube:hover ul li:nth-child(1){transform: translateZ(200px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(2){transform:rotateY(90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(3){transform:rotateY(-90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(4){transform:rotateX(-90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(5){transform:rotateX(90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(6){transform:rotateY(180deg) translateZ(200px) scale(1.5);opacity: .6;}
/*旋转动画效果*/
@keyframes rotate1{
0%{transform: rotateY(0);}
100%{transform: rotateY(360deg);}
}html的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D立体动态相册</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body background="img/07.png"
style = "background-repeat:no-repeat;
background-attachment:fixed;
backgroud-size:100% 100%;">
<div id="cube">
<!--外层盒子-->
<ul>
<li>
<img src="img/1.jpg" >
</li>
<li>
<img src="img/2.jpg" >
</li>
<li>
<img src="img/3.jpg" >
</li>
<li>
<img src="img/4.jpg" >
</li>
<li>
<img src="img/5.jpg" >
</li>
<li>
<img src="img/6.jpg" >
</li>
</ul>
<!--内层盒子-->
<ol>
<li>
<img src="img/01.jpg" >
</li>
<li>
<img src="img/02.jpg" >
</li>
<li>
<img src="img/03.jpg" >
</li>
<li>
<img src="img/04.jpg" >
</li>
<li>
<img src="img/05.jpg" >
</li>
<li>
<img src="img/06.jpg" >
</li>
</ol>
</div>
<div class="header"><canvas id="canvas"></canvas></div>
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 3000;//星星数量
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#cccccc');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
// End cache
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
//星星移动范围，值越大范围越小，
}
var Star = function() {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 8;
//星星大小
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000;
//星星移动速度
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function() {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5; //尾巴
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html> 
按照这个命名方式放就行
扫一扫
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
