彩虹效果实现

最新推荐文章于 2024-07-25 10:45:42 发布
最新推荐文章于 2024-07-25 10:45:42 发布
阅读量60 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53465276/article/details/121387459
版权

<style type="text/css">
        .box1{   
            width: 400px;   
            height: 200px;   
            overflow: hidden;   
        }   
        .box1::before{   
            float: left;   
            display: block;   
            height: 400px;   
            width:400px;   
            border-radius: 100%;   
            border: solid 10px blue;   
            box-sizing: border-box;   
            content: "";   
        }   
        .box1::after{   
            margin-top: 10px;   
            margin-left: 10px;   
            display: block;   
            width: 380px;   
            height: 380px;   
            border: solid #ffff00 10px;   
            border-radius: 100%;   
            box-sizing: border-box;   
            content: "";   
        }   
        .box2{   
            float: left;   
            margin-top: -180px;   
            margin-left: 20px;   
            width: 360px;   
            height: 180px;   
            overflow: hidden;   
        }   
        .box2::before{   
            float: left;   
            display: block;   
            margin: 0;   
            width: 360px;   
            height: 360px;   
            border-radius: 100%;   
            border: solid 10px #ff0000;   
            box-sizing: border-box;   
            content: "";   
        }   
        .box2::after{   
            display: block;   
            margin-top: 10px;   
            margin-left: 10px;   
            width: 340px;   
            height: 340px;   
            border-radius: 100%;   
            border: solid 10px green;   
            box-sizing: border-box;   
            content: "";   
        }   
        .box3{   
            margin-top: -160px;   
            margin-left: 40px;   
            width: 340px;   
            height: 160px;   
            overflow: hidden;   
        }   
        .box3::before{   
            float: left;   
            display: block;   
            width: 320px;   
            height: 320px;   
            border: solid 10px orange;   
            border-radius: 100%;   
            box-sizing: border-box;   
            content: "";   
        }   
    </style>
</head>
<body>
    <div class="box1"></div>   
    <div class="box2"></div>   
    <div class="box3"></div>   
    <div class="box4"></div>   
</body>

qq_53465276
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css实现彩虹效果
weixin_43983118的博客
11-17 1103
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>彩虹效果</title> <style> body { background: rgb(255, 255, 255); } .container { w...
彩虹效果，滑动解锁高亮效果实现
weixin_44764552的博客
11-17 124
彩虹效果，滑动解锁高亮效果实现
实现彩虹效果
iostreamM的博客
11-17 114
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
html彩虹效果文字,CSS 实现彩虹条加载动画特效
weixin_35607472的博客
06-03 599
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画，纯css没有一行js代码，喜欢的搞起来。HTML结构：CSS结构body {background-color:#000;}.box {position:relative;width:100px;height:50px;overflow:hidden;margin:0 auto;}.box .wrap {overflow:hidden;p...
使用渐变实现彩虹效果
weixin_48306060的博客
04-27 298
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
JS实现彩虹字
weixin_43571052的博客
04-07 1214
效果图 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
简单彩虹动画的效果实现
du_90的博客
10-27 486
简单彩虹动画的效果实现我们先看下最后的效果图1、首先我们使用UIBezierPath类画一个圆弧，使用方法 + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise
Android studio制作彩虹效果
Reach_most的博客
03-16 351
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.c.
Js实现彩虹文字
lzsan_的博客
03-31 790
JavaScript实现彩虹文字效果的方法
10-24
主要介绍了JavaScript实现彩虹文字效果的方法,涉及javascript操作文字样式的技巧,非常具有实用价值,需要的朋友可以参考下
微信小程序基于canvas渐变实现的彩虹效果示例
10-17
本文将详细讲解如何使用微信小程序中的canvas元素结合线性渐变和圆形渐变技术，来实现炫酷的彩虹效果。 首先，Canvas API 提供了 `createLinearGradient()` 和 `createCircularGradient()` 两个方法来创建渐变。`...
jquery彩虹文字效果特效代码
03-20
标题 "jquery彩虹文字效果特效代码" 提供了一个关键线索，即我们要探讨的是如何在网页上实现一种使用jQuery库创建的动态彩虹文字效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果等...
jQuery实现彩虹文字效果特效代码
03-20
2. **选择目标元素**：选择你想要应用彩虹效果的文字所在的HTML标签，例如一个`<p>`标签： ```html 这里是彩虹文字 ``` 3. **编写jQuery代码**：在页面的`<script>`标签中，编写jQuery代码以实现颜色变化。以下是一...
flex：1
最新发布
m0_47999208的博客
07-25 260
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 355
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 368
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
css 作业 2
没有 bug 的代码是不完美的！
07-25 489
写完了
CSS相关记录
oThrowsException的博客
07-24 628
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
Unity 实现彩虹效果
05-24
Unity中可以使用Shader实现彩虹效果。下面是一个简单的示例： 首先，需要在Unity中创建一个新的Shader，然后在Shader中添加以下代码： ``` Shader "Custom/Rainbow" { Properties { _MainTex ("Texture", 2D) = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值