div+css边框渐变动画效果代码

代码语言:html

所属分类:动画

代码描述:div+css边框渐变动画效果代码

代码标签: div css 边框 渐变 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html {
          height: 100%;
          background: #223;
          display: grid;
          place-items: center;
        }
        
        .box {
          --border-size: 3px;
          --border-angle: 0turn;
          width: 60vmin;
          height: 50vmin;
          background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
          background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
          background-position: center center;
          background-repeat: no-repe.........完整代码请登录后点击上方下载按钮下载查看

网友评论0