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

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

发表回复

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