请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
八步半的房间 发表于 2021-1-2 12:15:17 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
视频 

视频所在: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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )