首页 > 病毒安全 >

javaScript

电脑杂谈　发布时间：2020-07-19 02:26:47　来源：网络整理

oppor9呼吸灯怎么设置_联想a5052呼吸灯电源_呼吸灯效果

在页面上添加一个提交按钮

<body>
<div class="submit_style">
   <input type="submit" class="submit" value="登录"/>
</div>
</body>

联想a5052呼吸灯电源_oppor9呼吸灯怎么设置_呼吸灯效果

样式设计如下. 我们不讨论尺寸，高度和宽度，而直接说一下

    border-radius:6px;  /*圆角*/
    cursor:pointer;     /*光标形状，pointer为一只手的形状*/
    margin:40px auto;   /*边距*/
    border:1px solid #2b92d4;       /*按钮边框设置*/
    color:#fff;        /*文字颜色*/
    font-size:20px;    /*文字大小*/
    text-align:center;  /*居中显示*/
    box-shadow:0 1px 2px rgba(0,0,0,.3);  /*边框阴影设置*/
    overflow:hidden;
    /*线性渐变语法：
    background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),…] );
        type:line   -->表示渐变为线性
        x1,x2,y1,y2     -->渐变坐标，x1=x2垂直变换,y1=y2左右变换
    */
    background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));       /*上下垂直渐变*/
    /*规定变换速度：ease-in-out -->以低速开始和结束 */
    -webkit-animation-timing-function:ease-in-out;
    /*为 @keyframes 规定一个名称*/
    -webkit-animation-name:submit;
    /*完成一个所需时间*/
    -webkit-animation-duration:2500ms;
    /*规定播放次数：infinite为无限次*/
    -webkit-animation-iteration-count:infinite;
    /*规定播放方式：alternate为轮流反向播放*/
    -webkit-animation-direction:alternate;

联想a5052呼吸灯电源_呼吸灯效果_oppor9呼吸灯怎么设置

制作完成后，再次实现呼吸效果

@-webkit-keyframes submit {
    0% {
        opacity:.4;     /*元素不透明级别*/
        box-shadow:0 1px 2px rgba(255,255,255,0.1);
    }
    100% {
        opacity:1;
        border:1px solid rgba(59,235,235,2);
        box-shadow:0 1px 30px rgba(59,255,255,2);
    }
}