js颜色渐变怎么让颜色不突然变，就是变得缓慢有过渡

2023-02-18 01:49:02JavaScript011

js颜色渐变怎么让颜色不突然变，就是变得缓慢有过渡,第1张

把颜色值转换成rgb方式，设定多少秒改变完成，每次改变多少值，计算需要多少次，比如rba(x,y,z)到rgb(a,b,c)，假设需要100次，那么每次设定rgb((a-x)/100+x,(b-y)/100+y,(c-z)/100+z)

这是我以前收藏的代码，利用CSS+JS实现渐变，代码如下：

<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'>

<html>

<head>

var setGradient = (function(){

//private variables

var p_dCanvas = document.createElement('canvas')

var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function')

var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null

var p_isIE = /*@cc_on!@*/false

//test if toDataURL() is supported by Canvas since Safari may not support it

try{ p_dCtx.canvas.toDataURL() }catch(err){

p_useCanvas = false

}

if(p_useCanvas){

return function (dEl , sColor1 , sColor2 , bRepeatY ){

if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)

if(!dEl) return false

var nW = dEl.offsetWidth

var nH = dEl.offsetHeight

p_dCanvas.width = nW

p_dCanvas.height = nH

var dGradient

var sRepeat

// Create gradients

if(bRepeatY){

dGradient = p_dCtx.createLinearGradient(0,0,nW,0)

sRepeat = 'repeat-y'

}else{

dGradient = p_dCtx.createLinearGradient(0,0,0,nH)

sRepeat = 'repeat-x'

}

dGradient.addColorStop(0,sColor1)

dGradient.addColorStop(1,sColor2)

p_dCtx.fillStyle = dGradient

p_dCtx.fillRect(0,0,nW,nH)

var sDataUrl = p_dCtx.canvas.toDataURL('image/png')

with(dEl.style){

backgroundRepeat = sRepeat

backgroundImage = 'url(' + sDataUrl + ')'

backgroundColor = sColor2

}

}else if(p_isIE){

p_dCanvas = p_useCanvas = p_dCtx = null

return function (dEl , sColor1 , sColor2 , bRepeatY){

if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)

if(!dEl) return false

dEl.style.zoom = 1

var sF = dEl.currentStyle.filter

dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=', +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('')

}

}else{

p_dCanvas = p_useCanvas = p_dCtx = null

return function(dEl , sColor1 , sColor2 ){

if(typeof(dEl) == 'string') dEl = document.getElementById(dEl)

if(!dEl) return false

with(dEl.style){

backgroundColor = sColor2

}

//alert('your browser does not support gradient effet')

}

})()

</script>

<style>

body{font:0.75em/1.4 Arialtext-align:leftmargin:20px}

hr{clear:bothvisibility:hidden}

xmp{font:12px/12px "Courier New"background:#fffcolor:#666 border:solid 1px #ccc}

div.example{ border:solid 1px #555margin:0 20px 20px 0float:left display:inlinemargin:1embackground:#fffwidth:300pxpadding:40pxcolor:#222font:xx-small/1.2 "Tahoma"text-align:justify}

</style>

<body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, eu </div>

setGradient('example1','#4ddbbe','#d449cc',1)

setGradient('example2','#46ddbd','#d8b617',0)

setGradient('example3','#c81fc1','#bf445f',1)

setGradient('example4','#2285e5','#d769eb',0)

setGradient('example5','#8b4286','#eac87d',1)

setGradient('example6','black','white',0)

</script>

</body>

</html>

动态渐变

...

<body>