css实现渐变色边框动态旋转

最新推荐文章于 2024-06-22 12:54:40 发布
最新推荐文章于 2024-06-22 12:54:40 发布
阅读量1.6k 收藏 7
点赞数 1
分类专栏： css 文章标签： css3 边框旋转 渐变色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46074961/article/details/107640983
版权

在这里插入图片描述

在这里插入图片描述

场景：实现渐变色边框旋转
思路是：利用渐变色的背景旋转动画来实现边框旋转
代码如下：

<body>
  <!-- 最外层仅起到限制渐变区域大小的作用 -->
  <div class="wrap">
    <!-- 渐变显示区域 -->
    <div class="rotate"></div>
    <!-- 内容区域 -->
    <div class="content">渐变色边框</div>
  </div>
</body>

  /* 最外层的作用是让中间的.rotate溢出部分隐藏 大小根据内容区域与边框大小自由调整 */
  .wrap {
    width: 400px;
    height: 166px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 最终动态渐变边框实际内容 比.wrap大 但是因为溢出部分被隐藏 
    而中间部分又因为层级关系被.content盖住 
    最后只有.wrap和.content之间的缝隙显示这个旋转的渐变色背景 */
  .rotate {
    width: 500px;
    height: 500px;
    background: linear-gradient(rgba(255, 59, 48, 1), rgba(255, 194, 48, 1));
    animation: rotate 2s infinite linear;
    position: absolute;
    z-index: -1;
  }

  /* 内容区域 根据自身情况调整大小 */
  .content {
    width: 396px;
    height: 162px;
    background-color: #fff;
  }

  /* 渐变色背景旋转动画 */
  @keyframes rotate {
    0% {
      transform: rotateZ(0);
    }

    100% {
      transform: rotateZ(360deg);
    }
  }
小太阳...
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)
12-14
  在网上查阅相关资料后，发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现，而没有渐变色边框围绕内容区域进行旋转的效果，于是我做了一个这样的demo供...
