This article mainly introduces the special effects on the beautiful gradient background implemented by JS + CSS, including six gradient effects, involving JavaScript related techniques for dynamic operations on page element attributes, for more information, see the example in this article to describe the special effects on the beautiful gradient background implemented by JS + CSS. We will share this with you for your reference. The details are as follows:
The running effect is as follows:
The Code is as follows:
Six examples of pretty gradient background effects implemented by JS with CSSScript var setGradient = (function () {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; 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; 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_dCt X. 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. getElementByI D (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 ;}}}) (); script CSS special effect code.
Various programming source code,
High-quality software
Shanghai World Expo
My home is Tiananmen, Beijing
Welcome to Beijing!
Script 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