前端漸變_前端開發中常用到的js特效有哪些

❶ web前端在jquery里怎麼使用漸變顏色

H5e教育html5開發為您解答：
jquery漸變示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Cycle</title>

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
table.outTable{
width: 500px;
border-top: #037DC7 1px solid;
border-collapse: collapse;
}
.outTable td{
height: 15px;
border: #037DC7 1px solid;
border-collapse: collapse;
}

table.inTable{
border: #037DC7 0px solid;
}
.inTable td.leftSideTd{
width: 15px;
height: 100px;
line-height:100px;
border-collapse: collapse;
}

</style>

<script type="text/javascript">
var first = true;

function decrescendo(o) {
$("#td"+o).css("background-color", "#C2F7A6");
$("#td"+o).css("opacity", "1.0");
$("#td"+o).animate({opacity: 0.4}, {ration: 500});
}
function crescendo(o) {
$("#td"+o).css("background-color", "#C2F7A6");
$("#td"+o).css("opacity", "0");
$("#td"+o).animate({opacity: 1}, {ration: 500});
}

function cycle(o){
var preO = o - 1;
if(o == 1) {
preO = 14;
}
//$("#td"+preO).css("background-color", "#FFFFFF");
if(!first) {
decrescendo(preO)
}
first = false;

var nextO = o + 1;
if(o == 14) {
nextO = 1;
}
//$("#td"+o).css("background-color", "#C2F7A6");
crescendo(o)

setTimeout("cycle("+nextO+")", 300);
}

</script>
</head>

<body>

<input type="button" value="begin" onclick="cycle(1);" />
<br /><br /><br />

<div style="margin: 0 auto; align:center;">

<table class="outTable" align="center">
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
<td id="td4"></td>
</tr>
<tr>
<td colspan="2" style="border: 0px;">
<table align="left" class="inTable">
<tr>
<td id="td14" class="leftSideTd" style="border-top: 0;"></td>
</tr>
<tr>
<td id="td13" class="leftSideTd"></td>
</tr>
<tr>
<td id="td12" class="leftSideTd" style="border-bottom: 0;"></td>
</tr>

</table>
</td>
<td colspan="2" style="border: 0px;">
<table align="right" class="inTable">
<tr>
<td id="td5" class="leftSideTd" style="border-top: 0;"></td>
</tr>
<tr>
<td id="td6" class="leftSideTd"></td>
</tr>
<tr>
<td id="td7" class="leftSideTd" style="border-bottom: 0;"></td>
</tr>

</table>
</td>

</tr>
<tr>
<td id="td11"></td>
<td id="td10"></td>
<td id="td9"></td>
<td id="td8"></td>
</tr>
</table>

</div>

</body>
</html>

❷ css3.0有關圓角和漸變

css3圓角樣式是這樣寫的：
.box{ border-radius:5px}
但是為了更加兼容，我們需要對主流瀏覽器加上瀏覽器識別符號，同時用PIE.htc文件使其兼容的ie6-ie8。
.yuan {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/*設置相對定位，觸發pie.htc，這樣就兼容到ie6-ie8了，.htc文件一般都是瀏覽器補丁，常用在兼容處理上，類似的還有iecss3.htc文件
*/

position:relative;
behavior: url(PIE.htc) ；

width:330px;
height:200px;
}

css3中的漸變效果建議不要使用，因為很多用戶還是使用低版本瀏覽器，雖然ie6已宣布死亡，但是ie6-ie8的瀏覽器還是有很多市場的，我們做網站設計的公司做過調查，很多中小企業還是在使用ie6-ie8，所以這個只能暫時使用圖片形式。

漸變：
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

❸ 漸變的按鈕用前端文字能直接寫出來嗎

前端切圖，文字通常情況下不用帶上，可以用文本代替，樣式的時候載入字體就行，如果你把文本都帶上了，肯定會增加圖片的KB，如果不是特殊字體的話，可以用background再加上position去寫圖片上的文字！

