css实现一个斑马条纹动画,实现一个理发店门口的小转转,进度条动画同理!

css实现一个斑马条纹动画,实现一个理发店门口的小转转

前置基础知识

css背景background的重复渐变属性repeating-linear-gradient()

该属性类似于linear-gradient(),但他会在整个方向上重复渐变以覆盖整个容器

一、先写一个普通渐变例子linear-gradient()

(提前说明,下面所有例子的容器height:120px,width: 300px)
先建立一个容器box

<div class="box"></div>

再给它写上几个样式

.box{width: 300px;height: 120px;
}

例1: linear-gradient()

.box{width: 300px;height: 120px;background: linear-gradient(red, red 20px, yellow 20px, yellow 40px, blue 40px);
}

结果:
在这里插入图片描述
说明:颜色后面跟的值标明该颜色在当前位置实现,即red 20px表示在20px处为red,第一个颜色值没加位置值时表示位置为0px,最后一个颜色值没有加位置值时表示位置在该容器的最后位置,本例中即为120px,若中间位置不连续,那么中间颜色为渐变过渡

对说明再写一个小例子,
例2:

.box{width: 300px;height: 120px;background: linear-gradient(red,  red 20px,  yellow 40px, blue);
}

结果:0-20px是red 20-40px是red向yellow过渡,40px达到yellow,40px到最底部是yellow向blue过渡,120px处是blue
在这里插入图片描述
那么,如果最后一个颜色有写上位置且不为容器最底部位置120px呢,请看
例3:

.box{width: 300px;height: 120px;background: linear-gradient(red, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px);
}

结果:0-20px red, 20-40px yellow, 40-60px blue, 60-120px 依旧为blue,也就是说,直接取最后一个颜色值把后续颜色铺满!
在这里插入图片描述
好的,现在已经大概知道线性渐变的使用了,再看下一个例子。

二、重复渐变repeating-linear-gradient()

例4: repeating-linear-gradient():

.box{width: 300px;height: 120px;background: repeating-linear-gradient(red, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px);
}

结果:0-20px red, 20-40px yellow, 40-60px blue,根据属性的描述,会重复渐变以铺满整个容器,所以就是下面这样的
在这里插入图片描述
显然,我们可以看到例4和例3的区别,例4是重复前面的颜色填充满。

好的,斑马渐变已经达成了,如何做成理发店门口的小转转呢。
当然是要倾斜一点角度了!

三、角度

根据官方文档说明 0deg == to top,180deg == to bottom,90deg == to right,270deg == to left角度增加方向是顺时针旋转,显然,我们要做一个斜上方向的色彩条需要设置135deg或 to bottom right,将例4稍加修改
例5:

.box{width: 300px;height: 120px;background: repeating-linear-gradient(to bottom right, red, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px);
}

结果:
在这里插入图片描述
采用不同角度属性,
例6:

.box{width: 300px;height: 120px;background: repeating-linear-gradient(135deg, red, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px);
}

结果:
在这里插入图片描述
例5和例6有差距呢,为啥呢,看下图:
在这里插入图片描述
看清楚没,to bottom right 是去往的容器右下角!容器不是正方形,所以此时to bottom right ≠ 135deg,如果容器为正方形,则二者相等!
理发店的是转转的,所以,进入第四步,动起来!

animation动画
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

从左往右属性分别为动画名、动画时长、运行时间函数,动画延迟、运行次数、方向、动画不播放是的样式、动画是暂停还是播放。
例7: 添加动画

.box{width: 300px;height: 120px;background: repeating-linear-gradient(135deg, red, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px);animation: ani 1s infinite linear;
}
@keyframes ani {0%{}100%{background-position: 0 -84.85px;}
}

结果:
在这里插入图片描述
好的,滚动起来了,但是又会发现,中间没拼起来!
原因是:没有设置background-size。就等价于多张图拼起来往上滚动。类似于下面这样:
在这里插入图片描述
再次解决这个问题,加上background-size
例8: 加上background-size

