css实现三维文字按钮悬浮倾斜走光动画效果代码

代码语言:html

所属分类:悬停

代码描述:css实现三维文字按钮悬浮倾斜走光动画效果代码

代码标签: css 三维 文字 按钮 悬浮 倾斜 走光 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        button {
          background: 
            linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
            #E97F02; /* main color */
          color: #0000;
          border: none;
          transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
          text-shadow: 
            calc(var(--_i,-1)* 0.08em) -.01em 0   #fff,
            calc(var(--_i,-1)*-0.08em)  .01em 2px #0004;
          outline-offset: .1em;
          transition: 0.3s;
        }
        button:hover,
        button:focus-visible {
          --_.........完整代码请登录后点击上方下载按钮下载查看

网友评论0