❹ CSS3中如何實現漸變效果

要得上面的線性漸變效果，我們這樣去定義CSS3樣式：background-image:-moz-linear-gradient(top,#8fa1ff, #3757fa); /* Firefox */background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0,#ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300',GradientType='0');/* IE*/-moz-linear-gradient有三個參數。第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸變。線性漸變使用from()以及to()方法指定過渡顏色點:background:-webkit-gradient(linear, left top, left bottom,from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));線性漸變多個過渡點在同一位置：background:-webkit-gradient(linear, left top, left bottom,from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));徑向漸變綜合效果演示：background:-moz-radial-gradient(30px30px, circle farthest-corner,#58ff00 0%, rgba(222, 255, 0, 0) 30%),-moz-radial-gradient(50px70px, circle farthest-corner,#F30 0%, rgba(255, 159, 34, 0) 60%),-moz-radial-gradient(80px10px, circle farthest-corner,#03F 0%, rgba(222, 255, 0, 0) 80%);background:-webkit-gradient(radial,105105,20,112120,50,from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),-webkit-gradient(radial,9515,15,10220,40,from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),-webkit-gradient(radial,0150,50,0140,90,from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));circle farthest-corner圓形漸變，ellipse farthest-corner橢圓漸變PS：感謝網友來到前端開發分享網學習~~ 歡迎大家掃二維碼學習更多相關前端知識!!

❺ html中想要將背景顏色漸變怎麼弄

html中將背景顏色漸變步驟如下：

1、先使用一個div標簽。

❻ 前端開發中常用到的js特效有哪些

HTML5 DOM 選擇器
// querySelector() 返回匹配到的第一個元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一個nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);1234567

阻止默認行為
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法阻止默認行為
event.preventDefault();
} else{ // ie 阻止默認行為
event.returnValue = false;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();
});1234567891011121314151617

阻止冒泡
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();
});1234567891011121314151617

滑鼠滾輪事件
$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));

if (delta > 0) {
// 向上滾動
console.log('mousewheel top');
} else if (delta < 0) { // 向下滾動
console.log('mousewheel bottom');
}
});123456789101112

檢測瀏覽器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}

// 測試console.log(isSupportSVG());1234567

檢測瀏覽器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){ return true;
}else{ return false;
}
}// 測試，打開谷歌瀏覽器控制台查看結果console.log(isSupportCanvas());12345678910

檢測是否是微信瀏覽器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}// 測試alert(isWeiXinClient());1234567891011

jQuery 獲取滑鼠在圖片上的坐標
$('#myImage').click(function(event){
//獲取滑鼠在圖片上的坐標
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);

//獲取元素相對於頁面的坐標
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});1234567

驗證碼倒計時代碼
<input id="send" type="button" value="發送驗證碼">12
// 原生js版本var times = 60, // 臨時設為60秒
timer = null;

document.getElementById('send').onclick = function () {
// 計時開始
timer = setInterval(function () {
times--; if (times <= 0) {
send.value = '發送驗證碼';
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + '秒後重試';
send.disabled = true;
}
}, 1000);
}
// jQuery版本var times = 60,
timer = null;

$('#send').on('click', function () {
var $this = $(this); // 計時開始
timer = setInterval(function () {
times--; if (times <= 0) {
$this.val('發送驗證碼');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
} else {
$this.val(times + '秒後重試');
$this.attr('disabled', true);
}
}, 1000);
});2122

常用的一些正則表達式
//匹配字母、數字、中文字元
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//驗證郵箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//驗證手機號
/^1[3|5|8|7]\d{9}$/

//驗證URL
/^http:\/\/.+\./

//驗證身份證號碼
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字元的正則表達式
/[\u4e00-\u9fa5]/

//匹配雙位元組字元(包括漢字在內)
/[^\x00-\xff]/

js時間戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);

