【圣诞树】html+css实现流星圣诞树

月落_lexie
2,182 阅读5分钟

QQ20241210-153259.gif

先上最终效果图，一个简单的html页面跳转到另一个html页面

首先是第一个html页面，入口页面

里面的icon直接从iconfont矢量图标库找就行，找到了下载几个喜欢的图标

微信截图_20241210160929.png html部分：

<div id="main">
        <div class="left">
            <button class="btn">
                <a href="./2.html
                  onclick="onLinkClick" class="link">开启圣诞！</a>
            </button>
            <img src="./assets/主题.png" alt="" class="icon-1">
            <img src="./assets/圣诞礼物.png" alt="" class="icon-2">
            <img src="./assets/圣诞礼物.png" alt="" class="icon-3">
            <img src="./assets/主题.png" alt="" class="icon-4">
            <img src="./assets/圣诞礼物.png" alt="" class="icon-5">
             <--此处省略class为icon-6到icon-148的img标签-->
            <img src="./assets/圣诞花.png" alt="" class="icon-149">
            <img src="./assets/圣诞礼物.png" alt="" class="icon-150">
            <img src="./assets/圣诞树.png" alt="" class="tree">
        </div
        </div>
    </div>

css部分：

` #main {
  width: 100vw;
  height: 100vh;
  margin: auto;
  background-color: white;
  position: relative;
  border: 3px dashed #218359;
}

#main .left {
  width: 100vw;
  height: 100vh;
  background-color: #9E0016;
  position: relative;
  overflow: hidden;
}

#main .left .tree {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(50%, -50%);
}

.left .btn {
  background-color: #218359;
  width: 100px;
  height: 60px;
  border-radius: 50% 20%/10% 40%;
  position: absolute;
  top: 150px;
  left: 188px;
  animation: heart 0.8s linear infinite;
}

.left .link {
  width: 100px;
  height: 60px;
  text-decoration: none;
  border-radius: 50% 20%/10% 40%;
}

.icon-1 {
  position: absolute;
  left: 66vw;
  top: 83vh;
  width: 2rem;
  height: 2rem;
  animation: heart1 0.6s linear infinite;
}

.icon-2 {
  position: absolute;
  left: 49vw;
  top: 51vh;
  width: 2rem;
  height: 2rem;
  animation: heart1 0.6s linear infinite;
}

.icon-3 {
  position: absolute;
  left: 52vw;
  top: 73vh;
  width: 2rem;
  height: 2rem;
  animation: heart1 0.6s linear infinite;
}

.icon-4 {
  position: absolute;
  left: 7vw;
  top: 98vh;
  width: 2rem;
  height: 2rem;
  animation: heart1 0.6s linear infinite;
}  
//此处省略了.icon-5到.icon-150的样式，定位的top值和left值都是使用随机数生成的
`

第二个html页面，流星圣诞树页面

html部分：

XXX，圣诞快乐

  • <--总共需要256个li标签，代码太多就不复制了-->
