css 流动边框

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“utf8”>
  5. <style>
  6. :root {
  7.     –border-flow-size: 10em;
  8.     –border-flow-width: calc(var(–border-flow-size) / 40);
  9.     –border-flow-width-double: calc(var(–border-flow-width)*2);
  10.     –border-flow-duration: 2s;
  11.     –border-flow-border-color: #0073aa;
  12.     –border-flow-hover-color: LightCoral;
  13. }
  14. .border-flow {
  15.     width: var(–border-flow-size);
  16.     height: var(–border-flow-size);
  17.     position: relative;
  18.     padding:5px;
  19. }
  20. .border-flow::before, .border-flow::after {
  21.     content: ”;
  22.     position: absolute;
  23.     border: var(–border-flow-width) solid var(–border-flow-border-color);
  24.     /* 让边框在内容区域内绘制 */
  25.     box-sizing: border-box;
  26.     transition: background-color 1s;
  27. }
  28. .border-flow::before {
  29.     animation: flow-border-run calc(var(–border-flow-duration) * 2) linear infinite;
  30. }
  31. .border-flow::after {
  32.     animation: flow-border-run calc(var(–border-flow-duration) * 2) calc(var(–border-flow-duration) / -1) linear infinite;
  33. }
  34. .border-flow:hover::before, .border-flow:hover::after {
  35.     background-color: var(–border-flow-hover-color);
  36. }
  37. .border-flow-content {
  38.     width: calc(100% – var(–border-flow-width-double));
  39.     height: calc(100% – var(–border-flow-width-double));
  40.     margin: var(–border-flow-width);
  41.     background: #ccc;
  42. }
  43. @keyframes flow-border-run {
  44.     /* 这里将动画分成了4步;也可以改为2步,这时before和after用的就要是两套keyframes了 */
  45.     from, to {
  46.         width: var(–border-flow-width-double);
  47.         height: 100%;
  48.         top: 0;
  49.         left: 0;
  50.     }
  51.     25% {
  52.         width: 100%;
  53.         height: var(–border-flow-width-double);
  54.         top: calc(100% – var(–border-flow-width-double));
  55.         left: 0;
  56.     }
  57.     50% {
  58.         width: var(–border-flow-width-double);
  59.         height: 100%;
  60.         top: 0;
  61.         left: calc(100% – var(–border-flow-width-double));
  62.     }
  63.     75% {
  64.         width: 100%;
  65.         height: var(–border-flow-width-double);
  66.         top: 0%;
  67.         left: 0%;
  68.     }
  69.     /* 需要设置临界效果,否则会渐变 */
  70.     from, to, 24.9% {
  71.         border-left-color: var(–border-flow-border-color);
  72.         border-top-color: transparent;
  73.         border-right-color: transparent;
  74.         border-bottom-color: var(–border-flow-border-color);
  75.     }
  76.     25%, 49.9% {
  77.         border-left-color: transparent;
  78.         border-top-color: transparent;
  79.         border-right-color: var(–border-flow-border-color);
  80.         border-bottom-color: var(–border-flow-border-color);
  81.     }
  82.     50%, 74.9% {
  83.         border-left-color: transparent;
  84.         border-top-color: var(–border-flow-border-color);
  85.         border-right-color: var(–border-flow-border-color);
  86.         border-bottom-color: transparent;
  87.     }
  88.     75%, 99.9% {
  89.         border-left-color: var(–border-flow-border-color);
  90.         border-top-color: var(–border-flow-border-color);
  91.         border-right-color: transparent;
  92.         border-bottom-color: transparent;
  93.     }
  94. }
  95. </style>
  96. <style>
  97. .border-flow2 {
  98.     width: var(–border-flow-size);
  99.     height: var(–border-flow-size);
  100.     position: relative;
  101.     padding:5px;
  102. }
  103. .border-flow2-edge {
  104.     position: absolute;
  105.     /* 必须把其他边框置0,否则有默认值存在 */
  106.     border: 0px solid var(–border-flow-border-color);
  107.     box-sizing: border-box;
  108. }
  109. /*
  110. 注意:CSS中不能前向选择,而只能后向选择!
  111. 因为如果CSS支持了父选择器,那就必须要页面所有子元素加载完毕才能渲染HTML文档,
  112. 因为所谓“父选择器”,就是后代元素影响祖先元素,如果后代元素还没加载处理,如何影响祖先元素的样式?
  113. 于是,网页渲染呈现速度就会大大减慢,浏览器会出现长时间的白板。
  114. */
  115. /* 波浪号和加号都是选择其后的元素,区别是加号只取一个,波浪取所有
  116. .border-flow-content:hover ~ .border-flow2-edge { */
  117. .border-flow2:hover > .border-flow2-edge {
  118.     background-color: var(–border-flow-hover-color);
  119. }
  120. .border-flow2-left {
  121.     width: var(–border-flow-width-double);
  122.     height: 100%;
  123.     left: 0;
  124.     border-left-width: var(–border-flow-width);
  125.     animation: flow2-border-run-left var(–border-flow-duration) calc(var(–border-flow-duration) / -2) linear infinite;
  126. }
  127. .border-flow2-top {
  128.     height: var(–border-flow-width-double);
  129.     width: 100%;
  130.     top: 0;
  131.     border-top-width: var(–border-flow-width);
  132.     animation: flow2-border-run-top var(–border-flow-duration) linear infinite;
  133. }
  134. .border-flow2-right {
  135.     width: var(–border-flow-width-double);
  136.     height: 100%;
  137.     right: 0;
  138.     border-right-width: var(–border-flow-width);
  139.     animation: flow2-border-run-right var(–border-flow-duration) calc(var(–border-flow-duration) / -2) linear infinite;
  140. }
  141. .border-flow2-bottom {
  142.     height: var(–border-flow-width-double);
  143.     width: 100%;
  144.     bottom: 0;
  145.     border-bottom-width: var(–border-flow-width);
  146.     animation: flow2-border-run-bottom var(–border-flow-duration) linear infinite;
  147. }
  148. @keyframes flow2-border-run-left {
  149.     from, to {
  150.         height: 0;
  151.     }
  152.     50% {
  153.         height: 100%;
  154.     }
  155.     from, to, 49.9% {
  156.         top: 0;
  157.         bottom: auto;
  158.     }
  159.     50%, 99.9% {
  160.         top: auto;
  161.         bottom: 0;
  162.     }
  163. }
  164. @keyframes flow2-border-run-top {
  165.     from, to {
  166.         width: 0;
  167.     }
  168.     50% {
  169.         width: 100%;
  170.     }
  171.     from, to, 49.9% {
  172.         left: auto;
  173.         right: 0;
  174.     }
  175.     50%, 99.9% {
  176.         left: 0;
  177.         right: auto;
  178.     }
  179. }
  180. @keyframes flow2-border-run-right {
  181.     from, to {
  182.         height: 0;
  183.     }
  184.     50% {
  185.         height: 100%;
  186.     }
  187.     from, to, 49.9% {
  188.         top: auto;
  189.         bottom: 0;
  190.     }
  191.     50%, 99.9% {
  192.         top: 0;
  193.         bottom: auto;
  194.     }
  195. }
  196. @keyframes flow2-border-run-bottom {
  197.     from, to {
  198.         width: 0;
  199.     }
  200.     50% {
  201.         width: 100%;
  202.     }
  203.     from, to, 49.9% {
  204.         left: 0;
  205.         right: auto;
  206.     }
  207.     50%, 99.9% {
  208.         left: auto;
  209.         right: 0;
  210.     }
  211. }
  212. </style>
  213. <style>
  214. .border-flow3 {
  215.     width: var(–border-flow-size);
  216.     height: var(–border-flow-size);
  217.     position: relative;
  218.     box-sizing: border-box;
  219.     padding:5px;
  220. }
  221. .border-flow3::before, .border-flow3::after {
  222.     content: ”;
  223.     position: absolute;
  224.     width: 100%;
  225.     height: 100%;
  226.     top: 0;
  227.     left: 0;
  228. }
  229. .border-flow3::before {
  230.     box-shadow: 0 0 0 var(–border-flow-width) var(–border-flow-border-color) inset;
  231.     animation: flow3-border-run calc(var(–border-flow-duration) * 2) calc(var(–border-flow-duration) / -1) linear infinite;
  232. }
  233. .border-flow3::after {
  234.     box-shadow: 0 0 0 var(–border-flow-width) var(–border-flow-border-color) inset;
  235.     animation: flow3-border-run calc(var(–border-flow-duration) * 2) linear infinite;
  236. }
  237. .border-flow3:hover::before, .border-flow3:hover::after {
  238.     /* 如果只在hover的时候设置transition,那么进入有效,但是退出无效(即退出时不会有缓动) */
  239.     transition: background-color 1s;
  240.     background-color: var(–border-flow-hover-color);
  241. }
  242. @keyframes flow3-border-run {
  243.     /*
  244.     clip通过对元素进行剪切来控制元素的可显示区域(clip的区域显示,其他隐藏)
  245.     clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用
  246.     shape函数声明:rect(top right bottom left)
  247.     rect()和<top><bottom>指定偏移量是从元素盒子顶部边缘算起;<left><right>指定的偏移量是从元素盒子左边边缘算起(包括边框)。
  248.     如果<right><bottom>设置为auto时,他们就相当于元素的宽度(这个宽度包括元素的border、padding和width),或者简单的理解为100%
  249.     注意:1.值不能设置为百分比。 2.在动画设置过程里不能使用auto,使用auto没有动画效果(因此建议使用SCSS或者LESS之类的预处理器)
  250.     */
  251.     /*
  252.     clip动画有3种方案,但是都有点小瑕疵(在线条粗的时候明显,线条细的情况下完全看不出来)
  253.     (1)使用如下的1和9作为边界,当拐弯的时候,尾部多余的边界会跟着动
  254.     (2)将下面的1和9替换为0和10,当拐弯的时候,线条宽度会变为0
  255.     (3)在每个状态后面一步立即重置它,但是会出现抖动
  256.     */
  257.     from, to {
  258.         clip: rect(0, 1em, 10em, 0);
  259.     }
  260.     1% {
  261.         clip: rect(1em, 1em, 10em, 0);
  262.     }
  263.     25% {
  264.         clip: rect(9em, 10em, 10em, 0);
  265.     }
  266.     25.1% {
  267.         clip: rect(9em, 10em, 10em, 1em);
  268.     }
  269.     50% {
  270.         clip: rect(0, 10em, 10em, 9em);
  271.     }
  272.     50.1% {
  273.         clip: rect(0, 10em, 9em, 9em);
  274.     }
  275.     75% {
  276.         clip: rect(0, 10em, 1em, 0);
  277.     }
  278.     75.1% {
  279.         clip: rect(0, 9em, 1em, 0);
  280.     }
  281. }
  282. </style>
  283. </head>
  284. <body>
  285. <section>
  286. <h1>1.通过两矩形的移动来制作动画</h1>
  287. <div class=“border-flow”>
  288.     <div class=“border-flow-content”></div>
  289. </div>
  290. </section>
  291. <section>
  292. <h1>2.通过四个边框的长度来控制动画</h1>
  293. <div class=“border-flow2”>
  294.     <div class=“border-flow-content”></div>
  295.     <div class=“border-flow2-edge border-flow2-left”></div>
  296.     <div class=“border-flow2-edge border-flow2-top”></div>
  297.     <div class=“border-flow2-edge border-flow2-right”></div>
  298.     <div class=“border-flow2-edge border-flow2-bottom”></div>
  299. </div>
  300. </section>
  301. <section>
  302. <h1>3.通过clip的裁剪来显示动画</h1>
  303. <div class=“border-flow3”>
  304.     <div class=“border-flow-content”></div>
  305. </div>
  306. <section>
  307. </body>
  308. </html>

本文链接地址: css 流动边框

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注