十分钟实现节日祝福动画，CSS+JavaScript实现元旦祝福动画，祝大家元旦快乐

视频 

视频所在：https://www.bilibili.com/video/BV1v54y1t7zn

   十分钟实现元旦祝福动画，CSS+JavaScript实现节日祝福动画，祝各人元旦快乐
   

   视频已同步到我的B站账号接待各人关注。
https://space.bilibili.com/563010186
  

  参考代码

  HTML:

1.           元旦快乐:公众号AlbertYang                                                元            旦            
2.             快            乐         
3.               
4.    
5.       

复制代码

CSS:

1. * {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  overflow: hidden;}p {  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #f1f1f1;}p .box {  position: absolute;  width: 450px;  height: 450px;}p .box .circle {  position: relative;  width: 100%;  height: 100%;  background: linear-gradient(135deg, #fff, #e4e3e8);  display: flex;  justify-content: center;  align-items: center;  border-radius: 50%;}p .box .circle::before {  content: "";  position: absolute;  left: 5px;  top: 5px;  right: 5px;  bottom: 5px;  background: linear-gradient(315deg, #fff, #e4e3e8);  border-radius: 50%;  z-index: 1;}p .text {  position: absolute;  font-size: 6em;  color: #ff2a2a;  z-index: 2;}p .text span {  display: inline-block;  animation: blink 3s 2s infinite;  animation-delay: calc(var(--x) * 0.5s);}p i {  position: absolute;  background: #FF2A2A;  border-radius: 50%;  animation: animate linear infinite;}p i:nth-child(even) {  background: transparent;  border: 1px solid #FF2A2A;}@keyframes animate {  0% {    transform: translateY(0);    opacity: 0;    filter: hue-rotate(0deg);  }  10%,  90% {    opacity: 1;  }  100% {    transform: translateY(-3000%);    opacity: 0;    filter: hue-rotate(36000deg);  }}@keyframes blink {  0% {    transform: scale(0);    opacity: 0;    filter: hue-rotate(0deg);  }  30%,  50%,  80% {    transform: scale(1.3);    opacity: 1;  }  100% {    transform: scale(0);    opacity: 0;    filter: hue-rotate(3600deg);  }}

复制代码

  本日的学习就到这里了，由于本人本事和知识有限，如果有写的不对的地方，还请各位大佬品评指正。如果想继续学习提高，接待关注我，天天进步一点点，就是领先的开始，加油。如果以为本文对你有资助的话，接待转发，品评，点赞！！！

来源：https://blog.csdn.net/qq_23853743/article/details/112057323
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！