圣诞树html网页代码圣诞节代码html飘雪花大学生HTML5期末作业Web前端网页制作html网页制作htmlcss网页制作成品大学生html网页制作作业html+css

共3个文件

html：2个

ds_store：1个

版权申诉

html

152 浏览量 2024-12-26 17:02:09 上传评论收藏 121KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html圣诞树代码动态3d.zip （3个子文件）

html圣诞树代码动态3d

.DS_Store 6KB

Christmas-no-music.html 160KB

Christmas-line.html 161KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Merry Christmas</title> <style> body { background-color: #000; overflow: hidden; display: flex; align-items: center; justify-content: space-around; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg { width: 90%; height: 90%; visibility: hidden; } .sparkle { /* mix-blend-mode:luminosity */ } body { margin: 0; text-align: center; padding: 0; line-height: 2em; font-family: "Times New Roman", Times, serif; color: #000000; } #header { /* position: absolute; */ text-align: center; color: #C89568; font-family: Times New Roman; font-size: 35px; min-width: 400px; max-height: 100vh; } .header-item { opacity: 0; transition: all .5s ease-in-out; line-height: 1.5; margin: 0; } .header-item.show { opacity: 1; } #treeStarOutline { opacity: 0; } #mask { position: absolute; background-color: #000; width: 100%; height: 100%; font-size: 15rem; animation: shack 0.4s ease-in-out infinite; display: flex; align-items: center; justify-content: center; cursor: pointer; /* display: none; */ } @keyframes shack { 0% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(0); } 75% { transform: rotate(10deg); } 100% { transform: rotate(0); } } #stars { position: absolute; width: 100%; height: 100%; z-index: -1; } </style> </head> <body> <div id="mask">��</div> <canvas id="stars"></canvas> <div class="main">  <svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" > <defs> <circle id="circ" class="particle" cx="0" cy="0" r="1" /> <polygon id="star" class="particle" points="4.55,0 5.95,2.85 9.1,3.3 6.82,5.52 7.36,8.65 4.55,7.17 1.74,8.65 2.27,5.52 0,3.3 3.14,2.85 " /> <polygon id="cross" class="particle" points="4,3.5 2.5,2 4,0.5 3.5,0 2,1.5 0.5,0 0,0.5 1.5,2 0,3.5 0.5,4 2,2.5 3.5,4 " /> <path id="heart" class="particle" d="M2.9,0C2.53,0,2.2,0.18,2,0.47C1.8,0.18,1.47,0,1.1,0C0.49,0,0,0.49,0,1.1 C0,2.6,1.56,4,2,4s2-1.4,2-2.9C4,0.49,3.51,0,2.9,0z" /> <radialGradient id="grad" cx="3" cy="3" r="6" gradientUnits="userSpaceOnUse" > <stop offset="0" style="stop-color: red" /> <stop offset="0.4" style="stop-color: #334673" /> <stop offset="0.6" style="stop-color: hsl(37, 53%, 85%)" /> <stop offset="0.9" style="stop-color: #fee8c7" /> <stop offset="1" style="stop-color: red" /> </radialGradient> <radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse" > <stop offset="0" style="stop-color: #ffffff; stop-opacity: 1" /> <stop offset="0.1" style="stop-color: #0867c7; stop-opacity: 0.6" /> <stop offset="1" style="stop-color: #081029; stop-opacity: 0" /> </radialGradient> <mask id="treePathMask"> <path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6 c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6 c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.8,115.6c23.1,15.4-10.8,21.6-26.2,24.7c-15.4,3.1-20,33.9,33.9,49.3 c53.9,15.4,47.8,40.1,27.7,44.7c-20,4.6-63.2,4.6-27.7,32.4s98.6,21.6,61.6,60.1" /> </mask> <mask id="treeBottomMask"> <path class="treeBottomMask" stroke="#FFF" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9" /> </mask> <mask id="treePotMask"> <path class="treePotMask" stroke="#FFF" stroke-width="8" d="M374.3,502.5c0,0-4.6,20,7.7,29.3c12.3,9.2,40.1,7.7,50.8,0s10.8-23.1,10.8-29.3" /> </mask> <filter id="glow" x="-150%" y="-150%" width="280%" height="280%"> <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" /> <feGaussianBlur in="offOut" stdDeviation="16" result="blur" /> <feComponentTransfer> <feFuncR type="discrete" tableValues="0.8" /> <feFuncG type="discrete" tableValues="0.3" /> <feFuncB type="discrete" tableValues="0.2" />  </feComponentTransfer> <feComposite in="SourceGraphic" operator="over" /> </filter> </defs> <g class="whole"> <g class="pContainer"></g> <g class="tree" mask="url(#treePathMask)"> <path d="M252.95,447.85a20.43,20.43,0,0,1-5.64-6.24,14,14,0,0,1-1.91-8.22,16.93,16.93,0,0,1,3.06-8,33.16,33.16,0,0,1,5.79-6.28A74.78,74.78,0,0,1,268.54,410a163.48,163.48,0,0,1,15.52-6.84c10.54-3.93,21-8.07,30.72-13.46a80.83,80.83,0,0,0,7-4.37,37.51,37.51,0,0,0,6.13-5.24c1.75-1.92,3.14-4.18,3.25-6.35s-1.12-4.18-3-5.81a25,25,0,0,0-6.72-3.91,61.25,61.25,0,0,0-7.8-2.42c-5.41-1.4-10.91-2.72-16.38-4.32a84.17,84.17,0,0,1-16.2-6.19,28.26,28.26,0,0,1-3.86-2.5,15.06,15.06,0,0,1-3.44-3.63,9,9,0,0,1-1.51-5.47,10.22,10.22,0,0,1,.61-2.78,12.88,12.88,0,0,1,1.2-2.34,26.73,26.73,0,0,1,6.58-6.56c2.35-1.76,4.76-3.33,7.19-4.84,4.87-3,9.82-5.75,14.77-8.46,9.91-5.4,19.88-10.59,29.63-16.08,4.87-2.75,9.68-5.56,14.33-8.56A81.88,81.88,0,0,0,359.45,280a23,23,0,0,0,2.41-2.79,8.36,8.36,0,0,0,1.35-2.65,2.13,2.13,0,0,0-.17-1.7,5.53,5.53,0,0,0-1.88-1.77,13.15,13.15,0,0,0-1.49-.83c-.52-.26-1.1-.49-1.76-.77-1.27-.53-2.55-1-3.83-1.53q-3.86-1.48-7.8-2.77c-5.26-1.74-10.6-3.23-16-4.79-2.72-.79-5.47-1.58-8.29-2.61a31.74,31.74,0,0,1-4.33-1.92,14.39,14.39,0,0,1-2.29-1.53,8.74,8.74,0,0,1-2.22-2.66,7.2,7.2,0,0,1-.78-4,9.09,9.09,0,0,1,1-3.24,18.93,18.93,0,0,1,3-4.21,44.88,44.88,0,0,1,3.29-3.19c.56-.5,1.12-1,1.68-1.45l1.61-1.33a84,84,0,0,0,10.88-11.88,326.2,326.2,0,0,0,18.79-27.53c5.88-9.5,11.48-19.19,16.89-29S380.1,146.16,385,136.13c1.22-2.51,2.42-5,3.57-7.54s2.29-5.09,3.14-7.45l.36-1c.14-.38.26-.75.42-1.12.29-.75.64-1.48,1-2.21a25.51,25.51,0,0,1,2.65-4.21,19.15,19.15,0,0,1,3.76-3.69,13.74,13.74,0,0,1,5.24-2.42,12.11,12.11,0,0,1,6.12.25,14.59,14.59,0,0,1,5,2.79,20.59,20.59,0,0,1,3.47,3.79,30.33,30.33,0,0,1,2.5,4.1c.35.7.7,1.39,1,2.1l.46,1.05.4,1,1.64,3.84,3.39,7.67q6.88,15.32,14.36,30.37c5,10,10.18,19.94,15.69,29.65a274.94,274.94,0,0,0,17.9,28A73.36,73.36,0,0,0,487.74,233c.49.4,1,.8,1.48,1.15l1.7,1.19a35,35,0,0,1,3.66,3,17.84,17.84,0,0,1,3.32,4.08,10.83,10.83,0,0,1,1.14,2.94,8.54,8.54,0,0,1,0,3.54,10.27,10.27,0,0,1-3.22,5.39,20.71,20.71,0,0,1-4.15,2.91,49,49,0,0,1-8.4,3.46,154,154,0,0,1-16.77,4.09l-4.15.81a9.18,9.18,0,0,0-2.87,1.08,9.51,9.51,0,0,0-4,4.7,12.55,12.55,0,0,0-.67,6.58,19.5,19.5,0,0,0,2.46,6.74A37.19,37.19,0,0,0,468,295.75a75,75,0,0,0,14.14,7.86,129.67

评论收藏

内容反馈

版权申诉