一些css/css3特效以及边框流光特效实现 |
您所在的位置：网站首页 › pr怎么做流光效果 › 一些css/css3特效以及边框流光特效实现 |
一些css/css3特效以及边框流光特效实现
|
就是做一个一条线在周围转啊转的效果 我的效果： 大概思路是四条线，在周围一直走。 写在前面兄弟们，别光收藏，点个赞👍👍👍啊🤣，beiwei（csdn居然认为这个词语是敏感词😑）求赞
如果你想要的更多边框特效，这里还有 有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量⇲ 参考：传送门⇲ 另外还有下面这种效果。传送门⇲ 另外鼠标划入特效。传送门 在线预览源码下载 当然还有一些 花里花哨的效果，可做学习css3用(审查元素查看css样式文件，都是比较基础的东西) 
以上特效，大家f12均可查看实现方式，甚至有的可以下载源码。 下面我把我做的边框流光特效实现贴出来，以便日后 ctrl CV //其他代码。。。 ol li{ /* border: 1px solid rgba(32,254,255,.3); */ /* 宽高和相对定位是一定要给的,因为这会影响.animate-border子元素的定位 */ position: relative; width: 3rem; height: 5rem; overflow: hidden; /* 利用伪元素和两个i元素产生4条线 */ .animate-border{ position: absolute; top: 0; width: 100%; height: 100%; &::before, &::after{ content: ""; position: absolute; width: 100%; height: 1px; } i { position: absolute; display: inline-block; height: 100%; width: 1px; } &::before{ top: 0; left: -100%; background-image: linear-gradient(90deg,transparent,#03e9f4); /* name duration timing-function delay iteration-count diraction */ animation: one 4s linear infinite; } i:nth-child(1){ top: -100%; right: 0; background-image: linear-gradient(180deg,transparent,#03e9f4); animation: two 4s linear 1s infinite; } &::after{ bottom: 0; right: -100%; background-image: linear-gradient(-90deg,transparent,#03e9f4); animation: three 4s linear 2s infinite; } i:nth-child(2){ bottom: -100%; left: 0; background-image: linear-gradient(360deg,transparent,#03e9f4); animation: four 4s linear 3s infinite; } } } @keyframes one { 0% { left: -100%; } 50%, 100% { left: 100%; } } @keyframes two { 0% { top: -100%; } 50%, 100% { top: 100%; } } @keyframes three { 0% { right: -100%; } 50%, 100% { right: 100%; } } @keyframes four { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } }以上。 |
上面的效果大家f12就知道怎么做了
【本文地址】
今日新闻 |
推荐新闻 |