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;
 .........完整代码请登录后点击上方下载按钮下载查看