zoukankan      html  css  js  c++  java
  • 移动开发之css3实现背景几种渐变效果

    移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域。

    产品设计中使用渐变色的好处:
    1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观众闭上眼睛还有残影,眼睛会极度疲劳)。
    2:优雅而低调的深浅色调:
    3:纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感
    4:稍微加点渐变可以让纯色层显得更细腻,不那么单调。画面显得更丰富。
    代码如下,非常简单

    新的梯度渐变语法,新的语法包含四个渐变函数:

        linear-gradient(): 线性梯度渐变
        radial-gradient(): 径向梯度渐变
        repeating-linear-gradient():重复梯度渐变
        repeating-radial-gradient():色站
    

    一:线性渐变 linear-gradient(): 线性梯度渐变

    图片.png
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>移动开发之css3实现背景渐变效果</title>
    <style type="text/css">
    .linear{
    /*仿支付宝背景蓝色渐变*/
    background-image: linear-gradient(to top, #66b7f9,#1c82d4);
    height: 15rem;
    }
    </style>
    </head>
    <body>
    <div class="linear"></div>
    </body>
    </html>
    

    二:radial-gradient径向渐变

    图片.png

    代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>移动开发之css3实现背景渐变效果</title>
    <style type="text/css">
    .linear{
    
    /*background-image: linear-gradient(to top, #66b7f9,#1c82d4);*/
    background: radial-gradient(#ffffff,#1c82d4);
    height: 15rem;
    }
    </style>
    </head>
    <body>
    <div class="linear"></div>
    </body>
    </html>
    

    三: repeating-linear-gradient():重复梯度渐变

    图片.png
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>移动开发之css3实现背景渐变效果</title>
    <style type="text/css">
    .linear{
    
    
    background: repeating-linear-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
    height: 15rem;
    }
    </style>
    </head>
    <body>
    <div class="linear"></div>
    </body>
    </html>
    

    四:repeating-radial-gradient():色站

    图片.png
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>移动开发之css3实现背景渐变效果</title>
    <style type="text/css">
    .linear{
    
    
    background: repeating-radial-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
    height: 15rem;
    }
    </style>
    </head>
    <body>
    <div class="linear"></div>
    </body>
    </html>
    

    /全兼容的移动端渐变写法/

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #66b7f9,#1c82d4);
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, #66b7f9, #1c82d4);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #66b7f9, #1c82d4);
    /* default */
    background: linear-gradient(top, #66b7f9, #1c82d4);
    background-color: #1c82d4;
    


    原文作者:祈澈姑娘
    技术博客:https://www.jianshu.com/u/05f416aefbe1

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

    文末福利:关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。公众号回复“1”,拉你进程序员技术讨论群


  • 相关阅读:
    EntityFramework 启用迁移 EnableMigrations 报异常 "No context type was found in the assembly"
    JAVA 访问FTP服务器示例(2)
    NuGet Package Manager 更新错误解决办法
    JAVA 访问FTP服务器示例(1)
    RemoteAttribute 的使用问题
    诡异的 javascript 变量
    javascript apply用法
    Babun 中文乱码
    GSM呼叫过程
    转站博客园
  • 原文地址:https://www.cnblogs.com/ting6/p/9725506.html
Copyright © 2011-2022 走看看