.box{width: 300px;height: 120px;background: repeating-linear-gradient(135deg, red, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px);background-size: 300px 84.85px;animation: ani 1s infinite linear;
}
@keyframes ani {0%{}100%{background-position: 0 -84.85px;}
}

结果:
在这里插入图片描述
很好啊,拼起来了。这里需要说明一下84.85px的来源。
因为动画动的时候水平x方向并没有发生移动,它可视区域之外的拼接情况无需考虑,垂直y方向发生变化,所以我就应该保障y方向上是一个20px的red块,20px的yellow块以及20px的blue块依次叠加,任何一个块的宽度不满足设定值20px,在与下一块拼接时就会出现对不上的情况。
在这里插入图片描述
因为AC=60,∠BAC=45°,所以AB = AC / cos45° = 60 * √2 = 84.85。所以垂直y方向一直都是高度为84.85px的背景块,也就是20px的red块,20px的yellow块以及20px的blue块在向135deg方向依次叠加。例7没有设置background-size,那它则是在y方向一直重复高度为120px的背景块,大约是1.5个red yellow blue块,所以拼接的时候会出现对不上的情况!
整体功能已经完成了!有点丑,优化一些css样式值,让它好看一点吧

例9: 优化

<div class="container"><div class="box"></div></div>
.container {width: 60px;height: 300px;border-left: 1px solid #aaa;border-right: 1px solid #aaa;border-top: 10px solid #333;border-bottom: 10px solid #333;border-radius: 4px;padding: 0 5px;
}
.box{width: 100%;height: 300px;background: repeating-linear-gradient(135deg, #fff, #fff 20px, #000 20px, #000 40px, #0189ff 40px, #0189ff 60px);background-size: 100% 84.85px;animation: ani 1s infinite linear;
}
@keyframes ani {0%{}100%{background-position: 0 -84.85px;}
}

结果:
在这里插入图片描述
是不是还挺像模像样的!gif有抖动,可以拷贝代码运行体验更流畅!

补充一个比较简单的笨方法

前提:对渐变角度和宽度没有指定要求!
思路:面多加水,水多加面

使用repeating-linear-gradient()实现

直接上例子!
例10:

<div class="container"><div class="box"></div></div>
.container {width: 60px;height: 300px;border-left: 1px solid #aaa;border-right: 1px solid #aaa;border-top: 10px solid #333;border-bottom: 10px solid #333;border-radius: 4px;padding: 0 5px;
}
.box{width: 100%;height: 300px;background: repeating-linear-gradient(135deg, #fff, #fff 20px, #000 20px, #000 40px, #0189ff 40px, #0189ff 60px);background-size: 100% 100px;animation: ani 1s infinite linear;
}
@keyframes ani {0%{}100%{background-position: 0 120px;}
}

过程: 先随便写好一个background-size,不发生移动的方向要≥容器盒子,所以例10的设置x为100%,y为100px(这个值任取),background-size: 100% 100px;
重点: 触发动画时,y方向上移动值要等于background-size在y方向的设定值,不然会抖!
下面请看调试过程gif!
在这里插入图片描述
这样就不用使用三角函数计算background-size了!

使用linear-gradient()实现

有弊端,但也能实现斑马条纹。需要将渐变色在100%的范围内重复偶数次,才能完成拼接!否则拼接不上!

<div class="container"><div class="box"></div></div>
.container {width: 60px;height: 300px;border-left: 1px solid #aaa;border-right: 1px solid #aaa;border-top: 10px solid #333;border-bottom: 10px solid #333;border-radius: 4px;padding: 0 5px;
}
.box{width: 100%;height: 300px;background: linear-gradient(135deg, red, red 10%, yellow 10%, yellow 40%, blue 40%, blue 50%, red 50%, red 60%, yellow 60%, yellow 90%, blue 90%, blue 100%);background-size: 100% 100px;animation: ani 1s infinite linear;
}
@keyframes ani {0%{}100%{background-position: 0 100px;}
}

结果:
在这里插入图片描述
渐变色宽度取值不局限使用百分比,使用px也是可以的,就是使用px时,当background-size发生变化时需要同步修改渐变色宽度,不然会拼接异常
所以,linear-gradient()做斑马纹不是很好用。

以上方法自行选择
码字不易,互相学习,欢迎补充指正,欢迎打赏!
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/602053.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JAVA】volatile 关键字的作用

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 volatile 的作用&#xff1a; 结语 我的其他博客 前言 在多线程编程中&#xff0c;保障数据的一致性和线程之间的可见性是…

Kafka(三)概述

目录 1 Kafka的应用场景1.1 活动跟踪1.2 消息传递1.3 指标和日志记录1.4 提交日志1.5 流式处理 2 Kafka的核心概念消息&#xff08;message&#xff09;键&#xff08;Key&#xff09;批次&#xff08;Batch&#xff09;模式&#xff08;Schema&#xff09;主题&#xff08;Top…

复旦MBA科创青干营(二期):探索合肥科创企业的创新之路

11月18日-19日&#xff0c;复旦MBA科创青干营二期学生开启了整合实践活动的第三次企业参访&#xff0c;前往位于合肥的蔚来第二先进制造基地、安徽万邦医药科技股份有限公司和合肥国轩高科动力能源有限公司&#xff0c;在学术导师和科创企业家“双导师”的指导下&#xff0c;深…

【C++】STL 算法 ④ ( 函数对象与谓词 | 一元函数对象 | “ 谓词 “ 概念 | 一元谓词 | find_if 查找算法 | 一元谓词示例 )

文章目录 一、函数对象与谓词1、一元函数对象2、" 谓词 " 概念3、find_if 查找算法 二、一元谓词示例1、代码示例 - 一元谓词示例2、执行结果 一、函数对象与谓词 1、一元函数对象 " 函数对象 " 是通过 重载 函数调用操作符 () 实现的 operator() , 函数对…

pythonMatplotlib六:Matplotlib的图例和注释功能

1.添加图例&#xff1a; import matplotlib.pyplot as plt# 准备数据 x [1, 2, 3, 4, 5] y1 [2, 4, 6, 8, 10] y2 [1, 3, 5, 7, 9]# 创建折线图并设置标签 plt.plot(x, y1, labelLine 1) plt.plot(x, y2, labelLine 2)# 添加图例 plt.legend()# 添加标题和标签 plt.title(&…

【数值分析】非线性方程求根,牛顿法,牛顿下山法,matlab实现

4. 牛顿法 收敛时牛顿法的收敛速度是二阶的&#xff0c;不低于二阶。如果函数有重根&#xff0c;牛顿法一般不是二阶收敛的。 x k 1 x k − f ( x k ) f ′ ( x k ) x_{k1}x_k- \frac{f(x_k)}{f(x_k)} xk1​xk​−f′(xk​)f(xk​)​ matlab实现 %% 牛顿迭代例子 f (x) x…

华为交换机常用命令

华为交换机常用命令 查看系统状态和基本信息&#xff1a; display version&#xff1a;显示设备版本信息 display device&#xff1a;显示设备硬件信息 display interface brief&#xff1a;显示接口的基本状态 display ip interface brief&#xff1a;显示IP接口的基本状态 …

创建Qt项目

项目工程名称一般不要有特殊符号&#xff0c;不要有中文 项目工程保存路径可修改的&#xff0c;但路径不要带中文 构建系统&#xff0c;有3种&#xff0c;这里使用qmake qmake和cmake区别 构建过程不同&#xff0c;项目管理不同。 1、构建过程&#xff0c;qmake是Qt框架自带的…

MySQL数据库:索引

目录 一. 索引的价值 二. 数据库与磁盘的IO 2.1 磁盘的结构 2.2 磁盘访问 2.3 MySQL与磁盘的交互 三. 对索引的理解 3.1 Page的结构 3.2 B树和B树索引结构 3.2.1 B树的结构 3.2.2 B树 3.3 聚簇索引和非聚簇索引 四. 索引的操作 4.1 索引的创建 4.2 索引的查看 4.…

new FormData 同时发送表单 json 以及文件二进制流

需要新增时同时发送表单 json 以及对应的文件即可使用以下方法传参 let formDataParams new FormData(); 首先通过 new FormData&#xff08;&#xff09; 创建你需要最后发送的表单 接着将你的对象 json 存储&#xff0c;注意使用 new Blob 创建大表单转换成 json 格式。以…

解决:TypeError: ‘tuple’ object does not support item assignment

解决&#xff1a;TypeError: ‘tuple’ object does not support item assignment 文章目录 解决&#xff1a;TypeError: tuple object does not support item assignment背景报错问题报错翻译报错位置代码报错原因解决方法方法一&#xff1a;方法二&#xff1a;今天的分享就到…

【Flink精讲】Flink数据延迟处理

面试题&#xff1a;Flink数据延迟怎么处理&#xff1f; 将迟到数据直接丢弃【默认方案】将迟到数据收集起来另外处理&#xff08;旁路输出&#xff09;重新激活已经关闭的窗口并重新计算以修正结果&#xff08;Lateness&#xff09; Flink数据延迟处理方案 用一个案例说明三…

Vue+JavaSpingBoot笔记(1)

一、前后端通信参数问题 1.集合【字典】类型 Vue前端传递参数: export default {methods: { test(){// 将 filteredData 中的每一行值放入 newData 对象数组中 const newData filteredData.map(item > ({key1: item.Value1,key2: item.Value2,key3: "测试"}));r…

Rasa中的tracker_store和event_broker

Rasa 中的 tracker_store 相对主流为 Redis&#xff0c;event_broker 相对主流为 RabbitMQ。后续为了研究学习直接将 tracker_store 和 event_broker 的 type 都设置为 SQL&#xff0c;使用 MySQL 统一管理。 一.Rasa 中的 tracker_store 要使用 MySQL 作为 Rasa 的 tracker_s…

开源许可证

文章目录 一、简介二、详细信息参考 一、简介 开源是指公开源代码&#xff0c;但这并不代表就是免费的。 开源许可证是一种法律许可。 通过它&#xff0c;版权拥有人明确允许&#xff0c;用户可以免费地使用、修改、共享版权软件。 版权法默认禁止共享&#xff0c;也就是说&am…

忘记密码mysql 8.2重置root密码|macos+linux

重置密码 2024年1月6日验证 1.找到support-files下的服务 # 查找mysql位置 which mysql #/usr/local/bin/mysql# 查找原始位置 ls -al /usr/local/bin | grep mysql# 进入原始的为值找到support-files文件夹 # 注意路径要全,我这里是macos系统就是Cellar下 cd /usr/local/Cell…

如何选择消息队列?Kafka 与 RabbitMQ

在上一期中&#xff0c;我们讨论了使用消息队列的好处。然后&#xff0c;我们回顾了消息队列产品的历史。现在看来&#xff0c;当我们需要在项目中使用消息队列时&#xff0c;Kafka 是首选产品。但是&#xff0c;当我们考虑特定要求时&#xff0c;它并不总是最佳选择。 数据库…

【Kubernetes】认证授权RBAC (一)

认证授权RBAC 一、k8s安全管理&#xff1a;认证、授权、准入控制概述1.1、简介【1】认证基本介绍【2】授权基本介绍【3】准入控制基本介绍 1.2、认证【1】客户端认证【2】Bearertoken【3】Serviceaccount【4】拓展&#xff1a;kubeconfig文件 1.3、授权【1】什么是RBAC&#xf…

rust 注释文档生成 cargo doc

rust的cargo文档生成 只需要在每个函数写清楚注释&#xff0c;就可以自动生成文档&#xff0c;很方便 即不用写文档&#xff0c;又可以快速查看&#xff0c;是开发rust的必备技能 rust安装和开发环境配置&#xff0c;可以参考&#xff1a;链接 1.写注释的方法 连续三个 \ 即…

uniapp---安卓真机调试提示检测不到手机【解决办法】

最近在做APP&#xff0c;由于华为手机更新过系统&#xff0c;再次用来调试APP发现就不行了。下面给出具体的解决方法&#xff1a; 第一步&#xff1a;打开【允许开发人员选项】 找到【设置】点击【关于手机】找到【版本号】点击7次或多次&#xff0c;允许开发人员选项。 第二…