css自定义dom标签属性实现不同的飞入显示动画效果代码-html代码-BFW代码库

css自定义dom标签属性实现不同的飞入显示动画效果代码

代码语言：html

所属分类：动画

代码描述：css自定义dom标签属性实现不同的飞入显示动画效果代码，通过在css代码中定义标签属性，实现不同的标签飞入动画效果。

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
[slide-in-from] {
  opacity: 0;
  transform: translateY(var(--translateY,0)) translateX(var(--translateX, 0));
  animation: slideInFrom var(--sif-duration, 250ms) var(--sif-timing, ease-out) var(--sif-delay, 0ms) forwards;
}
[slide-in-from ^= "top"]    { --translateY: -100% }
[slide-in-from ^= "bottom"] { --translateY:  100% }
[slide-in-from $= "left"]   { --translateX: -100% }
[slide-in-from $= "right"]  { --translateX:  100% }

@keyframes slideInFrom{ to {  transform: unset; opacity: unset } }

/* demo */
body { 
  display: grid; 
  gap: 1rem; 
  place-items: center; 
  padding: 1rem; 
  font-family: sans-serif; 
  color: white;
  text-align: center; 
  background: #1D1E22 }
div { 
  padding: 0.5rem 1rem; 
  background-color: var(--clr); 
  color: black;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / .5)
}
div:nth-of-type(1){ --clr: #78C5D5 }
div:nth-of-type(2){ --clr: #459BA8 }
div:nth-of-type(3){ --clr: #79C268 }
div:nth-of-type(4){ --clr: #C5D747 }
div:nth-of-type(5){ --clr: #F5D63D }
div:nth-of-type(6){ --clr: #F18C32 }
div:nth-of-type(7){ --clr: #E868A1 }
div:nth-of-type(8){ --clr: #BF63A6 }
</style>



</head>

<body >
  <h1> SLIDE-IN-FROM </h1>

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