recherche

Maison  >  Article  >  interface Web  >  Code pour implémenter des effets de fond dégradé en utilisant JS et CSS

Code pour implémenter des effets de fond dégradé en utilisant JS et CSS

不言
不言original
2018-06-11 15:27:101953parcourir

Cet article présente principalement le magnifique code d'effets spéciaux d'arrière-plan dégradé implémenté par JS et CSS, y compris 6 effets de dégradé, impliquant des compétences liées à JavaScript pour le fonctionnement dynamique des attributs des éléments de page. Les amis dans le besoin peuvent s'y référer

. L'exemple de cet article décrit le magnifique code d'effets spéciaux d'arrière-plan dégradé implémenté par JS+CSS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant suit : 

<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>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Implémentation CSS du menu de liste d'icônes LI avec de petites images

Production pure d'images HTML5+CSS3 Rotation

Réaliser un effet de porte coulissante Web basé sur HTML+CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser CSS3 pour dessiner une animation de cercle de chargement d'un cercleArticle suivant：Comment utiliser CSS3 pour dessiner une animation de cercle de chargement d'un cercle

Articles Liés

Voir plus