整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是Echa，給大家拜年了！！！
在新的一年里，小編沒有黃金萬兩，沒有厚厚的紅包，只有笑口常開，只有說不完的祝福，送給粉絲們。
每一聲鞭炮響起，每一個煙花燃起，每一盞燈籠亮起，都流動著每一縷思念，每一份關懷，都凝聚著每一聲問候，今年過節不收禮，隨隨便便過得去，包個紅包就可以，多點少點不介意，或者來句評論話，知道把我記心里，我也為你送心意，愿粉絲們新年大吉，一切順利！
今天小編給大家分享用幾行代碼怎么實現2023新年祝福。
大家猜猜這個是用啥實現的？先看效果圖：
完整代碼如下：
<!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 站搜索 前端小智 即可看到，源碼都在視頻簡介里面，大家進行查看。
效果：
視頻地址：https://www.bilibili.com/video/BV17V411r74q/
效果：
頻地址：https://www.bilibili.com/video/BV16Z4y1u7NY/
效果：
視頻地址：https://www.bilibili.com/video/BV1dK411J7p2/
效果：
視頻地址：https://www.bilibili.com/video/BV1bA411Y7UY/
演示視頻：https://www.bilibili.com/video/BV1Mh411Z7Ze/
演示視頻：https://www.bilibili.com/video/BV16f4y1X7Yr/
視頻地址：https://www.bilibili.com/video/BV14A411Y7Gd/
視頻地址：https://www.bilibili.com/video/BV1oD4y1U7C8/
視頻地址：https://www.bilibili.com/video/BV1vT4y157Up/
視頻地址：https://www.bilibili.com/video/BV1tf4y1979Z/
視頻地址：https://www.bilibili.com/video/BV1EV411U7fD/
視頻地址：https://www.bilibili.com/video/BV1sA411n7us/
視頻地址：https://www.bilibili.com/video/BV1eZ4y1K7o3/
視頻地址：https://www.bilibili.com/video/BV1tK4y1Y771/
視頻地址：https://www.bilibili.com/video/BV1V5411h7iZ/
視頻地址：https://www.bilibili.com/video/BV1Dh41197Lf/
視頻地址：https://www.bilibili.com/video/BV145411b7RJ/
視頻播放地址：https://www.bilibili.com/video/BV15D4y1m7JG/
視頻演示地址：https://www.bilibili.com/video/BV1Lf4y1X7Bm/
視頻地址：https://www.bilibili.com/video/BV1YA411n7xu/
視頻地址：https://www.bilibili.com/video/BV1vA411E77W/
視頻地址：https://www.bilibili.com/video/BV17T4y1A7Vg/
視頻地址：https://www.bilibili.com/video/BV1s5411b78Q/
視頻地址：https://www.bilibili.com/video/BV1KZ4y1N7nr/
視頻地址：https://www.bilibili.com/video/BV1Jf4y1D7Lm/
視頻地址：https://www.bilibili.com/video/BV17A411J7RL/
視頻地址：https://www.bilibili.com/video/BV1yv411C7NJ/
視頻地址：https://www.bilibili.com/video/BV1RV411m7LQ/
視頻地址：https://member.bilibili.com/v2#/upload-manager/article
視頻地址：https://www.bilibili.com/video/BV1LK411A7X2/
視頻地址：https://www.ixigua.com/6882247186009031181/
視頻地址：https://www.ixigua.com/6882247186009031181/
視頻地址：https://www.ixigua.com/6883784380632793611/
視頻地址：https://www.ixigua.com/6885309534483513859/
視頻地址：https://www.ixigua.com/6886389124811457032/
視頻地址：https://www.ixigua.com/6887878632572715532/
視頻地址：https://www.ixigua.com/6888608009556230667/
視頻地址：https://www.ixigua.com/6890835336868397572/
視頻地址：https://www.ixigua.com/6891580915374359043/
視頻地址：https://www.ixigua.com/6893066211257483784/
視頻地址：https://www.ixigua.com/6893808422605554183/
視頻地址：https://www.ixigua.com/6894533882432094728/
視頻地址：https://www.ixigua.com/6897449872975200780/
視頻地址：https://www.ixigua.com/6897450763094753800/
視頻地址：https://www.ixigua.com/6898262151455048199/
視頻地址：https://www.ixigua.com/6899588911862022660/
視頻地址：https://www.ixigua.com/6901230535520027143/
視頻地址：https://www.ixigua.com/6902344348986262024/
視頻地址：https://www.ixigua.com/6903449899006689804/
視頻地址：https://www.ixigua.com/6904504548409213454/
視頻地址：https://www.ixigua.com/6906066035506414084/
視頻地址：https://www.ixigua.com/6906796258489270788/
視頻地址：https://www.ixigua.com/6907873173098889731/?&wid_try=1
視頻地址: https://www.bilibili.com/video/BV1964y1f7CK/
視頻地址：https://www.ixigua.com/6910132650648797699/
視頻地址：https://www.ixigua.com/6911265897659400708/
視頻地址：https://www.ixigua.com/6911983867603878407/
視頻地址：https://www.ixigua.com/6914222592170263053/
視頻地址：https://www.ixigua.com/6914589524660224526/
視頻地址：https://www.ixigua.com/6915324225184072200/
視頻地址：https://www.ixigua.com/6916439319217603085/
視頻地址：https://www.ixigua.com/6917189337700368907/
視頻地址：https://www.ixigua.com/6917930699139842563
視頻地址：https://www.ixigua.com/6919046116382081540
完~，我是小智，我要去刷碗了，我們下期再見！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