CSS渐变色边框动态旋转的效果
Sinmeow的学习日记
11-16 1770
渐变色边框围绕内容区域进行旋转的效果
有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量
热门推荐
Ethan's Blog
07-03 2万+
让css 把border变得花哨起来
CSS实现边框旋转
最新发布
宇珩的博客
06-22 1095
css按钮
css实现圆环边框的渐变颜色并且旋转
weixin_46995731的博客
11-20 2695
实现边框的渐变颜色并且旋转 整体思路:用两个圆覆盖,制作圆环,利用大圆渐变色的背景旋转动画来实现边框旋转 上代码 HTML <div style="width:100px;height:100px" class="pan-thumb"> <div class="center"> </div> </div> CSS <style lang="css"> .pan-thumb {
html实现边框颜色渐变,渐变边框的实现方式
weixin_30990605的博客
06-15 3693
前言我们在 css 里可以直接使用 border 属性指定元素的边框，但这样的方法具有局限性，就是只能添加单色的边框，如果需要给元素添加渐变的边框，又该如何实现呢？利用 border-imagebutton.btn {display: inline-flex;align-items: center;justify-content: center;cursor: pointer;user-selec...
css实现动态边框
StevenYanghahha的博客
06-14 576
【代码】css实现动态边框。
使用纯 CSS 创作一个渐变色动画边框
09-22
在本文中，我们将深入探讨如何使用纯 CSS 创建一个渐变色动画边框。这个效果是通过结合使用 CSS 的伪元素、渐变背景、动画和层级属性实现的。下面，我们将详细解析每个关键知识点： 1. **CSS 伪元素**： - `::...
圆形边框加渐变色和旋转效果
12-10
纯CSS实现圆形边框加渐变色和自动旋转效果，可控制渐变颜色和旋转速度；圆形里面的字体也是渐变色。
css-border：css实现花里胡哨边框特效
02-09
CSS3还支持动画，可以用来制作动态边框。例如，一个简单的旋转边框： ```css @keyframes rotate-border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } element { border: 2px...
纯css3实现的螺旋状动态旋转导航下拉菜单效果源码.zip
10-31
2. **边框与背景**：CSS3允许我们创建圆角边框、多色边框以及使用线性渐变和径向渐变作为背景，这为设计复杂的视觉效果提供了基础。 3. **转换（Transforms）**：这一特性允许我们将元素进行旋转、缩放、平移和倾斜...
纯CSS实现一个动态渐变边框
技术小不点
04-16 1178
纯css实现动态边框
CSS 实现边框动画效果
細水、長流√的专栏
09-07 1760
今天的这个卡片边框动画效果，主要应用在一些重要信息上，想引起用户注意的时候，我们才会增加这样的效果，一般情况不会添加这样的动效，但是，我们还是需要学会怎么实现它，现在我们就一起来看看这个项目的最终效果：HTML代码： CSS代码： 二、css实现边框动画 效果如图： 转载于：【每日一练】34—CSS 实现边框动画效果http://www.noobyard.com/article/p-eapbpcha-de.htmlcss3线条动画特效用纯CSS3制作的效果非常炫酷的元素边框线条动画特效电脑关
使用css实现边框流动效果
世间万物皆不如你
06-09 4635
在第二个关键帧中，我们将顶部的边框颜色设置为透明，同时将右侧的边框颜色设置为黑色（border-top-color: transparent;我们使用透明的边框颜色来隐藏边框，以创建流动的效果。在上面的代码中，我们定义了一个名为“border-flow”的动画，并将其应用到我们的元素上。在接下来的两个关键帧中，我们将不同的边框颜色设置为黑色，以创建流动的效果。最后，在最后一个关键帧中，我们将左侧的边框颜色设置为透明，同时将顶部的边框颜色设置为黑色，这样我们就完成了一次边框的流动循环。
【css】纯css实现动态边框
KatyLight的博客
08-02 1603
【css】纯css实现动态边框
css特效：流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果
src_chao1的博客
12-14 6394
好了，从视频中我们能看到每种效果都带有三个不同样式展示，这三种样式是制作的三种默认主题：确定、取消、删除，匹配所有效果。同时镜面反光效果由于兼容性问题，可以进行单独设置（视频中都带有镜面反光）。
用CSS3实现边框流动，让你的网页更有创意和个性
Shids_的博客
06-19 2949
用CSS3实现边框流动，让你的网页更有创意和个性
CSS实现旋转边框效果
wxf983364的博客
05-24 997
【代码】CSS实现旋转边框效果。
CSS3边框旋转动画实现效果
CodingNoob
12-12 7153
动画结果如下：以前有看到过相应的动画，想了一下实现思路，就是用4个div分别定位模拟上下左右边框，然后根据定位top、left、right、bottom4个位置定位，再用css3中的transition实现相应的鼠标移入动画效果。代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name
css实现背景渐变色的倒三角
07-28
要使用CSS实现背景渐变色的倒三角，可以使用以下几种方法： 方法一：利用线性渐变背景实现 可以使用linear-gradient()函数来创建一个线性渐变背景，然后通过调整角度和颜色来实现倒三角的效果。需要注意的是，为了确保倒三角不超出设置的宽高区域，需要使用background-size属性进行调整。以下是一个示例代码： ```css .box { width: 160px; height: 200px; background-repeat: no-repeat; background-image: linear-gradient(45deg, orangered 50%, transparent 50%); background-size: 100% 160px; margin: 30px; } ``` 方法二：利用边框实现 可以利用元素的边框(border)属性来实现倒三角的效果。通过设置边框的宽度和颜色，以及调整元素的宽高，可以创建一个倒三角形状。以下是一个示例代码： ```css .box { width: 0; height: 0; border: 100px; border-style: solid; border-color: orangered transparent gold yellowgreen; margin: 30px; } ``` 方法三：利用边框和背景实现 可以结合使用边框和背景来实现倒三角的效果。通过设置元素的边框和背景颜色，以及调整元素的宽高，可以创建一个倒三角形状。以下是一个示例代码： ```css .box { width: 0px; height: 0px; border-bottom: solid 5px transparent; border-top: solid 5px black; border-left: solid 5px transparent; border-right: solid 5px transparent; } ``` 以上是三种常见的实现背景渐变色的倒三角的方法，你可以根据自己的需求选择其中一种来实现。 #### 引用[.reference_title] - *1* *2* [利用 CSS 画出三角形图标有多少种方案？](https://blog.csdn.net/weixin_42728767/article/details/128952319)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [css省略号 倒三角 渐变色 旋转](https://blog.csdn.net/weixin_59054841/article/details/121340386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值