• 平缓渐变样式,放大缩小等

    发表于 2020-05-14 19:25:45   |   下载附件
    平缓渐变样式CSS3动画transition 渐变
    // LESS 渐变变化
    ._transition(){
    	transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
    }
    
    // LESS 图片渐变放大样式
    img { 
    	width: 100%; height: 158px; overflow:hidden; border-radius:5px 5px 0 0; ._transition();
    	&:hover {
    		transform: scale(1.1); -ms-transform: scale(1.1); ._transition();
    	}
    }
  • 向下箭头CSS样式

    发表于 2020-04-15 16:27:31   |   下载附件
    箭头向上箭头向下箭头arrow箭头样式

    HTML

    <div class="more up"><em>展开</em><u><i></i></u></div>


    CSS

    .more {
    	.font(b,14px,32px); float: right; cursor: pointer;
    	em { float: left; color: #333; margin-right:8px; font-weight:normal; }
    	u { 
    	    position: relative; display: block; width: 0; height: 0; float: left;
    	    margin-top: 14px;
    	    border-right: 6px solid transparent; 
    	    border-top: 7px solid #666; 
    	    border-left: 6px solid transparent; 
    	}
    	i { 
    	    position: absolute; display: block; left: -6px; bottom: 2px; width: 0; height: 0; 
    	    border-right: 6px solid transparent; 
    	    border-top: 7px solid #fff; 
    	    border-left: 6px solid transparent; 
    	}
    	&:hover {
    		em { color: #189AE5; }
    		u { border-top: 7px solid #189AE5; }
    	}
    	// 向上
    	&.up {
    		u { 
    		    border-bottom: 7px solid #666; 
    		    border-top: none; 
    		}
    		i { 
    			top: 2px; bottom: auto;
    		    border-bottom: 7px solid #fff; 
    		    border-top: none; 
    		}
    		&:hover {
    			em { color: #189AE5; }
    			u { border-bottom: 7px solid #189AE5; }
    		}
    	}
    }
  • IOS 手机浏览屏底部被挡住的CSS解决代码片断

    发表于 2019-11-30 22:50:06   |   下载附件
    ios padding浏览屏底部遮挡问题解决IOS 样式问题ios 移动样式

    IOS 手机浏览屏底部被挡住的CSS解决代码片断


    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);


  • 一个CSS值转REM的Sublime Text插件

    发表于 2019-08-12 10:34:58   |   下载附件
    CSSREMcss转remcss转rem sublime text 插件
  • Sublime Text插件之Css3

    发表于 2019-08-12 09:04:19   |   下载附件
    css3提示插件sublime css提示css3高亮Sublime Text的CSS3插件
    1.Package Controll地址:https://packagecontrol.io/packages/CSS3
    2.Git源代码地址:https://github.com/y0ssar1an/CSS3
  • LESS 自定义 switch 选择器样式

    发表于 2019-08-09 10:42:15   |   下载附件
    lessswitch选择器样式自定义switch样式checkbox伪装switch样式
    /* 
    	switch盒子 
    	使用参数:宽,高,选中颜色值
    	使用实例:.toggle-switch(68px,24px,#0092ff);
    */
    .toggle-switch (@w:68px,@h:24px,@c:#0092ff){
    
    	display: inline-block; position: relative;
    	width: @w; height: @h; border-radius: 5px;
    
    	input[type="checkbox"] {
    		position: absolute;
    		width: 100%;
    		height: 100%;
    		margin: 0px;
    		filter: alpha(opacity=0);
    		opacity: 0;
    	}
    
    	/*默认样式*/
    	.toggle-switch-content {
    		width: 100%; height: 100%; display: table; border: 1px #e6e5ea solid; background: #f5f5f7;
    		border-radius: @h;
    	}
    	.switch-true,
    	.switch-false {
    		width: @h; height: @h; border-radius: @h;
    	}
    	.switch-true {
    		float: right; background: #FFF; box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.3); display: none; 
    	}
    	.switch-false {
    		float: left; background: #FFF; box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);
    	}
    
    	/*选中样式*/
    	input[type="checkbox"]:checked + .toggle-switch-content {
    		background: @c; border: 1px @c solid;
    	}
    	input[type="checkbox"]:checked + .toggle-switch-content .switch-true {
    		display: block;
    	}
    	input[type="checkbox"]:checked + .toggle-switch-content .switch-false {
    		display: none;
    	}
    
    }
  • IOS中防止fixed抖动的额外代码

    发表于 2019-07-18 17:01:48   |   下载附件
    防抖动ISO fixed抖动苹果手机 fixed 样式修复
    在 添加 fixed 样式的容器中加入
    -webkit-transform: translateZ(0); transform: translateZ(0);
  • Git 恢复本地误删的文件

    发表于 2019-05-18 06:45:11   |   下载附件
    gitgit恢复误删除

    Step 1: git status

    Step 2:git reset HEAD [ 被删除的文件或文件夹 ]

    Step 3:git checkout  [ 被删除的文件或文件夹 ]

  • 阿里字体库

    发表于 2019-01-16 11:51:09   |   下载附件
    iconfont字体库阿里字体库
  • 正则表达式,金额只能输入数字,及其他常用正则

    发表于 2018-12-21 13:46:46   |   下载附件
    金额正则表达式正则表达式常用正则表达式
    // 金额只能输入数字
    inputCheck(amount){
        let pattern = /(^[0-9]{1,10}$)|(^d{1,10}.$)|(^d{1,10}.d+)$/;
        if(!pattern.test(amount)){
            amount = parseFloat(amount) > 0 ? parseFloat(amount) : null ;
        }
        return amount
    }
每页显示10条,当前为第1页,总页数为5页