Code to implement gradient background effects using JS and CSS-CSS Tutorial-php.cn

Code to implement gradient background effects using JS and CSS

不言

Release： 2018-06-11 15:27:10

Original

1977 people have browsed it

This article mainly introduces the beautiful gradient background special effects code implemented by JS and CSS, including 6 gradient effects, involving JavaScript related skills for dynamic operation of page element attributes. Friends in need can refer to it

The example in this article describes the beautiful gradient background special effects code implemented by JS CSS. Share it with everyone for your reference, the details are as follows:

The screenshot of the running effect is as follows:

The specific code is as follows:

<html>
  <head>
    <title>
      JS配合CSS实现的漂亮渐变背景特效6个实例
    </title>
    <script>
      var setGradient = (function() {
        var p_dCanvas = document.createElement(&#39;canvas&#39;);
        var p_useCanvas = !!(typeof(p_dCanvas.getContext) == &#39;function&#39;);
        var p_dCtx = p_useCanvas ? p_dCanvas.getContext(&#39;2d&#39;) : 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) == &#39;string&#39;) 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 = &#39;repeat-y&#39;;
            } else {
              dGradient = p_dCtx.createLinearGradient(0, 0, 0, nH);
              sRepeat = &#39;repeat-x&#39;;
            }
            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(&#39;image/png&#39;);
            with(dEl.style) {
              backgroundRepeat = sRepeat;
              backgroundImage = &#39;url(&#39; + sDataUrl + &#39;)&#39;;
              backgroundColor = sColor2;
            };
          }
        } else if (p_isIE) {
          p_dCanvas = p_useCanvas = p_dCtx = null;
          return function(dEl, sColor1, sColor2, bRepeatY) {
            if (typeof(dEl) == &#39;string&#39;) dEl = document.getElementById(dEl);
            if (!dEl) return false;
            dEl.style.zoom = 1;
            var sF = dEl.currentStyle.filter;
            dEl.style.filter += &#39; &#39; + [&#39;progid:DXImageTransform.Microsoft.gradient( GradientType=&#39;, +( !! bRepeatY), &#39;,enabled=true,startColorstr=&#39;, sColor1, &#39;, endColorstr=&#39;, sColor2, &#39;)&#39;].join(&#39;&#39;);
          };
        } else {
          p_dCanvas = p_useCanvas = p_dCtx = null;
          return function(dEl, sColor1, sColor2) {
            if (typeof(dEl) == &#39;string&#39;) dEl = document.getElementById(dEl);
            if (!dEl) return false;
            with(dEl.style) {
              backgroundColor = sColor2;
            };
          }
        }
      })();
    </script>
    <style>
      body{font:0.75em/1.4 Arial;text-align:left;margin:20px;} hr{clear:both;visibility:hidden;}
      xmp{font:12px/12px "Courier New";background:#fff;color:#666; border:solid
      1px #ccc;} p.example{ border:solid 1px #555;margin:0 20px 20px 0;float:left;
      display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2
      "Tahoma";text-align:justify;}
    </style>
    <body>
      <p id="example1" class="example">
        CSS特效代码。
      </p>
      <p id="example2" class="example">
        各类编程源码、
      </p>
      <p id="example3" class="example">
        精品软件
      </p>
      <p id="example4" class="example">
        上海世博园
      </p>
      <p id="example5" class="example">
        我家北京天安门
      </p>
      <p id="example6" class="example">
        北京欢迎您！
      </p>
      <script>
        setGradient(&#39;example1&#39;, &#39;#4ddbbe&#39;, &#39;#d449cc&#39;, 1);
        setGradient(&#39;example2&#39;, &#39;#46ddbd&#39;, &#39;#d8b617&#39;, 0);
        setGradient(&#39;example3&#39;, &#39;#c81fc1&#39;, &#39;#bf445f&#39;, 1);
        setGradient(&#39;example4&#39;, &#39;#2285e5&#39;, &#39;#d769eb&#39;, 0);
        setGradient(&#39;example5&#39;, &#39;#8b4286&#39;, &#39;#eac87d&#39;, 1);
        setGradient(&#39;example6&#39;, &#39;black&#39;, &#39;white&#39;, 0);
      </script>
    </body>
</html>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS implementation of LI icon list menu with small pictures

Pure HTML5 CSS3 production of image rotation

Realizing the sliding door effect of web pages based on HTML CSS

The above is the detailed content of Code to implement gradient background effects using JS and CSS. For more information, please follow other related articles on the PHP Chinese website!