**css部分：** 
:root {
    --background:#3C3B3D;
  }
  
  body {
    position: relative;
    background: var(--background);
    
  }
  .box{
    position: relative;
    left: 0;
    top:0;
    width: 100vw;
    height: 100vh;
    border-radius: 50%;
    transform: rotate(-45deg);
    overflow: hidden;
  }
  body ul {
    padding: 0;
  }
  .main{
    width: 360px;
    height: 140px;
    // border-radius: 10px;
    background-color: transparent;
    /* 盒子居中 */
    position: absolute;
    top: 20%;
    // margin-top: 200px;
    left: 50%;
    margin-left: -50px;
    /* 文字居中 */
    text-align: center;
    line-height: 40px;
    font-family:  Georgia, serif;
    color: aquamarine;
    overflow: hidden;
}
.main :nth-child(1){
  background: linear-gradient(to right, transparent , #0FF);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}
.main :nth-child(2){
  position: absolute;
  background: linear-gradient(to bottom, transparent , #0FF);
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  animation: run2 1s linear infinite;
  animation-delay: .5s;
}
.main :nth-child(3){
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height:1px;
  background: linear-gradient(to left, transparent , #0FF);
  animation:run3 1s linear infinite;
  animation-delay: 1s;
}
.main :nth-child(4){
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height:100%;
  background: linear-gradient(to top, transparent , #0FF);
  animation:run4 1s linear infinite;
  animation-delay: 1.5s;
}
@keyframes run1{
  0%{
      transform: translateX(-200px);
  }
  100%{
      transform: translateX(200px);
  }
}
@keyframes run2{
  0%{
      transform: translateY(-40px);
  }
  100%{
      transform: translateY(40px);
  }
}
@keyframes run3{
  0%{
      transform: translateX(200px);
  }
  100%{
      transform: translateX(-200px);
  }
}
@keyframes run4{
  0%{
      transform: translateY(40px);
  }
  100%{
      transform: translateY(-40px);
  }
}
.main :nth-child(1){
  animation: run1 1s linear infinite;
}
.main :nth-child(2){
  animation-delay: .5s;
}
.main :nth-child(3){
  animation-delay: 1s;   
}
.main :nth-child(4){
  animation-delay: 1.5s;
}
  body ul li {
    list-style: none;
  }
  body ul:nth-child(1) {
    position: absolute;
    top: 20vh;
    left: 43%;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    transform: translate(-50%, -50%);
  }
  body ul:nth-child(1) li {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 0 0.5rem 1rem 0.5rem;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #FFCE54;
    transform-origin: 0.5rem 1rem;
  }
  body ul:nth-child(1) li:nth-child(0) {
    transform: rotate(0deg);
  }
  body ul:nth-child(1) li:nth-child(1) {
    transform: rotate(72deg);
  }
  body ul:nth-child(1) li:nth-child(2) {
    transform: rotate(144deg);
  }
  body ul:nth-child(1) li:nth-child(3) {
    transform: rotate(216deg);
  }
  body ul:nth-child(1) li:nth-child(4) {
    transform: rotate(288deg);
  }
  body ul:nth-child(2) li {
    position: absolute;
    top: 20vh;
    left: 45%;
    // width: 0.0625rem;
    height: 60vh;
    transform-origin: 50% 0%;
  }
  body ul:nth-child(2) li:nth-child(1) {
  transform: rotate(0deg);
}

body ul:nth-child(2) li:nth-child(1):before, body ul:nth-child(2) li:nth-child(1):after {
  animation-delay: -0.015625s;
}

body ul:nth-child(2) li:nth-child(2) {
  transform: rotate(2.8238255814deg);
}

body ul:nth-child(2) li:nth-child(2):before, body ul:nth-child(2) li:nth-child(2):after {
  animation-delay: -0.03125s;
}

body ul:nth-child(2) li:nth-child(3) {
  transform: rotate(5.6476511628deg);
}

body ul:nth-child(2) li:nth-child(3):before, body ul:nth-child(2) li:nth-child(3):after {
  animation-delay: -0.046875s;
}

body ul:nth-child(2) li:nth-child(4) {
  transform: rotate(8.4714767442deg);
}

body ul:nth-child(2) li:nth-child(4):before, body ul:nth-child(2) li:nth-child(4):after {
  animation-delay: -0.0625s;
}
//这里代码太多，省略li:nth-child(5)~li:nth-child(254)，使用sass一次性生成256个li的样式就行
body ul:nth-child(2) li:nth-child(255):before, body ul:nth-child(2) li:nth-child(255):after {
  animation-delay: -3.984375s;
}

body ul:nth-child(2) li:nth-child(256) {
  transform: rotate(2.8238255814deg);
}

body ul:nth-child(2) li:nth-child(256):before, body ul:nth-child(2) li:nth-child(256):after {
  animation-delay: -4s;
}

body ul:nth-child(2) li:before, body ul:nth-child(2) li:after {
  content: "";
  position: absolute;
  top: 0%;
  animation: fall 4s linear infinite;
}

body ul:nth-child(2) li:before {
  width: 0.0625rem;
  height: 3rem;
  background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.5));
}

body ul:nth-child(2) li:after {
  bottom: 0;
  transform: translate(-50%, 3rem);
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 100%;
  background: #ffce54;
}

body ul:nth-child(2) li:nth-child(4n):after {
  background: #D8334A;
}

body ul:nth-child(2) li:nth-child(4n+1):after {
  background: #FFCE54;
}

body ul:nth-child(2) li:nth-child(4n+2):after {
  background: #2ECC71;
}

body ul:nth-child(2) li:nth-child(4n+3):after {
  background: #5D9CEC;
}
@keyframes fall {
  0% {
    opacity: 0;
    top: 0%;
  }
  5% {
    opacity: 0;
  }
  15%, 90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100%;
  }
}

如果实在是懒得动手，这里也附上源码链接

圣诞快乐

avatar
文章
阅读
粉丝