【前端demo】背景渐变动画

这篇具有很好参考价值的文章主要介绍了【前端demo】背景渐变动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

其他demo

效果

【前端demo】背景渐变动画,前端demo,前端

效果预览:https://codepen.io/karshey/pen/OJrXZwQ

过程

注意,直接在body上加height:100%可能也会出现height为0的情况,这是需要令html的height:100%文章来源地址https://www.toymoban.com/news/detail-690280.html

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Color-Changing-Background</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
</body>
</html>

css

html {
    /* 若没有这行可能导致body的height为0 */
    /* Edge浏览器中没有这行body也有高度,且占满整行 */
    height: 100%;
}

body {
    height: 100%;
    animation-name: colorChange;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    background-color: rgb(255, 255, 255);
}

@keyframes colorChange {


    0% {
        background-image: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%);
    }

    20% {
        background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
    }

    30% {
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    }

    40% {
        background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    }

    50% {
        background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    }

    60% {
        background-image: linear-gradient(120deg, #0fd850 0%, #f9f047 100%);
    }

    70% {
        background-image: linear-gradient(120deg, #b224ef 0%, #7579ff 100%);
    }

    80% {
        background-image: linear-gradient(120deg, #df89b5 0%, #bfd9fe 100%);
    }

    100% {
        background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
    }
}

到了这里,关于【前端demo】背景渐变动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css3背景渐变

    1.线性渐变  2.径向渐变 3.重复渐变 无论线性渐变,还是径向渐变,在没有发生渐变的位置,继续进行渐变,就为重复渐变。 利用重复渐变实现网格效果 代码如下:

    2024年02月13日
    浏览(43)
  • Android 渐变背景色

    目录 一、背景 二、渐变 2.1 线性渐变背景色         1.新建资源文件         2.编辑样式文件         3.使用         4.编辑样式参数说明 2.2 圆角按钮渐变背景色 2.3 放射渐变 2.4 扫描线渐变         单纯的颜色背景已经不能够满足UI大佬们的发挥,渐变色背

    2024年02月13日
    浏览(36)
  • css实现渐变边框动画

    2024年02月15日
    浏览(37)
  • CSS 渐变边框及动画

    转载请注明出处,点击此处 查看更多精彩内容 用 CSS 实现渐变边框及动画,下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里。 简单说明原理:使用伪元素 ::before 绘制一个渐变色,然后使用伪元素 ::after 绘制背景,使其遮住渐变色的一部分,仅保留边框部分

    2024年02月16日
    浏览(61)
  • 【PyQT/Pysider】控件背景渐变

    这段样式表使用了 qlineargradient 函数来创建一个水平方向的线性渐变,从左到右渐变。 渐变起点 (x1:0, y1:0) 在左上角 渐变终点 (x2:1, y2:0) 在右上角 使用了四个颜色停止点: 在 0 处,颜色为 rgba(255, 178, 102, 255) 在 0.55 处,颜色为 rgba(235, 148, 61, 255) 在 0.98 处,颜色为 rgba(0, 0, 0,

    2024年03月17日
    浏览(38)
  • QT qlineargradient 设置背景渐变

    作为一名初级开发,开发之初UI设计师给了我客户端的设计图纸,其中就有设计背景渐变 要求是从上的蓝往下渐变成白 刚开始我直接把UI写的代码考到widget的stylesheet发现根本不行,必须要使用QT的qlineargradient 所有我重写了样式表的代码如下:  效果:  渐变过程:x代表左右

    2024年01月16日
    浏览(34)
  • css3背景与渐变

    在现代网页设计中,背景与渐变是塑造用户体验和品牌形象的关键元素。这不仅仅是技术层面的问题,更是一门艺术。通过本文,我们将揭示CSS3的神奇之处,帮助你释放创意,打破设计的局限,让你的网页焕发生机。 background-color属性表示背景颜色 背景颜色可以用十六进制、

    2024年01月20日
    浏览(44)
  • uniapp微信小程序设置背景渐变

    最近有个项目要用到背景渐变,背景渐变主要用到css,代码如下: 实现原理,position:fixed 固定定位、background-image: linear-gradient 线性渐变和 z-index 设置元素的堆叠顺序。

    2024年02月11日
    浏览(41)
  • 巧妙使用 CSS 渐变来实现波浪动画

    目录 一、波浪的原理 二、曲面的绘制 三、波浪动画 四、文字波浪动画 五、总结一下 参考资料           之前看到coco[1]的这样一篇文章:纯 CSS 实现波浪效果![2],非常巧妙,通过改变 border-radius 和不断旋转实现的波浪效果,有兴趣的可以去研究一下。 这次尝试一下使

    2024年02月16日
    浏览(42)
  • 【CSS】透明背景的圆角渐变边框实现方案

    css的渐变边框可以用下面方式实现 css的圆角边框可以用下面方式实现 那想要实现一个圆角的渐变边框呢,可能会以为,两个都用上不就可以了,但事实是,这两个属性并不兼容,所以要实现一个圆角的渐变边框,就得需要曲线救国的方法了 最终效果图    

    2024年02月13日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包