console.log(nowDate.getTime()); // 獲得當前毫秒數: 1465816710020console.log(formatDate(nowDate));123456789101112131415

js限定字元數（注意：一個漢字算2個字元）
<input id="txt" type="text">//字元串截取function getByteVal(val, max) {
var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
returnValue += val[i];
} return returnValue;
}

$('#txt').on('keyup', function () {
var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819

js判斷是否移動端及瀏覽器內核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE內核
presto: u.indexOf('Presto') > -1, //opera內核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
gecko: u.indexOf('Firefox') > -1, //火狐內核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}
}

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移動端');
}21

之前我用過一個檢測客戶端的庫覺得挺好用的，也推薦給大家叫 device.js，大家可以 Googel 或網路
GItHub倉庫地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 獲取元素位置
//它返回一個對象，其中包含了left、right、top、bottom四個屬性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;

// 相當於jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456

HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}

fullscreen(document.documentElement);12345678910111213

❼ 前端字體如何逐字漸變出現

逐字出現用setInterval方便
漸變字體你搜一下css漸變屬性

❽ 除藍橙灰三種漸變鏡外，還有其他顏色的漸變鏡，它們分別適合哪些場景拍攝

首先，讓我們重新簡述一下攝影中使用的濾光鏡，濾光鏡又稱濾色鏡，種類及其豐富，使用時置於相機鏡頭前端或後端。常用的濾光鏡大致可以分成三類。一類是光學濾光鏡，也稱效果濾光鏡，只對影像進行處理，改變畫面的構成、幾何形狀或遮擋、阻礙透光量，不改變畫面本身的顏色，如星光鏡、柔光鏡、多影鏡、中灰密度鏡、灰漸變鏡和多重曝光遮片等。另一類是顏色濾光鏡，它們能改變畫面的色彩構成，如色溫濾鏡、彩色漸變鏡等。多數顏色濾光鏡是一塊有色玻璃或有色玻璃夾膜，顏色濾光鏡的主要作用是：任何顏色的濾光鏡對與它顏色相同的色光不吸收或吸收很少；對與它顏色相近似的色光則部分吸收，部分透過；對與它顏色相補的色光或與補光相近似的色相則全部或大部分吸收

❾ css3 線性漸變和css3過渡一起用沒效果了還是我語法錯誤，請大神回答

css3目前還不完善，transition目前不支持漸變的背景屬性（它被看作是圖片了，圖片是不能transition的，這個知道吧），so Ucan't transition gradients for now.

但是呢，你可以做一個掩眼法，前端嘛，css給了你無限發揮的空間。

css：

<style>
body{
	margin:0;
	padding:0;
}
.gavin_designdiv{
	width:200px;
	height:200px;
	margin:20pxauto;
}
.no{
	background:#ccc;
	-webkit-transition:all2slinear;
}
.no:hover{
	background:#f60;
}
.line{
	position:relative;
	background:-webkit-linear-gradient(top,#f60,#47CC38);
}
.line_gavinfix{
	position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
background:-webkit-linear-gradient(top,#47CC38,#f60);
	-webkit-transition:opacity2slinear;
}
.line:hover.line_gavinfix{
	opacity:1;
}
</style>

html：

<divclass="gavin_design">
<divclass="no"></div>
<divclass="line"><spanclass="line_gavinfix"></span></div>
</div>

預覽一下，怎麼樣？是你需要的么^.^

❿ 在ps裡面怎麼做出線條的漸變，不是顏色的漸變是虛實的漸變，想這樣的

如果要求不高的話，建議畫一條線，然後用橡皮工具擦一擦；
如果要求高的畫，畫一段線，然後用框選工具選中線條前端一點，然後用塗抹工具拉，因為在方框內，所以不會拉斜了。
如果還要高一點，將噴筆調整到相對大，在畫布上點一下，然後用框選工具選中間一段，復制。
......辦法真的很多。

前端漸變

與前端漸變相關的內容