html实现颜色刷新变化,CSS实现的色彩动态变化效果

最新推荐文章于 2023-06-29 09:17:37 发布
最新推荐文章于 2023-06-29 09:17:37 发布
阅读量659 收藏
点赞数
文章标签： html实现颜色刷新变化
此博客展示了如何使用CSS3 SCSS实现一个3D旋转立方体效果，通过`-webkit-box`和`transform`属性结合关键帧动画，创建了逐个缩放并旋转的立方体，同时配合颜色变化和延迟动画，展示视觉层次感。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

height: 100vh;

overflow: hidden;

background: black;

}

.view {

position: relative;

height: 600px;

width: 900px;

-webkit-box-flex: 0;

-webkit-flex: 0 0 900px;

-ms-flex: 0 0 900px;

flex: 0 0 900px;

}

.axis {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-transform: rotateX(-35deg) rotateY(45deg);

transform: rotateX(-35deg) rotateY(45deg);

}

.axis,

.axis * {

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.cube {

position: absolute;

top: 50%;

left: 50%;

height: 50px;

width: 50px;

margin: -25px;

will-change: transform, visibility;

}

.cube:nth-child(3) {

-webkit-transform: scaleY(0) translateY(0%);

transform: scaleY(0) translateY(0%);

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

-webkit-animation: outer 3s linear infinite;

animation: outer 3s linear infinite;

margin-top: -125px;

}

.cube:nth-child(2) {

-webkit-transform: scaleY(0);

transform: scaleY(0);

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

-webkit-animation: center 3s linear infinite alternate;

animation: center 3s linear infinite alternate;

}

.cube:nth-child(1) {

-webkit-transform: scaleY(0);

transform: scaleY(0);

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-animation: outer 3s linear infinite alternate;

animation: outer 3s linear infinite alternate;

margin-top: 75px;

}

@-webkit-keyframes outer {

0%, 5% {

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

50% {

-webkit-transform: scaleY(2.5);

transform: scaleY(2.5);

}

95%,

100% {

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

}

@keyframes outer {

0%, 5% {

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

50% {

-webkit-transform: scaleY(2.5);

transform: scaleY(2.5);

}

95%,

100% {

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

}

@-webkit-keyframes center {

0%, 5%, 50% {

-webkit-transform: scaleY(0);

transform: scaleY(0);

visibility: hidden;

}

95%,

100% {

-webkit-transform: scaleY(4);

transform: scaleY(4);

visibility: visible;

}

}

@keyframes center {

0%, 5%, 50% {

-webkit-transform: scaleY(0);

transform: scaleY(0);

visibility: hidden;

}

95%,

100% {

-webkit-transform: scaleY(4);

transform: scaleY(4);

visibility: visible;

}

}

.cube .side {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: currentColor;

}

.cube .side:nth-child(1) {

-webkit-transform: translateZ(25px);

transform: translateZ(25px);

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));

background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));

}

.cube .side:nth-child(2) {

-webkit-transform: rotateY(-90deg) translateZ(25px);

transform: rotateY(-90deg) translateZ(25px);

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));

}

.cube .side:nth-child(3) {

-webkit-transform: rotateX(90deg) translateZ(25px);

transform: rotateX(90deg) translateZ(25px);

background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));

}

.collection {

display: inline-block;

height: 100%;

width: 50px;

margin: 0 12.5px;

}

.collection:nth-child(1) {

z-index: 12;

}

