linear-gradient常用实现效果

之前也研究过css3的这个属性，感觉没什么大用，一般的开发不会用到，毕竟调出来的渐变不专业，不如找一个好看的图片，其实很多时候还是有用的，偷来三个例子。

一、控制虚线

一般写虚线都用dashed，但有时候出来的效果并不是我们想要的，比如控制虚线间的间距，感觉力不从心啊。
用linear-gradient效果还是比较理想的。

<div class="dashed"></div>
<style>
.dashed {height: 1px;background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);background-size: 10px 100%;
}
</style>

另外关于虚线，复制demo，可自己调。

demo

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
</head>
<body>
<div id="main"><div id="body"><div id="effect" class="part"><h3>效果：</h3><div class="show"><div class="demo"><h5>HTML代码：</h5><pre name="code" class="DlHighlight html"><span class="paren xml-tagangle">&lt;</span><span class="keyword xml-tag xml-tag-open">div</span> <span class="builtin xml-attribute">class</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>dashed<span class="after">"</span></span><span class="paren xml-tagangle">&gt;</span><span class="paren xml-tagangle">&lt;/</span><span class="keyword xml-tag xml-tag-close">div</span><span class="paren xml-tagangle">&gt;</span></pre><h5>CSS代码：</h5><textarea id="cssCode" rows="6" cols="50"></textarea><h5>效果预览：</h5><div class="dashed"></div><h5>参数控制：</h5><p>选择实虚比例：<select id="ratio"><option value="0.75">3:1</option><option value="0.666667">2:1</option><option value="0.6">3:2</option><option value="0.5" selected="">1:1</option><option value="0.3333333">1:2</option></select></p><p>选择虚线步幅(3-30)：<input type="range" id="width" min="3" max="30" step="1" value="4"></p><p>选择虚线宽度(1-10)：<input type="range" id="height" min="1" max="10" step="1" value="1"></p><p>选择虚线颜色：<input type="color" id="color" value="#00000"></p></div></div></div>      </div>
</div>
<style>.dashed {height: 2px;background: linear-gradient(to right, #ff8000, #ff8000 8px, transparent 8px, transparent);background-size: 16px 100%;}
</style>
<script>
var eleRatio = document.getElementById('ratio');
var eleWidth = document.getElementById('width');
var eleHeight = document.getElementById('height');
var eleColor = document.getElementById('color');
var eleStyle = document.querySelector('style');
var eleCode = document.getElementById('cssCode');
var generate = function () {var divide = Math.round(eleWidth.value * eleRatio.value * 100) / 100;var css = '.dashed {\n' +
'    height: '+ eleHeight.value +'px;\n'+
'    background: linear-gradient(to right, '+ eleColor.value +', '+ eleColor.value +' '+ divide +'px, transparent '+ divide +'px, transparent);\n'+
'    background-size: '+ eleWidth.value +'px 100%;\n'+
'}';eleCode.value = css;eleStyle.innerHTML = css;
};generate();// 事件
[eleRatio, eleWidth, eleHeight, eleColor].forEach(function (control) {control.addEventListener('change', generate);
});
</script>
</body>
</html>

二、用linear-gradient实现气泡对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div class="content"><p class="talk">这是对话内容</p></div>
</body>
</html>
<style>
.content {margin-left: 70px;
}
.talk {display: inline-block;max-width: 80%;border: 1px solid #ddd;border-radius: 3px;padding: 6px 10px;font-size: 14px;background-color: #fff;position: relative;
}
.talk::before {content: '';position: absolute;width: 6px; height: 6px;background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;background-size: 6px 1px, 1px 6px, 6px 6px;transform: rotate(-45deg);left: -4px; top: 13px;
}
</style>

三、用linear-gradient实现加减号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="javascript:" class="btn btn-plus" role="button" title="增加"></a><input value="1" size="1"><a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>
</body>
</html>
<style>
.btn {display: inline-block;background: #f0f0f0 no-repeat center;border: 1px solid #d0d0d0;width: 24px; height: 24px;    border-radius: 2px;box-shadow: 0 1px rgba(100,100,100,.1);color: #666;transition: color .2s, background-color .2s;
}
.btn:active {box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {background-color: #e9e9e9;color: #333;
}
.btn-plus {background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);background-size: 10px 2px, 2px 10px;
}
.btn-minus {background-image: linear-gradient(to top, currentColor, currentColor);background-size: 10px 2px;
}
</style>

转载于:https://www.cnblogs.com/change-oneself/p/7767800.html

linear-gradient常用实现效果相关推荐

直播APP常用动画效果
作者: 落影loyinglin 地址: http://www.jianshu.com/p/a9a201ed3aa8 介绍记录.总结开发遇到一些问题,大家一起交流学习. 这次带来,对直播APP的常用动 ...
语音聊天源码开发之常用动画效果的实现
效果展示下面是语音聊天源码开发中比较入门的豪华礼物动画--烟花. 一个复杂的礼物动画,首先是美术给出gif实现草图和素材,技术进行动画剖析和图片压缩,在语音聊天源码中加载图片和实现动画,其中要注意内 ...
CSS3中的 Background linear gradient()用法
本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-grad ...
小博老师演示常用JQuery效果 ——图片轮播
2019独角兽企业重金招聘Python工程师标准>>> [理论知识] 我们在实际开发应用程序的过程中,经常会遇到图片轮播的效果需求,本文小博老师就为大家演示一下,如何使用JQuery ...
常用JS效果需要时更新。。。
1.手风琴效果 JS: $(function() {var aMenuOneLi = $(".menu-one > li");var aMenuTwo = $(". ...
CSS3常用动画效果合集（最全）
CSS3常见的动画效果合集: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webki ...
html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
jQuery 常用的效果函数（一）
方法描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数(仍未 ...
DoTween常用动画效果
首先记得引入命名空间:using DG.Tweening; 1.渐隐渐现 protected CanvasGroup canvasGroup;protected void Start(){if(can ...
16.SVG线性渐变（Linear Gradient）
SVG 渐变和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变.渐变方式有两种:线性和径向. SVG 线性渐变 - linearGradie ...

linear-gradient常用实现效果

linear-gradient常用实现效果相关推荐

最新文章

热门文章