css实现文字液态粘粘滚动动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:css实现文字液态粘粘滚动动画效果代码

代码标签: css 文字 液态 粘粘 滚动 动画

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
  padding: 0;
  margin: 0;
}
html {
  height: 100%;
}
body {
  font-family: sans-serif;
  background-color: #000;
  color: #fff;
  height: 100%;
}

.content {
  width: 100%;
/*   max-width: 100ch; */
  height: 100%;
/*   padding: 3em 1em; */
}

.marquee {
  position: relative;
  width: 100%;
  height: 100%;

  font-size: 5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.marquee_blur {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: black;
/*   background-image: linear-gradient(to right, red, transparent 50%),
    linear-gradient(to left, red, transparent 50%); */
    background-image: linear-gradient(to right,  transparent, red);

  filter: contrast(15000);

  p {
/*     mix-blend-mode: soft-light; */
    mix-blend-mode: overla.........完整代码请登录后点击上方下载按钮下载查看

网友评论0