.collection:nth-child(1) .cube {

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.collection:nth-child(1) .cube:nth-child(1) {

color: #9efafa;

}

.collection:nth-child(1) .cube:nth-child(2) {

color: #ccfa9e;

}

.collection:nth-child(1) .cube:nth-child(3) {

color: #fa9e9e;

}

.collection:nth-child(2) {

z-index: 11;

}

.collection:nth-child(2) .cube {

-webkit-animation-delay: -0.25s;

animation-delay: -0.25s;

}

.collection:nth-child(2) .cube:nth-child(1) {

color: #9eccfa;

}

.collection:nth-child(2) .cube:nth-child(2) {

color: #9efa9e;

}

.collection:nth-child(2) .cube:nth-child(3) {

color: #facc9e;

}

.collection:nth-child(3) {

z-index: 10;

}

.collection:nth-child(3) .cube {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.collection:nth-child(3) .cube:nth-child(1) {

color: #9e9efa;

}

.collection:nth-child(3) .cube:nth-child(2) {

color: #9efacc;

}

.collection:nth-child(3) .cube:nth-child(3) {

color: #fafa9e;

}

.collection:nth-child(4) {

z-index: 9;

}

.collection:nth-child(4) .cube {

-webkit-animation-delay: -0.75s;

animation-delay: -0.75s;

}

.collection:nth-child(4) .cube:nth-child(1) {

color: #cc9efa;

}

.collection:nth-child(4) .cube:nth-child(2) {

color: #9efafa;

}

.collection:nth-child(4) .cube:nth-child(3) {

color: #ccfa9e;

}

.collection:nth-child(5) {

z-index: 8;

}

.collection:nth-child(5) .cube {

-webkit-animation-delay: -1s;

animation-delay: -1s;

}

.collection:nth-child(5) .cube:nth-child(1) {

color: #fa9efa;

}

.collection:nth-child(5) .cube:nth-child(2) {

color: #9eccfa;

}

.collection:nth-child(5) .cube:nth-child(3) {

color: #9efa9e;

}

.collection:nth-child(6) {

z-index: 7;

}

.collection:nth-child(6) .cube {

-webkit-animation-delay: -1.25s;

animation-delay: -1.25s;

}

.collection:nth-child(6) .cube:nth-child(1) {

color: #fa9ecc;

}

.collection:nth-child(6) .cube:nth-child(2) {

color: #9e9efa;

}

.collection:nth-child(6) .cube:nth-child(3) {

color: #9efacc;

}

.collection:nth-child(7) {

z-index: 6;

}

.collection:nth-child(7) .cube {

-webkit-animation-delay: -1.5s;

animation-delay: -1.5s;

}

.collection:nth-child(7) .cube:nth-child(1) {

color: #fa9e9e;

}

.collection:nth-child(7) .cube:nth-child(2) {

color: #cc9efa;

}

.collection:nth-child(7) .cube:nth-child(3) {

color: #9efafa;

}

.collection:nth-child(8) {

z-index: 5;

}

.collection:nth-child(8) .cube {

-webkit-animation-delay: -1.75s;

animation-delay: -1.75s;

}

.collection:nth-child(8) .cube:nth-child(1) {

color: #facc9e;

}

.collection:nth-child(8) .cube:nth-child(2) {

color: #fa9efa;

}

.collection:nth-child(8) .cube:nth-child(3) {

color: #9eccfa;

}

.collection:nth-child(9) {

z-index: 4;

}

.collection:nth-child(9) .cube {

-webkit-animation-delay: -2s;

animation-delay: -2s;

}

.collection:nth-child(9) .cube:nth-child(1) {

color: #fafa9e;

}

.collection:nth-child(9) .cube:nth-child(2) {

color: #fa9ecc;

}

.collection:nth-child(9) .cube:nth-child(3) {

color: #9e9efa;

}

.collection:nth-child(10) {

z-index: 3;

}

.collection:nth-child(10) .cube {

-webkit-animation-delay: -2.25s;

animation-delay: -2.25s;

}

.collection:nth-child(10) .cube:nth-child(1) {

color: #ccfa9e;

}

.collection:nth-child(10) .cube:nth-child(2) {

color: #fa9e9e;

}

.collection:nth-child(10) .cube:nth-child(3) {

color: #cc9efa;

}

.collection:nth-child(11) {

z-index: 2;

}

.collection:nth-child(11) .cube {

-webkit-animation-delay: -2.5s;

animation-delay: -2.5s;

}

.collection:nth-child(11) .cube:nth-child(1) {

color: #9efa9e;

}

.collection:nth-child(11) .cube:nth-child(2) {

color: #facc9e;

}

.collection:nth-child(11) .cube:nth-child(3) {

color: #fa9efa;

}

.collection:nth-child(12) {

z-index: 1;

}

.collection:nth-child(12) .cube {

-webkit-animation-delay: -2.75s;

animation-delay: -2.75s;

}

.collection:nth-child(12) .cube:nth-child(1) {

color: #9efacc;

}

.collection:nth-child(12) .cube:nth-child(2) {

color: #fafa9e;

}

.collection:nth-child(12) .cube:nth-child(3) {

color: #fa9ecc;

}

轩之乎
关注
html5实现的彩色方块粒子动画效果源码.zip
11-04
这可以通过JavaScript中的`Math.random()`函数来实现颜色的随机化，或者使用HSL（色相、饱和度、亮度）或HSV（色相、饱和度、值）色彩空间进行动态颜色调整。 5. **事件监听**： HTML5允许我们监听用户的交互事件...
颜色刷新随机和Random（java）
weixin_44540005的博客
05-08 661
自己写的（jsp页面） 把 <% int colse_r = (int)(Math.floor(Math.random() * 256)); int colse_g = (int)(Math.floor(Math.random() * 256)); int colse_b = (int)(Math.floor(Math.random() * 256)); %&...
html修改安扭成渐变色,HTML5/CSS3旋转的彩虹渐变色树叶
weixin_30348079的博客
06-09 149
CSS语言：CSSSCSS确定html,body {background-color: #222;margin: 0;}.parent {position: absolute;left: calc((100vw - 90vmin) / 2);top: calc((100vh - 90vmin) / 2);width: 90vmin;height: 90vmin;-webkit-animation-...
css点击文字（非按钮) 能自动改变颜色。
qq_44267691的博客
11-25 1万+
css点击文字（非按钮) 能自动改变颜色。
html表格自动变色,让考勤表实现自动变色
weixin_29858081的博客
06-04 441
员工考勤表对于许多职场HR来说，应该是再熟悉不过。一般情况下的考勤表都是按照月份进行统计，比如说11月分1-30号每天会对人员出勤情况进行登记。为了方便我们对表格的查看，我们经常会看到周末两天的单元格颜色会不同。如上图所示，当我们变更月份的时候，对应的周末月份两天的日期位置就会发生变化，而下方周末两天的单元格底纹颜色也会出现变化。这就是考勤表自动切换颜色的效果。下面我们就来学习如何制作这样的效果图...
关于项目监控看板HTML页面设计
chuan6752的博客
01-05 1654
车间内各个线体，各个站别会有各项测试特性需要监控，做一个页面监控，以便发现异常立即显示不同的颜色，系统并会发现异常警报，看板，E-mail等。 1.先上完成图片如下： a.灰色表示无异常 b.红色表示异常未处理 c.黄色表示异常处理中 d.绿色表示已经处理完成 2.HTML代码如下： <div> <table border="1" > <tr style="background-colo...
HTML5 canvas+svg实现火焰燃烧滤镜动画效果源码.zip
11-02
在火焰燃烧的动画中，开发者可能使用了滤镜效果如`filter`属性来增加火焰的视觉效果，例如应用模糊滤镜模拟热气的扩散，或者通过色彩偏移滤镜来模拟火焰的颜色变化。 4. **JavaScript和DOM交互**： 实现这样的动画...
html和css知识点总结.docx
04-03
- `transition` 和 `animation` 可以实现元素的平滑过渡和动画效果。 这些只是 HTML 和 CSS 的一部分基础知识，实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是...
jquery实现的多种颜色展示的百分比投票显示效果.zip
11-07
综上所述，这个项目涵盖了jQuery的选择器、DOM操作、动画、事件处理、Ajax通信等多个核心知识点，并结合CSS3的特性实现了色彩丰富的百分比投票显示效果。通过解压并研究这个项目，你可以更深入地理解jQuery在实际...
DonovanDufour_3_03022021：动态网页和动画CSS
02-10
CSS3的变换功能使得在不使用JavaScript的情况下也能实现许多动态效果。 在Donovan Dufour的资料中，可能还会涉及CSS3的其他高级特性，比如Flexbox（弹性盒子布局）和Grid布局，它们能轻松实现复杂的网页布局，并...
用html写的逐渐变化的颜色
12-17
就是逐渐变化的颜色的html代码，可以用于按钮，背景等地方
jQuery CSS3页面刷新加载效果.zip
07-04
jQuery CSS3页面刷新加载效果是一款点击刷新页面按钮，loading图标提示加载效果。
html+css3刷新动画代码
08-27
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器！
css怎么让div动起来，实现动画效果一直在动
热门推荐
廖圣平
09-24 1万+
div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite alternate; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow;
CSS 实现动态流光线条效果和颜色渐变效果的实现方法详解
最新发布
pleaseprintf的博客
06-29 3392
在前端开发中，为网页添加动态效果可以提升用户体验。本文将介绍如何使用 CSS 实现动态流光线条效果和颜色渐变效果，为你的网页增添炫目的视觉效果。通过以上方法，你可以使用 CSS 实现动态流光线条效果和动态流光线条颜色渐变效果，为你的网页增加动感和吸引力。希望本文能对你在实现动态流光线条效果和颜色渐变效果方面有所帮助。如有任何疑问或意见，欢迎留言讨论。需要系统源码或者BiShe加V。
html字体自动变化颜色,html如何让字体自动变色
weixin_39600447的博客
05-30 2985
html让字体自动变色的实现方法：首先新建一个html文件；然后在style标签中，输入css代码如“@keyframes change {0% {color: #333;}50% {color: #f60;}...}”即可让字体自动变色。本文操作环境：Windows7系统、HTML5&&CSS3、Dell G3电脑1、首先，打开html编辑器，新建html文件，例如：index....
html内容颜色自动变化,CSS改变默认文本选中的颜色的方法_html/css_WEB-ITnose
weixin_39815345的博客
05-31 257
请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的，这个默认颜色也是可以更改的，本文我们学习如何使用CSS3实现改变默认文本选中的颜色。以我的系统举例(xp 默认主题)，浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色。一、关于浏览器文...
html出现背景自动换颜色代码,html页面换皮肤颜色、背景图片（更换页面背景，常驻缓存）刷新保存...
weixin_42365303的博客
05-30 376
利用样式文件，使网页能够更换不同的主题风格，这个只是简单的小列子，更换了背景图，和字体颜色，更换主题的基本原理是这样的。通过更改，link标签里的href属性，加载不同的样式文件。这里还用到了一款JQuery插件--cookie 确保用户更换完主题后，刷新页面主题不变。有个小技巧：就是将不同主题的样式文件名与所选按钮的id名称相同，这样利于操作。例如：id='skin_0' 那么文件夹中需要有一个...
php自动切换背景,JavaScript_JavaScript实现的背景自动变色代码，本文实例讲述了JavaScript实现的 - phpStudy...
weixin_32701893的博客
03-18 156
JavaScript实现的背景自动变色代码本文实例讲述了JavaScript实现的背景自动变色代码。分享给大家供大家参考，具体如下：这里演示JavaScript实现网页背景自动变色，自己变换颜色，设定时间和颜色值即可，在你设定的颜色值、一定时间内自动切换网页背景颜色。运行效果截图如下：在线演示地址如下：http://demo.phpstudy.net/js/2015/js-auto-cha-bg-...
利用CSS Houdini实现创新动态波浪纹效果
通过在JavaScript中检查CSS.paintWorklet是否存在，并加载名为`paintworklet.js`的脚本，开发者可以实现自定义的绘图逻辑，创建出动态变化的视觉效果。 CSS Houdini的出现为Web开发者提供了一个全新的工具集，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值