css文字漂浮景深动画效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  body {
  margin: 0;
  font-size: 20px;
}

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: white;
  color: black;
  font-family: arial, sans-serif;
  overflow: hidden;
}

.content {
  position: relative;
  width: 600px;
  max-width: 100%;
  margin: 20px;
  background: white;
  padding: 60px 40px;
  text-align: center;
  box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
}
.content p {
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 0.6rem;
  letter-spacing: 0.1rem;
  color: #595959;
}
.content p:last-child {
  margin-bottom: 0;
}
.content button {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  border: 3px solid #595959;
  background: transparent;
  font-size: 1rem;
  color: #595959;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}

.particle {
  position: absolute;
  display: block;
  pointer-events: none;
}
.particle:nth-child(1) {
  top: 34.9939246659%;
  left: 47.8983382209%;
  font-size: 23px;
  filter: blur(0.02px);
  animation: 22s float2 infinite;
}
.particle:nth-child(2) {
  top: 59.0799031477%;
  left: 24.3664717349%;
  font-size: 26px;
  filter: blur(0.04px);
  animation: 40s floatReverse2 infinite;
}
.particle:nth-child(3) {
  top: 9.7442143727%;
  left: 9.7943192948%;
  font-size: 21px;
  filter: blur(0.06px);
  animation: 35s float2 infinite;
}
.particle:nth-child(4) {
  top: 92.4574209246%;
  left: 96.8688845401%;
  font-size: 22px;
  filter: blur(0.08px);
  animation: 40s float infinite;
}
.particle:nth-child(5) {
  top: 38.0487804878%;
  left: 29.4117647059%;
  font-size: 20px;
  filter: blur(0.1px);
  animation: 22s float2 infinite;
}
.particle:nth-child(6) {
  top: 34.3558282209%;
  left: 31.5270935961%;
  font-size: 15px;
  filter: blur(0.12px);
  animation: 29s floatReverse2 infinite;
}
.particle:nth-child(7) {
  top: 64.3902439024%;
  left: 31.3725490196%;
  font-size: 20px;
  filter: blur(0.14px);
  animation: 28s float infinite;
}
.particle:nth-child(8) {
  top: 16.7076167076%;
  left: 93.6883629191%;
  font-size: 14px;
  filter: blur(0.16px);
  animation: 30s floatReverse infinite;
}
.particle:nth-child(9) {
  top: 50.2463054187%;
  left: 58.3003952569%;
  font-size: 12px;
  filter: blur(0.18px);
  animation: 40s float2 infinite;
}
.particle:nth-child(10) {
  top: 34.3137254902%;
  left: 88.5826771654%;
  font-size: 16px;
  filter: blur(0.2px);
  animation: 22s float2 infinite;
}
.particle:nth-child(11) {
  top: 93.7114673243%;
  left: 25.7171117705%;
  font-size: 11px;
  filter: blur(0.22px);
  animation: 23s float2 infinite;
}
.particle:nth-child(12) {
  top: 53.5931790499%;
  left: 95.0048971596%;
  font-size: 21px;
  filter: blur(0.24px);
  animation: 26s float infinite;
}
.particle:nth-child(13) {
  top: 3.9312039312%;
  left: 66.0749506903%;
  font-size: 14px;
  filter: blur(0.26px);
  animation: 24s floatReverse2 infinite;
}
.particle:nth-child(14) {
  top: 70.5314009662%;
  left: 86.5758754864%;
  font-size: 28px;
  filter: blur(0.28px);
  animation: 21s floatReverse2 infinite;
}
.particle:nth-child(15) {
  top: 64.7058823529%;
  left: 40.3543307087%;
  font-size: 16px;
  filter: blur(0.3px);
  animation: 23s floatReverse infinite;
}
.particle:nth-child(16) {
  top: 69.5226438188%;
  left: 87.5122910521%;
  font-size: 17px;
  filter: blur(0.32px);
  animation: 21s floatReverse2 infinite;
}
.particle:nth-child(17) {
  top: 6.862745098%;
  left: 68.8976377953%;
  font-size: 16px;
  filter: blur(0.34px);
  animation: 26s floatReverse2 infinite;
}
.particle:nth-child(18) {
  top: 47.7466504263%;
  left: 9.7943192948%;
  font-size: 21px;
  filter: blur(0.36px);
  animation: 32s float2 infinite;
}
.particle:nth-child(19) {
  top: 28.9156626506%;
  left: 1.9417475728%;
  font-size: 30px;
  filter: blur(0.38px);
  animation: 40s floatReverse infinite;
}
.particle:nth-child(20) {
  top: 43.425814234%;
  left: 13.6054421769%;
  font-size: 29px;
  filter: blur(0.4px);
  animation: 36s floatReverse2 infinite;
}
.particle:nth-child(21) {
  top: 56.0885608856%;
  left: 86.8706811451%;
  font-size: 13px;
  filter: blur(0.42px);
  animation: 34s floatReverse2 infinite;
}
.particle:nth-child(22) {
  top: 67.6328502415%;
  left: 38.9105058366%;
  font-size: 28px;
  filter: blur(0.44px);
  animation: 30s float2 infinite;
}
.particle:nth-child(23) {
  top: 32.2738386308%;
  left: 21.6110019646%;
  font-size: 18px;
  filter: blur(0.46px);
  animation: 28s floatReverse2 infinite;
}
.particle:nth-child(24) {
  top: 34.2717258262%;
  left: 29.4985250737%;
  font-size: 17px;
  filter: blur(0.48px);
  animation: 34s floatReverse2 infinite;
}
.particle:nth-child(25) {
  top: 14.7239263804%;
  left: 74.8768472906%;
  font-size: 15px;
  filter: blur(0.5px);
  animation: 40s float2 infinite;
}
.particle:nth-child(26) {
  top: 23.3576642336%;
  left: 28.3757338552%;
  font-size: 22px;
  filter: blur(0.52px);
  animation: 25s float2 infinite;
}
.particle:nth-child(27) {
  top: 10.7579462103%;
  left: 40.2750491159%;
  font-size: 18px;
  filter: blur(0.54px);
  animation: 39s floatReverse infinite;
}
.particle:nth-child(28) {
  top: 89.6385542169%;
  left: 6.7961165049%;
  font-size: 30px;
  filter: blur(0.56px);
  animation: 32s float infinite;
}
.particle:nth-child(29) {
  top: 72.0194647202%;
  left: 57.7299412916%;
  font-size: 22px;
  filter: blur(0.58px);
  animation: 22s floatReverse infinite;
}
.particle:nth-child(30) {
  top: 45.4106280193%;
  left: 44.7470817121%;
  font-size: 28px;
  filter: blur(0.6px);
  animation: 33s float2 infinite;
}
.particle:nth-child(31) {
  top: 49.9388004896%;
  left: 51.1307767945%;
  font-size: 17px;
  filter: blur(0.62px);
  animation: 26s float infinite;
}
.particle:nth-child(32) {
  top: 61.9164619165%;
  left: 25.641025641%;
  font-size: 14px;
  filter: blur(0.64px);
  animation: 38s floatReverse infinite;
}
.particle:nth-child(33) {
  top: 17.3913043478%;
  left: 3.8910505837%;
  font-size: 28px;
  filter: blur(0.66px);
  animation: 29s float2 infinite;
}
.particle:nth-child(34) {
  top: 32.5123152709%;
  left: 46.442687747%;
  font-size: 12px;
  filter: blur(0.68px);
  animation: 25s float2 infinite;
}
.particle:nth-child(35) {
  top: 65.1048088779%;
  left: 24.727992087%;
  font-size: 11px;
  filter: blur(0.7px);
  animation: 34s floatReverse2 infinite;
}
.particle:nth-child(36) {
  top: 52.9411764706%;
  left: 28.5433070866%;
  font-size: 16px;
  filter: blur(0.72px);
  animation: 40s floatReverse infinite;
}
.particle:nth-child(37) {
  top: 24.0963855422%;
  left: 20.3883495146%;
  font-size: 30px;
  filter: blur(0.74px);
  animation: 21s float infinite;
}
.particle:nth-child(38) {
  top: 2.9268292683%;
  left: 18.6274509804%;
  font-size: 20px;
  filter: blur(0.76px);
  animation: 29s float infinite;
}
.particle:nth-child(39) {
  top: 7.8914919852%;
  left: 30.6627101879%;
  font-size: 11px;
  filter: blur(0.78px);
  animation: 32s floatReverse2 infinite;
}
.particle:nth-child(40) {
  top: 45.6310679612%;
  left: 45.8984375%;
  font-size: 24px;
  filter: blur(0.8px);
  animation: 33s floatReverse2 infinite;
}
.particle:nth-child(41) {
  top: 23.5006119951%;
  left: 59.9803343166%;
  font-size: 17px;
  filter: blur(0.82px);
  animation: 36s floatReverse2 infinite;
}
.particle:nth-child(42) {
  top: 68.0437424058%;
  left: 64.5161290323%;
  font-size: 23px;
  filter: blur(0.84px);
  animation: 29s floatReverse2 infinite;
}
.particle:nth-child(43) {
  top: 31.8072289157%;
  left: 97.0873786408%;
  font-size: 30px;
  filter: blur(0.86px);
  animation: 34s floatReverse2 infinite;
}
.particle:nth-child(44) {
  top: 86.5928659287%;
  left: 97.7295162883%;
  font-size: 13px;
  filter: blur(0.88px);
  animation: 31s floatReverse2 infinite;
}
.particle:nth-child(45) {
  top: 40.39408867%;
  left: 42.4901185771%;
  font-size: 12px;
  filter: blur(0.9px);
  animation: 28s float infinite;
}
.particle:nth-child(46) {
  top: 60.3406326034%;
  left: 52.8375733855%;
  font-size: 22px;
  filter: blur(0.92px);
  animation: 24s floatReverse2 infinite;
}
.particle:nth-child(47) {
  top: 17.3913043478%;
  left: 68.093385214%;
  font-size: 28px;
  filter: blur(0.94px);
  animation: 36s float2 infinite;
}
.particle:nth-child(48) {
  top: 86.851628468%;
  left: 60.2526724976%;
  font-size: 29px;
  filter: blur(0.96px);
  animation: 21s floatReverse infinite;
}
.particle:nth-child(49) {
  top: 11.7791411043%;
  left: 4.9261083744%;
  font-size: 15px;
  filter: blur(0.98px);
  animation: 33s floatReverse infinite;
}
.particle:nth-child(50) {
  top: 28.2582216809%;
  left: 26.444662096%;
  font-size: 21px;
  filter: blur(1px);
  animation: 29s float2 infinite;
}
.particle:nth-child(51) {
  top: 14.4927536232%;
  left: 47.6653696498%;
  font-size: 28px;
  filter: blur(1.02px);
  animation: 35s floatReverse2 infinite;
}
.particle:nth-child(52) {
  top: 85.7490864799%;
  left: 50.930460333%;
  font-size: 21px;
  filter: blur(1.04px);
  animation: 40s float2 infinite;
}
.particle:nth-child(53) {
  top: 55.1390568319%;
.........完整代码请登录后点击上方下载按钮下载查看
css文字漂浮景深动画效果

网友评论0

three实现三张图片卡片鼠标交互视觉差异动画效果代码

div+css实现3d视觉差异卡片交互效果代码

gsap+ScrollTrigger实现视觉差异飞机窗口滚动进入页面代码

js+css实现图片鼠标悬浮移动视觉差异动画效果代码

gsap+svg实现带视觉差异的模糊卡片鼠标交互效果代码

div+css实现视觉差异鼠标交互彩虹云效果代码

css实现三维多层视觉差异电影海报效果代码

three实现视觉差异滚动方块效果代码

js+css实现卡片鼠标交互视觉差异效果代码

vanilla-tilt实现视觉差异卡片交互悬浮效果代码
