整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是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小时内与您取得联系。
