繁星点点新年快乐2021浮动文字效果代码-html代码-BFW代码库

繁星点点新年快乐2021浮动文字效果代码

代码语言：html

所属分类：动画

代码描述：繁星点点新年快乐2021浮动文字效果代码

代码标签：快乐 2021 浮动文字效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #111, #222, #111);
}
.section::before {
  content: "";
  position: absolute;
  width: 30vw;
  height: 30vw;
  border: 5vw solid #ff1062;
  border-radius: 50%;
  box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;
}
.section .section__title {
  position: absolute;
  transform: skewY(-7deg);
  z-index: 10;
  color: #fff;
  text-align: center;
  font-size: 9vw;
  line-height: 2em;
  text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc, 5px 5px 0 #ccc, 10px 10px 0 rgba(0, 0, 0, 0.2);
  animation: floating 5s ease-in-out infinite;
}
.section .section__title span {
  text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc, 5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc, 9px 9px 0 #ccc, 20px 20px 0 rgba(0, 0, 0, 0.2);
  font-weight: 700;
  font-size: 3em;
}
.section i {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
  animation: animate linear infinite;
}

@keyfr.........完整代码请登录后点击上方下载按钮下载查看