有没有办法在CSS中制作线性渐变旋转效果的动画？[duplicate]

gcuhipw9  于 2023-02-26  发布在  其他
关注(0)|答案(1)|浏览(121)
    • 此问题在此处已有答案**：

Button with transparent background and rotating gradient border（1个答案）
2天前关闭。
有没有一种方法可以在纯CSS中创建一个动态的线性渐变旋转效果。本质上，我希望渐变"边界"看起来像是围绕着方框旋转。我也在寻找广泛的浏览器支持，所以"@property "对我来说不起作用。
我通过指定每个关键帧步骤来使它工作，但我觉得可能有一个更合适的方法来做到这一点。

.border{   
  display: inline-block;
  padding: 5px;
  border-radius: 12px; 
  background: -webkit-linear-gradient(0deg, #FEDC01, #B54D0E, #9E258B, #32659B);
  background: -moz-linear-gradient(0deg, #FEDC01, #B54D0E, #9E258B, #32659B);
  background: -ms-linear-gradient(0deg, #FEDC01, #B54D0E, #9E258B, #32659B);
  background: -o-linear-gradient(0deg, #FEDC01, #B54D0E, #9E258B, #32659B);
  background: linear-gradient(0deg, #FEDC01, #B54D0E, #9E258B, #32659B);
}

.border:hover{  
  cursor:pointer;
  animation: spin 6s linear infinite;
}

@keyframes spin{
  1%{background: linear-gradient(3.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  2%{background: linear-gradient(7.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  3%{background: linear-gradient(10.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  4%{background: linear-gradient(14.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  5%{background: linear-gradient(18deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  6%{background: linear-gradient(21.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  7%{background: linear-gradient(25.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  8%{background: linear-gradient(28.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  9%{background: linear-gradient(32.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  10%{background: linear-gradient(36deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  11%{background: linear-gradient(39.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  12%{background: linear-gradient(43.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  13%{background: linear-gradient(46.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  14%{background: linear-gradient(50.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  15%{background: linear-gradient(54deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  16%{background: linear-gradient(57.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  17%{background: linear-gradient(61.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  18%{background: linear-gradient(64.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  19%{background: linear-gradient(68.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  20%{background: linear-gradient(72deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  21%{background: linear-gradient(75.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  22%{background: linear-gradient(79.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  23%{background: linear-gradient(82.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  24%{background: linear-gradient(86.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  25%{background: linear-gradient(90deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  26%{background: linear-gradient(93.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  27%{background: linear-gradient(97.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  28%{background: linear-gradient(100.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  29%{background: linear-gradient(104.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  30%{background: linear-gradient(108deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  31%{background: linear-gradient(111.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  32%{background: linear-gradient(115.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  33%{background: linear-gradient(118.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  34%{background: linear-gradient(122.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  35%{background: linear-gradient(126deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  36%{background: linear-gradient(129.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  37%{background: linear-gradient(133.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  38%{background: linear-gradient(136.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  39%{background: linear-gradient(140.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  40%{background: linear-gradient(144deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  41%{background: linear-gradient(147.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  42%{background: linear-gradient(151.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  43%{background: linear-gradient(154.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  44%{background: linear-gradient(158.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  45%{background: linear-gradient(162deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  46%{background: linear-gradient(165.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  47%{background: linear-gradient(169.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  48%{background: linear-gradient(172.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  49%{background: linear-gradient(176.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  50%{background: linear-gradient(180deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  51%{background: linear-gradient(183.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  52%{background: linear-gradient(187.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  53%{background: linear-gradient(190.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  54%{background: linear-gradient(194.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  55%{background: linear-gradient(198deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  56%{background: linear-gradient(201.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  57%{background: linear-gradient(205.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  58%{background: linear-gradient(208.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  59%{background: linear-gradient(212.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  60%{background: linear-gradient(216deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  61%{background: linear-gradient(219.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  62%{background: linear-gradient(223.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  63%{background: linear-gradient(226.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  64%{background: linear-gradient(230.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  65%{background: linear-gradient(234deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  66%{background: linear-gradient(237.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  67%{background: linear-gradient(241.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  68%{background: linear-gradient(244.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  69%{background: linear-gradient(248.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  70%{background: linear-gradient(252deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  71%{background: linear-gradient(255.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  72%{background: linear-gradient(259.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  73%{background: linear-gradient(262.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  74%{background: linear-gradient(266.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  75%{background: linear-gradient(270deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  76%{background: linear-gradient(273.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  77%{background: linear-gradient(277.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  78%{background: linear-gradient(280.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  79%{background: linear-gradient(284.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  80%{background: linear-gradient(288deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  81%{background: linear-gradient(291.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  82%{background: linear-gradient(295.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  83%{background: linear-gradient(298.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  84%{background: linear-gradient(302.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  85%{background: linear-gradient(306deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  86%{background: linear-gradient(309.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  87%{background: linear-gradient(313.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  88%{background: linear-gradient(316.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  89%{background: linear-gradient(320.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  90%{background: linear-gradient(324deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  91%{background: linear-gradient(327.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  92%{background: linear-gradient(331.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  93%{background: linear-gradient(334.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  94%{background: linear-gradient(338.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  95%{background: linear-gradient(342deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  96%{background: linear-gradient(345.6deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  97%{background: linear-gradient(349.2deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  98%{background: linear-gradient(352.8deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  99%{background: linear-gradient(356.4deg, #FEDC01, #B54D0E, #9E258B, #32659B);}
  100%{background: linear-gradient(360deg, #FEDC01, #B54D0E, #9E258B, #32659B);} 
}

.border > div{
  width: 300px;
  height: 150px;
  color:#fff;
  border-radius: 12px; 
  display:grid;
  place-items: center;
  background-color:#000;
 }
<div class="border"><div>hover me</div></div>
css

1条答案

按热度按时间
ia2d9nvy

ia2d9nvy1#

检查这个

<div class="border-container">
  <div class="content">
    <span></span>  
  </div>
  <button class="border"></button>
</div>
.border-container{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 12px; 
}
.border{
  cursor: pointer;
  position: absolute;
  left: -70px;
  right: -70px;
  top: -70px;
  bottom: -70px;
  border:none;
  background: -webkit-linear-gradient(#FEDC01, #B54D0E, #9E258B, #32659B);
  background: -moz-linear-gradient(#FEDC01, #B54D0E, #9E258B, #32659B);
  background: -ms-linear-gradient(#FEDC01, #B54D0E, #9E258B, #32659B);
  background: -o-linear-gradient(#FEDC01, #B54D0E, #9E258B, #32659B);
  background: linear-gradient(#FEDC01, #B54D0E, #9E258B, #32659B);
  z-index: 1;
}
.border:hover{
  animation: rotate 2s linear infinite;
}

@keyframes rotate{
  from{
      transform: rotate(0deg);
  }
  to{
      transform: rotate(360deg);
  }
}

.content{
  position: absolute;
  cursor: pointer;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  background-color: black;
  z-index: 2;
  border-radius: 12px; 
  
}
.content:hover + .border{
   animation: rotate 2s linear infinite;
}
赞(0）分享  回复(0）举报  2023-02-26
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com