整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          幾行代碼實現2023新年祝福

          幾行代碼實現2023新年祝福

          家好,我是Echa,給大家拜年了!!!

          在新的一年里,小編沒有黃金萬兩,沒有厚厚的紅包,只有笑口常開,只有說不完的祝福,送給粉絲們。

          每一聲鞭炮響起,每一個煙花燃起,每一盞燈籠亮起,都流動著每一縷思念,每一份關懷,都凝聚著每一聲問候,今年過節不收禮,隨隨便便過得去,包個紅包就可以,多點少點不介意,或者來句評論話,知道把我記心里,我也為你送心意,愿粉絲們新年大吉,一切順利!

          今天小編給大家分享用幾行代碼怎么實現2023新年祝福。

          全文大綱

          1. Echa 新年祝福
          2. 無限放煙花
          3. 乖乖兔送祝福
          4. 兔年第一杯喝什么?

          Echa 送祝福

          大家猜猜這個是用啥實現的?先看效果圖:



          完整代碼如下:

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Echa 祝大家 2023新年快樂!</title>
          </head>
          <style>
            body {
              margin: 0;
              overflow: hidden;
              background: black;
            }
          
            canvas {
              position: absolute;
            }
          </style>
          
          <body>
          
            <canvas></canvas>
            <canvas></canvas>
            <canvas></canvas>
          
            <script>
          
              function GetRequest() {
                var url=decodeURI(location.search); //獲取url中"?"符后的字串
                var theRequest=new Object();
                if (url.indexOf("?") !=-1) {
                  var str=url.substr(1);
                  strs=str.split("&");
                  for (var i=0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                  }
                }
                return theRequest;
              }
              class Shard {
                constructor(x, y, hue) {
                  this.x=x;
                  this.y=y;
                  this.hue=hue;
                  this.lightness=50;
                  this.size=15 + Math.random() * 10;
                  const angle=Math.random() * 2 * Math.PI;
                  const blastSpeed=1 + Math.random() * 6;
                  this.xSpeed=Math.cos(angle) * blastSpeed;
                  this.ySpeed=Math.sin(angle) * blastSpeed;
                  this.target=getTarget();
                  this.ttl=100;
                  this.timer=0;
                }
                draw() {
                  ctx2.fillStyle=`hsl(${this.hue}, 100%, ${this.lightness}%)`;
                  ctx2.beginPath();
                  ctx2.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
                  ctx2.closePath();
                  ctx2.fill();
                }
                update() {
                  if (this.target) {
                    const dx=this.target.x - this.x;
                    const dy=this.target.y - this.y;
                    const dist=Math.sqrt(dx * dx + dy * dy);
                    const a=Math.atan2(dy, dx);
                    const tx=Math.cos(a) * 5;
                    const ty=Math.sin(a) * 5;
                    this.size=lerp(this.size, 1.5, 0.05);
          
                    if (dist < 5) {
                      this.lightness=lerp(this.lightness, 100, 0.01);
                      this.xSpeed=this.ySpeed=0;
                      this.x=lerp(this.x, this.target.x + fidelity / 2, 0.05);
                      this.y=lerp(this.y, this.target.y + fidelity / 2, 0.05);
                      this.timer +=1;
                    } else
                      if (dist < 10) {
                        this.lightness=lerp(this.lightness, 100, 0.01);
                        this.xSpeed=lerp(this.xSpeed, tx, 0.1);
                        this.ySpeed=lerp(this.ySpeed, ty, 0.1);
                        this.timer +=1;
                      } else {
                        this.xSpeed=lerp(this.xSpeed, tx, 0.02);
                        this.ySpeed=lerp(this.ySpeed, ty, 0.02);
                      }
                  } else {
                    this.ySpeed +=0.05;
                    //this.xSpeed=lerp(this.xSpeed, 0, 0.1);
                    this.size=lerp(this.size, 1, 0.05);
          
                    if (this.y > c2.height) {
                      shards.forEach((shard, idx)=> {
                        if (shard===this) {
                          shards.splice(idx, 1);
                        }
                      });
                    }
                  }
                  this.x=this.x + this.xSpeed;
                  this.y=this.y + this.ySpeed;
                }
              }
          
              class Rocket {
                constructor() {
                  const quarterW=c2.width / 4;
                  this.x=quarterW + Math.random() * (c2.width - quarterW);
                  this.y=c2.height - 15;
                  this.angle=Math.random() * Math.PI / 4 - Math.PI / 6;
                  this.blastSpeed=6 + Math.random() * 7;
                  this.shardCount=15 + Math.floor(Math.random() * 15);
                  this.xSpeed=Math.sin(this.angle) * this.blastSpeed;
                  this.ySpeed=-Math.cos(this.angle) * this.blastSpeed;
                  this.hue=Math.floor(Math.random() * 360);
                  this.trail=[];
                }
                draw() {
                  ctx2.save();
                  ctx2.translate(this.x, this.y);
                  ctx2.rotate(Math.atan2(this.ySpeed, this.xSpeed) + Math.PI / 2);
                  ctx2.fillStyle=`hsl(${this.hue}, 100%, 50%)`;
                  ctx2.fillRect(0, 0, 5, 15);
                  ctx2.restore();
                }
                update() {
                  this.x=this.x + this.xSpeed;
                  this.y=this.y + this.ySpeed;
                  this.ySpeed +=0.1;
                }
          
                explode() {
                  for (let i=0; i < 70; i++) {
                    shards.push(new Shard(this.x, this.y, this.hue));
                  }
                }
              }
          
              console.log(GetRequest('val').val)
              // INITIALIZATION
              const [c1, c2, c3]=document.querySelectorAll('canvas');
              const [ctx1, ctx2, ctx3]=[c1, c2, c3].map(c=> c.getContext('2d'));
              let fontSize=200;
              const rockets=[];
              const shards=[];
              const targets=[];
              const fidelity=3;
              let counter=0;
              c2.width=c3.width=window.innerWidth;
              c2.height=c3.height=window.innerHeight;
              ctx1.fillStyle='#000';
              const text='Echa 祝大家 2023新年快樂!'
              let textWidth=99999999;
          
              while (textWidth > window.innerWidth) {
                ctx1.font=`900 ${fontSize--}px Arial`;
                textWidth=ctx1.measureText(text).width;
              }
          
              c1.width=textWidth;
              c1.height=fontSize * 1.5;
              ctx1.font=`900 ${fontSize}px Arial`;
              ctx1.fillText(text, 0, fontSize);
              const imgData=ctx1.getImageData(0, 0, c1.width, c1.height);
              for (let i=0, max=imgData.data.length; i < max; i +=4) {
                const alpha=imgData.data[i + 3];
                const x=Math.floor(i / 4) % imgData.width;
                const y=Math.floor(i / 4 / imgData.width);
          
                if (alpha && x % fidelity===0 && y % fidelity===0) {
                  targets.push({ x, y });
                }
              }
          
              ctx3.fillStyle='#FFF';
              ctx3.shadowColor='#FFF';
              ctx3.shadowBlur=25;
          
              // ANIMATION LOOP
              (function loop() {
                ctx2.fillStyle="rgba(0, 0, 0, .1)";
                ctx2.fillRect(0, 0, c2.width, c2.height);
                //ctx2.clearRect(0, 0, c2.width, c2.height);
                counter +=1;
          
                if (counter % 15===0) {
                  rockets.push(new Rocket());
                }
                rockets.forEach((r, i)=> {
                  r.draw();
                  r.update();
                  if (r.ySpeed > 0) {
                    r.explode();
                    rockets.splice(i, 1);
                  }
                });
          
                shards.forEach((s, i)=> {
                  s.draw();
                  s.update();
          
                  if (s.timer >=s.ttl || s.lightness >=99) {
                    ctx3.fillRect(s.target.x, s.target.y, fidelity + 1, fidelity + 1);
                    shards.splice(i, 1);
                  }
                });
          
                requestAnimationFrame(loop);
              })();
          
              // HELPER FUNCTIONS
              const lerp=(a, b, t)=> Math.abs(b - a) > 0.1 ? a + t * (b - a) : b;
          
              function getTarget() {
                if (targets.length > 0) {
                  const idx=Math.floor(Math.random() * targets.length);
                  let { x, y }=targets[idx];
                  targets.splice(idx, 1);
          
                  x +=c2.width / 2 - textWidth / 2;
                  y +=c2.height / 2 - fontSize / 2;
          
                  return { x, y };
                }
              }
            </script>
          </body>
          </html>

          無限放煙花

          一個個煙花,在夜空綻放。有的像繁星在調皮的眨眼,有的像一個閃閃發光的圓球,有的像已綻放的紫色蒲公英,有的像嬌艷的花朵……煙花好美啊!

          用鼠標無限點擊,無限放煙花.......


          部分代碼塊:

          <!DOCTYPE html>
          <html lang="en">
          
          <head>
          	<meta charset="UTF-8">
          	<title>
          		Echa 祝大家2023 一帆風順 
          	</title>
          	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
          	<meta name="mobile-web-app-capable" content="yes">
          	<meta name="apple-mobile-web-app-capable" content="yes">
          	<meta name="theme-color" content="#000000">
          	<link rel="icon" type="image/png" href="./favicon.png">
          	<link rel="apple-touch-icon-precomposed" href="./favicon.png">
          	<meta name="msapplication-TileColor" content="#000000">
          	<meta name="msapplication-TileImage" content="./favicon.png">
          	<style>
          		/* cyrillic */
          		@font-face {
          			font-family: 'Russo One';
          			font-style: normal;
          			font-weight: 400;
          			src: url(/font/Z9XUDmZRWg6M1LvRYsHOy8mJrrg.woff2) format('woff2');
          			unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
          		}
          
          		/* latin-ext */
          		@font-face {
          			font-family: 'Russo One';
          			font-style: normal;
          			font-weight: 400;
          			src: url(/font//Z9XUDmZRWg6M1LvRYsHOwcmJrrg.woff2) format('woff2');
          			unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
          		}
          
          		/* latin */
          		@font-face {
          			font-family: 'Russo One';
          			font-style: normal;
          			font-weight: 400;
          			src: url(/font/Z9XUDmZRWg6M1LvRYsHOz8mJ.woff2) format('woff2');
          			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
          		}
          	</style>
          	<link rel="stylesheet" href="./style.css">
          </head>
          
          <body>
          	<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
          		<svg xmlns="http://www.w3.org/2000/svg">
          			<symbol id="icon-play" viewBox="0 0 24 24">
          				<path d="M8 5v14l11-7z" />
          			</symbol>
          			<symbol id="icon-pause" viewBox="0 0 24 24">
          				<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
          			</symbol>
          			<symbol id="icon-close" viewBox="0 0 24 24">
          				<path
          					d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
          			</symbol>
          			<symbol id="icon-settings" viewBox="0 0 24 24">
          				<path
          					d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
          			</symbol>
          			<symbol id="icon-sound-on" viewBox="0 0 24 24">
          				<path
          					d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
          			</symbol>
          			<symbol id="icon-sound-off" viewBox="0 0 24 24">
          				<path
          					d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
          			</symbol>
          		</svg>
          	</div>
          	<!-- App -->
          	<div class="container">
          		<div class="loading-init">
          			<div class="loading-init__header">
          				加載中
          			</div>
          			<div class="loading-init__status">
          				正在裝配兔年煙花
          			</div>
          		</div>
          		<div class="stage-container remove">
          			<div class="canvas-container">
          				<canvas id="trails-canvas">
          				</canvas>
          				<canvas id="main-canvas">
          				</canvas>
          			</div>
          			<div class="controls">
          				<div class="btn pause-btn">
          					<svg fill="white" width="24" height="24">
          						<use href="#icon-pause" xlink:href="#icon-pause">
          						</use>
          					</svg>
          				</div>
          				<div class="btn sound-btn">
          					<svg fill="white" width="24" height="24">
          						<use href="#icon-sound-off" xlink:href="#icon-sound-off">
          						</use>
          					</svg>
          				</div>
          				<div class="btn settings-btn">
          					<svg fill="white" width="24" height="24">
          						<use href="#icon-settings" xlink:href="#icon-settings">
          						</use>
          					</svg>
          				</div>
          			</div>
          			<div class="menu hide">
          				<div class="menu__inner-wrap">
          					<div class="btn btn--bright close-menu-btn">
          						<svg fill="white" width="24" height="24">
          							<use href="#icon-close" xlink:href="#icon-close">
          							</use>
          						</svg>
          					</div>
          					<div class="menu__header">
          						設置
          					</div>
          					<div class="menu__subheader">
          						若想了解更多信息 請點擊任意標簽
          					</div>
          					<form>
          						<div class="form-option form-option--select">
          							<label class="shell-type-label">
          								煙花類型
          							</label>
          							<select class="shell-type">
          							</select>
          						</div>
          						<div class="form-option form-option--select">
          							<label class="shell-size-label">
          								煙花大小
          							</label>
          							<select class="shell-size">
          							</select>
          						</div>
          						<div class="form-option form-option--select">
          							<label class="quality-ui-label">
          								畫質
          							</label>
          							<select class="quality-ui">
          							</select>
          						</div>
          						<div class="form-option form-option--select">
          							<label class="sky-lighting-label">
          								照亮天空
          							</label>
          							<select class="sky-lighting">
          							</select>
          						</div>
          						<div class="form-option form-option--select">
          							<label class="scaleFactor-label">
          								縮放
          							</label>
          							<select class="scaleFactor">
          							</select>
          						</div>
          						<div class="form-option form-option--checkbox">
          							<label class="auto-launch-label">
          								自動放煙花
          							</label>
          							<input class="auto-launch" type="checkbox" />
          						</div>
          						<div class="form-option form-option--checkbox form-option--finale-mode">
          							<label class="finale-mode-label">
          								同時放更多的煙花
          							</label>
          							<input class="finale-mode" type="checkbox" />
          						</div>
          						<div class="form-option form-option--checkbox">
          							<label class="hide-controls-label">
          								隱藏控制按鈕
          							</label>
          							<input class="hide-controls" type="checkbox" />
          						</div>
          						<div class="form-option form-option--checkbox form-option--fullscreen">
          							<label class="fullscreen-label">
          								全屏
          							</label>
          							<input class="fullscreen" type="checkbox" />
          						</div>
          						<div class="form-option form-option--checkbox">
          							<label class="long-exposure-label">
          								保留煙花的火花
          							</label>
          							<input class="long-exposure" type="checkbox" />
          						</div>
          					</form>
          				</div>
          			</div>
          		</div>
          		<div class="help-modal">
          			<div class="help-modal__overlay">
          			</div>
          			<div class="help-modal__dialog">
          				<div class="help-modal__header">
          				</div>
          				<div class="help-modal__body">
          				</div>
          				<button type="button" class="help-modal__close-btn">
          					關閉
          				</button>
          			</div>
          		</div>
          	</div>
          	<script></script>
          	<!-- partial -->
          	<script src='./js/fscreen.js'></script>
          	<script src='./js/Stage.js'></script>
          	<script src='./js/MyMath.js'></script>
          	<script src="./js/script.js"></script>
          </body>
          
          </html>

          完整代碼:https://gitee.com/webufo/fireworks

          乖乖兔送祝福

          演示地址:https://jsmask.gitee.io/rabbit-lucky-chest/

          Gitee :https://gitee.com/jsmask/rabbit-lucky-chest

          小兔子乖乖,快把眼睜開,看窗外,陽光好、鳥兒叫,微風搖、人歡笑;小兔子乖乖,悄悄地起床來,吹吹風、跳一跳,一整天,心情好。乖,早安!

          效果圖如下:

          兔年第一杯喝什么?

          演示地址:https://what-to-drink.gitee.io/2023//index.html

          Gitee:https://gitee.com/what-to-drink/2023

          春節到,拜年早;送你一杯香醇酒,愿你跟著好運走;送你一幅吉祥畫,生活幸福人人夸;送你一盞紅燈籠,萬事吉祥家業興;兔年大吉,提前祝賀!

          如下圖:

          素的顯示與隱藏

          使用CSS讓元素不可見的方法很多,剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見,但背后卻在多個維度上都有差別

          下面是總結的一些比較好的隱藏實踐,大家一起來根據實際開發場景來選擇合適的使用

          比較好的隱藏實踐

          不占空間,資源可以加載,DOM可訪問 使用display:none

          不占空間,隱藏顯示時有transition效果

          占空間,不能點擊 visibility: hidden

          不占空間,不能點擊,鍵盤能訪問 clip裁切

          占空間,不能點擊,鍵盤能訪問 relative

          占空間,可以點擊 opacity

          隱藏文字 使用text-indent

          根據實際的隱藏場景選擇合適的隱藏方法,這里就不再多說了,接著往下看吧

          display與元素的顯隱

          我們都知道display如果值為none,則該元素以及所有后代元素都隱藏,反之如果值是非none的情況,則都為顯示了

          display可以說是web顯隱交互中出場頻率最高的一種隱藏方式,是真正意義上的隱藏,干凈利落,不留痕跡

          none做到了無法點擊、無法使用屏幕閱讀器等輔助設備訪問,不占空間,其實不僅僅是這樣,更應該知道的是

          me: 我有酒,那么別說你沒有故事

          我知道display:none你才不是一個沒有故事的女同學

          display: none的元素的background-image圖片根據不同瀏覽器的情況加載情況不一

          在Firefox瀏覽器下,display:none的background-image圖片不加載,包括父元素display:none也是如此在Chrome和Safari瀏覽器,則根據父元素是否是否為none來影響圖片加載情況,父元素帶有display:none,圖片不加載。

          父元素不帶有display:none,而自身有背景圖元素帶的話,那也照樣加載

          3.在IE瀏覽器下,無論怎么搞都會請求圖片資源,就是這么任性

          因此,在實際開發的時候,例如頭圖輪播切換效果

          那些默認需要隱藏的圖片作為背景圖藏在display:none元素的子元素上,這樣的細小改動就可以明顯提升頁面的加載體驗,也是非常實用的小技巧

          whatever

          上面說的興致盎然,但實際中不可能全部都是背景圖去加載圖片資源的

          還有另外一個好朋友,img元素,然并卵的是,上面說了一大堆加載不加載的情況,對img來說沒個鳥用,人家不管你none不none的,依舊帶著勇闖天涯的氣概去請求著資源

          活久見

          都說display:none做事最純粹,最干凈,不能被點擊,觸碰到,然而下面這種情況又是什么鬼?

          出來解釋解釋,我們都是文明人是絕對不會動武的!

          隱藏的按鈕會觸發click,觸發表單提交,此現象出現在時髦的瀏覽器中(IE9+,現代標準瀏覽器中)

          既然有這種例外情況那加了display:none的意義又是什么呢?

          很多都是純天然的

          HTML中有很多標簽和屬性天然自帶display:none

          HTML5中新增了hidden這個布爾屬性,可以讓元素天生隱藏起來

          既然說到了visibility了,那么就趕緊邀請visibility閃亮登場吧

          visibility與元素的顯隱

          visibility要為自己正名,不僅僅是保留空間這么簡單

          看點多多:

          繼承性(最有意思的一個特點,不是我說的)

          2. 與css計數器

          visibility:hidden雖然讓元素不可見了,但是不影響其計數效果,不會重新計算結果

          3. 與transition

          設置了visibility:hidden的元素,可以很好的展現transition過渡效果

          這是因為transition支持的css屬性中有visibility(果然是兄弟),而并沒有display屬性

          4.與JS

          visibility:hidden除了對transition友好外,對js來說也很友好

          在實際開發中,需要對隱藏元素進行尺寸和位置的獲取,來實現布局精確定位的交互

          此時,就建議使用visibility:hidden

          好了以上內容要告一段落了,我們繼續開始新的征程吧,哈哈

          用戶界面樣式

          用戶界面樣式指的是CSS世界中用來幫助用戶進行界面交互的一些CSS樣式,主要有outline和cursor等屬性

          和border形似的outline屬性

          outline表示元素的輪廓,語法也和border一樣,分為寬度、類型和顏色三個值

          樣式表示上相同,但是設計的初衷卻是不太相同的,這一點天地日月可鑒

          outline是一個和用戶體驗密切相關的屬性,與focus狀態以及鍵盤訪問密切相關

          對于按鈕或鏈接,通常的鍵盤操作是:Tab鍵按次序不斷focus控件元素(鏈接、按鈕、輸入框等表單元素),或者focus設置了tabindex的普通元素,然后按Shift+Tab是反向訪問

          重點來了!

          默認狀態下,對于處于focus狀態的元素,瀏覽器會通過發光or虛框的形式進行區分和提示,這是友好的用戶體驗,很有必要,不然用戶很難知道自己當前聚焦在了哪個元素上面,會迷失自我

          元素如果聚焦到了a鏈接上,按下回車鍵就會跳轉到相應鏈接,以上的交互都是基于鍵盤訪問的,這就是為什么outline和鍵盤訪問如此親密了

          不專業的行為

          很多時候直接在reset樣式的時候,寫成如下形式是非常不可取的

          這樣直接一竿子打死一群鴨子的做法是不對的,更多的時候是因為瀏覽器內置的focus效果和設計風格格格不入,才需要重置,而且要使用專門的類名

          最后再強調一遍:萬萬不可在全局設置outline: 0 none;

          這樣的操作會造成鍵盤訪問的時候用戶找不到當前焦點,容易產生困擾的,為了大家好,收斂一下吧

          下面來點干貨: 在實際開發中,有時候需要讓普通元素代替表單控件元素有outline效果

          舉個栗子:submit按鈕來完成UI設計是非常麻煩的,所以使用label元素來移花接木,通過for屬性和這些原生的表單控件相關聯

          真正的不占據空間的outline及其應用

          outline是一個真正意義上不占任何空間的屬性,Amazing

          頭像剪裁的矩形鏤空效果

          先來看個效果圖

          上圖就是矩形鏤空效果,那么下面直接上代碼,滿滿的干貨

          用一個大大的outline來實現周圍半透明的黑色遮罩,因為outline無論設置多么多么大,都不會占據空間影響布局,至于超出的部分,直接給父元素設置一個overflow:hidden就搞定了 注意:

          自動填滿屏幕剩余空間的應用技巧

          開發中很多時候,由于頁面內容不夠多,導致底部footer會出現尷尬的剩余空間,解決方法往往也有很多種,在此我們還是依然利用outline的功能來完美實現一下

          關鍵的css就是設置一個超大輪廓范圍的outline屬性,如給個9999px,保證無論屏幕多高,輪廓顏色都能覆蓋

          值得注意的是,outline無法指定方位,它是直接向四周發散的,所以需要配合clip剪裁來進行處理,以左邊和上邊為邊界進行裁剪

          光標屬性

          光標屬性cursor我們真的是最熟悉的陌生人啊

          為什么這么說呢,因為在眾多的屬性值面前,我們似乎只用到了pointer(手形)(最常用的,沒有之一),move(移動),default(系統默認)這幾樣

          在cursor的世界里,遠比我們想象的要豐富很多,下面按照功能特性來對其進行分類吧

          琳瑯滿目的cursor屬性值

          友情不友情的小提示:☆(表示常用)

          鏈接和狀態

          cursor: progress; 進行中

          選擇

          拖拽都是CSS3新增的光標類型

          以上內容就介紹完了用戶界面樣式的全部內容了,還有最后一章的冷知識,大家不要方,繼續看下去,了解一下,了解一下,了解一下

          流向的改變

          說出來你可能不信,direction可以改變水平流向,盡管知道或者使用過的人少之又少,但并不妨礙它的發光發熱

          而且屬性簡單好記,值少,兼容極好ie6支持,可以來挖掘一下它的神奇功效

          direction

          僅僅兩個值:

          direction: rtl;

          當然看到這里你可能會感覺,這些說起來都沒什么鳥用,因為大招是不輕易放出的,而真正有用的地方在于改變網頁布局的時候

          direction屬性默認有一個特性

          可以改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現順序

          舉個例子:顛倒順序

          再舉個例子:

          比如制作彈窗組件的時候,確認和取消按鈕有的時候會根據用戶的使用行為會顯示在不同的位置

          下面來看看這種特性的表現在實際開發中的作用

          windows用戶看到的樣子

          好了,direction的話題就告一段落,接下來介紹最后一個知識了,堅持住,快休息了

          writing-mode

          改變CSS世界縱橫規則的writing-mode,如此強大的功能,居然沒有被大家發掘和廣發應用起來,實屬遺憾了,話不多說,往下看

          writing-mode作用及真正需要關注的屬性值

          writing-mode可以改變排版,變成垂直流,如下圖所示

          在使用語法上,也是需要記兩套的,一套是IE私有屬性,一套是CSS3規范屬性

          CSS3語法:

          IE語法:

          針對實戰版來整理一份writing-mode是這樣的

          對于垂直排版來說,實際開發是很少會遇到的,不過還是要說說writing-mode帶來的改變

          水平方向也能margin合并

          我們都知道兩個相鄰的元素垂直的margin會合并,當元素變為垂直流的時候,水平的margin也會合并

          普通塊元素可以使用margin: auto實現垂直居中

          text-align:center實現圖片垂直居中(同上實現的效果)

          實現全兼容的icon fonts圖標旋轉效果

          老IE下讓小圖標旋轉很麻煩,writing-mode把文檔變成垂直流的時候,英文、數字和字符號都天然的轉了90°

          @font-face的兼容性很好IE5.5就支持了,所以就算是IE6和IE7也沒問題

          好了,這就是《CSS世界》里最后三章的全部內容了,終于寫完了,哈哈,希望大家有收獲一些冷知識。

          簡單說兩句

          做個個人的小總結吧:

          css有很多奇妙的地方,在某些特性當初被設計出來的時候可能只是為了某些圖文排版而生

          但是我們可以利用它們帶來的特性發揮自己的創造力,實現其他很多意想不到的效果,因此,上面所講述的所有知識點,盡管很多內容都有點奇技淫巧以悅婦孺的過程

          但這也給我們開發的過程中,提供了一些很出奇的妙招,值得我們好好學習領悟

          感謝個位的觀看了,再見了,哈哈

          132個特效,是我歷時10個多月在油管一個一個跟著敲出來的,為了加強記憶,每個練習,我都錄制了視頻,在這里分享出來給大家。大家可能又會調侃了,你是工作不飽和吧,有時間做這些。其實,我目前工作還是挺飽和的,都是擠出來的。我們是9點上班,我基本7點半就到公司自學了,這樣我就有一個半小時的時間來做這些了。

          對于 CSS 評價,無論是在論壇還是身邊的人,我聽到最多的是學 CSS 這些花里胡哨沒啥用,實際項目中又用不到。聽到這些心里還是挺實受挫的,有時候會懷疑自己,我學習的方向是不是錯了。但在幾次的項目需要用到一些特效,我都能很快的找到思路并做出來,我想這是得益于,我平時所學的這些特效積累出來的。

          現在我不在困惑我所學的東西,因為學習成長是你自己事情,而不是別人在意的眼光。

          對應的所有視頻可以到 【B站查看】,或者在 B 站搜索 前端小智 即可看到,源碼都在視頻簡介里面,大家進行查看。

          67.信號故障特效

          效果:

          視頻地址:https://www.bilibili.com/video/BV17V411r74q/

          68.自定義動態復選框

          效果:

          頻地址:https://www.bilibili.com/video/BV16Z4y1u7NY/

          69.創意div盒設計

          效果:

          視頻地址:https://www.bilibili.com/video/BV1dK411J7p2/

          70.SVG彈性線條動畫特效

          效果:

          視頻地址:https://www.bilibili.com/video/BV1bA411Y7UY/

          71.類似望花筒特效

          演示視頻:https://www.bilibili.com/video/BV1Mh411Z7Ze/

          72.刮刮樂特效

          演示視頻:https://www.bilibili.com/video/BV16f4y1X7Yr/

          73.使用HTML CSS和jQuery進行水平頁面滾動

          視頻地址:https://www.bilibili.com/video/BV14A411Y7Gd/

          74.CSS Clip-path 鼠標移動特效

          視頻地址:https://www.bilibili.com/video/BV1oD4y1U7C8/

          75. 讓面部表情跟著鼠標光標變化

          視頻地址:https://www.bilibili.com/video/BV1vT4y157Up/

          76.星星閃爍特效

          視頻地址:https://www.bilibili.com/video/BV1tf4y1979Z/

          77.CSS漸變按鈕懸停效果

          視頻地址:https://www.bilibili.com/video/BV1EV411U7fD/

          78.聚光燈特效(JQuery鼠標移動特效)


          視頻地址:https://www.bilibili.com/video/BV1sA411n7us/


          79.3D視頻立方體特效


          視頻地址:https://www.bilibili.com/video/BV1eZ4y1K7o3/


          80.3D背景動畫效果


          視頻地址:https://www.bilibili.com/video/BV1tK4y1Y771/


          81.滑塊百分比的有趣應用

          視頻地址:https://www.bilibili.com/video/BV1V5411h7iZ/

          82.純CSS液體加載特效

          視頻地址:https://www.bilibili.com/video/BV1Dh41197Lf/

          83.CSS懸停效果(只是為了好玩)

          視頻地址:https://www.bilibili.com/video/BV145411b7RJ/

          84.CSS 3D波浪加載特效

          視頻播放地址:https://www.bilibili.com/video/BV15D4y1m7JG/

          85.CSS水波背景動畫特效

          視頻演示地址:https://www.bilibili.com/video/BV1Lf4y1X7Bm/

          86.CSS加載文本動畫特效

          視頻地址:https://www.bilibili.com/video/BV1YA411n7xu/

          87.服務條款的一種展示特效

          視頻地址:https://www.bilibili.com/video/BV1vA411E77W/

          88.幽靈文字特效

          視頻地址:https://www.bilibili.com/video/BV17T4y1A7Vg/

          89.破碎的玻璃橫幅


          視頻地址:https://www.bilibili.com/video/BV1s5411b78Q/

          90.CSS列表項懸停特效

          視頻地址:https://www.bilibili.com/video/BV1KZ4y1N7nr/

          91.方向感應卡懸停效果

          視頻地址:https://www.bilibili.com/video/BV1Jf4y1D7Lm/

          92.發光文字加載特效

          視頻地址:https://www.bilibili.com/video/BV17A411J7RL/

          93.磚石旋轉背景動畫特效

          視頻地址:https://www.bilibili.com/video/BV1yv411C7NJ/

          94.文字懸停分割特效

          視頻地址:https://www.bilibili.com/video/BV1RV411m7LQ/

          95.按鈕漣漪特效

          視頻地址:https://member.bilibili.com/v2#/upload-manager/article

          96.魔幻的滾動視差特效

          視頻地址:https://www.bilibili.com/video/BV1LK411A7X2/

          97.炫酷加載特效(模擬手機信號)

          視頻地址:https://www.ixigua.com/6882247186009031181/

          98.炫酷發光特效

          視頻地址:https://www.ixigua.com/6882247186009031181/

          99.仙境特效

          視頻地址:https://www.ixigua.com/6883784380632793611/


          100.模擬播放暫時特效

          視頻地址:https://www.ixigua.com/6885309534483513859/

          101.新擬物漸變加載特效

          視頻地址:https://www.ixigua.com/6886389124811457032/

          102.使用Vanilla lift.js實現3D視差傾斜效果

          視頻地址:https://www.ixigua.com/6887878632572715532/

          103.3D書籍模型

          視頻地址:https://www.ixigua.com/6888608009556230667/

          104.打工人的撕裂方式

          視頻地址:https://www.ixigua.com/6890835336868397572/

          105.液體流加載特效

          視頻地址:https://www.ixigua.com/6891580915374359043/

          106.創意視頻球特效


          視頻地址:https://www.ixigua.com/6893066211257483784/


          107.CSS響應卡片懸停特效

          視頻地址:https://www.ixigua.com/6893808422605554183/

          108.使用Grade.Js自動生成漸變背景顏色


          視頻地址:https://www.ixigua.com/6894533882432094728/

          109.現代CSS按鈕懸停效果

          視頻地址:https://www.ixigua.com/6897449872975200780/

          110.無限疊卡特效

          視頻地址:https://www.ixigua.com/6897450763094753800/

          111.使用CSS進行彩色煙霧視頻和文本處理

          視頻地址:https://www.ixigua.com/6898262151455048199/

          112.使用 sketch.js 實現彗星特效

          視頻地址:https://www.ixigua.com/6899588911862022660/

          113.文字肖像特效

          視頻地址:https://www.ixigua.com/6901230535520027143/

          114.使用SVG filter創建粘糊糊效果

          視頻地址:https://www.ixigua.com/6902344348986262024/

          115.滑動菜單指示器特效

          視頻地址:https://www.ixigua.com/6903449899006689804/

          117.純CSS 和 JS 實現泡泡特效

          視頻地址:https://www.ixigua.com/6904504548409213454/

          118.CSS3按鈕懸停閃亮特效

          視頻地址:https://www.ixigua.com/6906066035506414084/

          119.css按鈕邊框漸變發光特效

          視頻地址:https://www.ixigua.com/6906796258489270788/

          120.如何使用 JS 動態更新CSS變量

          視頻地址:https://www.ixigua.com/6907873173098889731/?&wid_try=1

          121.使用gsap scrollTrigger滾動觸發CSS動畫

          視頻地址: https://www.bilibili.com/video/BV1964y1f7CK/

          122.為你的博客和網站設計一個簡單的日歷

          123.火箭發射特效

          視頻地址:https://www.ixigua.com/6910132650648797699/

          124.酷炫box-shadow 懸停特效

          視頻地址:https://www.ixigua.com/6911265897659400708/

          125.如何使用 JS 實現背景視差特效

          視頻地址:https://www.ixigua.com/6911983867603878407/

          126.如何使用CSS和 JS 創建簡單圖片切換

          視頻地址:https://www.ixigua.com/6914222592170263053/

          127.CSS 圖標魔法線懸停特效

          視頻地址:https://www.ixigua.com/6914589524660224526/

          128.落葉飄舞動畫特效

          視頻地址:https://www.ixigua.com/6915324225184072200/

          129.好家伙,女朋友讓我用前端人的方式,描述一下一幅畫被墨水灑的到樣子

          視頻地址:https://www.ixigua.com/6916439319217603085/

          130. HTML+CSS完成蘋果logo加載效果,好家伙,還不收藏一波!

          視頻地址:https://www.ixigua.com/6917189337700368907/

          131.手擼一個跑馬燈加載特效送給前端女朋友

          視頻地址:https://www.ixigua.com/6917930699139842563

          132.前端人,來,給沾滿霧氣的玻璃刮一刮,好家伙,這工具超好用!

          視頻地址:https://www.ixigua.com/6919046116382081540

          完~,我是小智,我要去刷碗了,我們下期再見!


          主站蜘蛛池模板: 免费无码一区二区三区| 精品成人乱色一区二区| 无码一区二区三区在线| 人妻体内射精一区二区| 无码人妻久久一区二区三区| 午夜视频一区二区| 老熟女高潮一区二区三区| 精品福利一区二区三区精品国产第一国产综合精品 | 日本丰满少妇一区二区三区| 日本中文一区二区三区亚洲| 午夜AV内射一区二区三区红桃视| 亚洲不卡av不卡一区二区| 97久久精品一区二区三区| 中文字幕一区二区三区免费视频 | 亚洲综合色自拍一区| 免费播放一区二区三区| 国产高清在线精品一区二区三区 | 色一乱一伦一图一区二区精品| 鲁丝片一区二区三区免费| 一区二区日韩国产精品| 中文字幕一区二区区免| 精品黑人一区二区三区| 国产精品无码不卡一区二区三区| 人妻无码久久一区二区三区免费| 又硬又粗又大一区二区三区视频| 精品国产一区二区三区在线| 亚洲一区中文字幕| 国产一区二区三区乱码网站| 中文字幕人妻无码一区二区三区 | 日韩免费视频一区| 人妻AV一区二区三区精品| 国产波霸爆乳一区二区| 精品人妻少妇一区二区三区| 福利电影一区二区| 一区二区不卡视频在线观看 | 一区二区三区在线视频播放| 国产精品视频一区麻豆| 人妻少妇精品视频一区二区三区| 日韩免费无码视频一区二区三区| 成人日韩熟女高清视频一区| 国产色精品vr一区区三区|