CSS3的那些事，網(wǎng)站特效想怎么玩就怎么玩

SS即層疊樣式表（Cascading StyleSheet）。在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。

今天給大家寫了兩個特效，好玩又好看，實(shí)不實(shí)用就看你怎么用

css3的這兩個特效源碼項目文末有領(lǐng)取地址

一、css3點(diǎn)擊按鈕氣泡動畫特效

css3點(diǎn)擊按鈕

css3點(diǎn)擊按鈕氣泡動畫特效源碼展示

二、CSS3繪制游動的魚

CSS3繪制游動的魚部分源碼

學(xué)習(xí)前端特效歡迎加入web前端網(wǎng)站開發(fā)學(xué)習(xí)群640633433

果圖

各位觀眾大家好，今天給大家?guī)淼氖?/p>

jQuery制作海底世界魚群游動動畫特效源碼

附帶滑屏切換特效！

是不是很炫酷！

廢話不多說上源碼

網(wǎng)站樣式源碼：

<!doctype html>

<html>

<head>

<title>jQuery海底世界魚群游動動畫特效</title>

<style>

html,body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

.container{

position: relative;

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

canvas{

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

var HAMMERHEAD_RENDERER={

HAMMERHEAD_COUNT : 10,

ADD_INTERVAL : 3,

DELTA_THETA : Math.PI / 1000,

ADJUST_DISTANCE : 50,

ADJUST_OFFSET : 10,

init : function(){

this.setParameters();

this.reconstructMethod();

this.createHammerHeads(this.INIT_HAMMERHEAD_COUNT);

this.bindEvent();

this.render();

setParameters : function(){

this.$window=$(window);

this.$container=$('#jsi-sea-container');

this.width=this.$container.width();

this.height=this.$container.height();

this.context=$('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');

this.interval=this.ADD_INTERVAL;

this.distance=Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));

this.x=this.width;

this.destinationX=this.x;

this.theta=0;

this.hammerheads=[];

reconstructMethod : function(){

this.render=this.render.bind(this);

createHammerHeads : function(){

for(var i=0, length=this.HAMMERHEAD_COUNT; i < length; i++){

this.hammerheads.push(new HAMMERHEAD(this.width, this.height));

}

bindEvent : function(){

this.$container.on('mousemove', this.changeView.bind(this, false));

this.$container.on('mouseout', this.changeView.bind(this, true));

changeView : function(toAdjust, event){

this.destinationX=event.clientX - this.$container.offset().left + this.$window.scrollLeft();

if(!toAdjust){

return;

}

if(this.destinationX < this.ADJUST_OFFSET){

this.destinationX=0;

}else if(this.distanceX > this.width - this.ADJUST_OFFSET){

this.destinationX=this.width;

}

render : function(){

requestAnimationFrame(this.render);

var gradient=this.context.createRadialGradient(this.width / 2, this.height / 2, 0, this.width / 2, this.height / 2, this.distance),

rate=(1 + 0.2 * Math.sin(this.theta));

gradient.addColorStop(0, 'hsl(195, 80%, ' + (90 * rate) + '%)');

gradient.addColorStop(0.2, 'hsl(195, 100%, ' + (50 * rate) + '%)');

gradient.addColorStop(1, 'hsl(220, 100%, ' + (10 * rate) + '%)');

this.context.fillStyle=gradient;

this.context.fillRect(0, 0, this.width, this.height);

this.hammerheads.sort(function(hammerhead1, hammerhead2){

return hammerhead1.z - hammerhead2.z;

});

for(var i=this.hammerheads.length - 1; i >=0; i--){

if(!this.hammerheads[i].render(this.context)){

this.hammerheads.splice(i, 1);

}

this.context.clearRect(this.x, 0, this.width - this.x, this.height);

if(this.interval--==0){

this.interval=this.ADD_INTERVAL;

this.hammerheads.push(new HAMMERHEAD(this.width, this.height));

}

this.theta +=this.DELTA_THETA;

this.theta %=Math.PI * 2;

if(this.destinationX > this.x){

this.x=Math.min(this.x + this.ADJUST_DISTANCE, this.destinationX);

}else{

this.x=Math.max(this.x - this.ADJUST_DISTANCE, this.destinationX);

}

};

var HAMMERHEAD=function(width, height){

this.width=width;

this.height=height;

this.init();

};

HAMMERHEAD.prototype={

COLOR : 'hsl(220, %s%, 30%)',

ANGLE_RANGE : {min : -Math.PI / 8, max : Math.PI / 8},

INIT_SCALE : 0.1,

MAX_Z : 10,

DELTA_PHI : Math.PI / 80,

VELOCITY : 3,

VERTICAL_THRESHOLD : 80,

init : function(){

this.theta=this.ANGLE_RANGE.min + (this.ANGLE_RANGE.max - this.ANGLE_RANGE.min) * Math.random();

this.x=this.width / 2 + this.width / 4 * this.theta / Math.PI * 8;

this.y=this.height + this.VERTICAL_THRESHOLD * this.INIT_SCALE;

this.z=Math.random() * this.MAX_Z;

this.vx=-this.VELOCITY * Math.cos(this.theta + Math.PI / 2);

this.vy=-this.VELOCITY * Math.sin(this.theta + Math.PI / 2);

this.phi=Math.PI * 2 * Math.random();

this.color=this.COLOR.replace('%s', 90 - 60 * this.z / this.MAX_Z | 0);

render : function(context){

var tailX=20 * Math.sin(this.phi),

angle=Math.sin(this.phi),

height=this.height + this.VERTICAL_THRESHOLD,

scale=this.INIT_SCALE + (1 - this.INIT_SCALE) * (height - this.y) / height * (this.MAX_Z - this.z) / this.MAX_Z;

context.save();

context.fillStyle=this.color;

context.translate(this.x, this.y);

context.scale(scale, scale);

context.rotate(this.theta);

context.beginPath();

context.moveTo(-20, -40);

context.bezierCurveTo(-8, -48, 8, -48, 20, -40);

context.lineTo(20, -28);

context.lineTo(8, -36);

context.lineTo(8, -8);

context.lineTo(20, 4 + 6 * angle);

context.lineTo(8, 0);

context.lineTo(6, 16);

context.quadraticCurveTo(4, 32, tailX, 64);

context.quadraticCurveTo(-4, 32, -6, 16);

context.lineTo(-8, 0);

context.lineTo(-20, 4 - 6 * angle);

context.lineTo(-8, -8);

context.lineTo(-8, -36);

context.lineTo(-20, -28);

context.closePath();

context.fill();

context.save();

context.beginPath();

context.translate(tailX, 64);

context.rotate(-Math.sin(this.phi) * Math.PI / 6);

context.moveTo(0, -5);

context.lineTo(10, 15);

context.lineTo(0, 5);

context.lineTo(-10, 15);

context.closePath();

context.fill();

context.restore();

this.x +=this.vx * scale;

this.y +=this.vy * scale;

this.phi +=this.DELTA_PHI;

this.phi %=Math.PI * 2;

return this.y >=-this.VERTICAL_THRESHOLD;

}

};

var MANTA_RENDERER={

MANTA_COUNT : 3,

ADD_INTERVAL : 30,

DELTA_THETA : Math.PI / 1000,

init : function(){

this.setParameters();

this.reconstructMethod();

this.createMantas();

this.render();

setParameters : function(){

this.$container=$('#jsi-sea-container');

this.width=this.$container.width();

this.height=this.$container.height();

this.context=$('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');

this.interval=this.ADD_INTERVAL;

this.distance=Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));

this.theta=0;

this.mantas=[];

reconstructMethod : function(){

this.render=this.render.bind(this);

createMantas : function(){

for(var i=0, length=this.MANTA_COUNT; i < length; i++){

this.mantas.push(new MANTA(this.width, this.height, this.context));

}

render : function(){

requestAnimationFrame(this.render);

var gradient=this.context.createRadialGradient(this.width / 2, this.height / 2, 0, this.width / 2, this.height / 2, this.distance),

rate=(1 + 0.2 * Math.sin(this.theta));

gradient.addColorStop(0, 'hsl(195, 80%, ' + (60 * rate) + '%)');

gradient.addColorStop(0.2, 'hsl(195, 100%, ' + (40 * rate) + '%)');

gradient.addColorStop(1, 'hsl(220, 100%, ' + (5 * rate) + '%)');

this.context.fillStyle=gradient;

this.context.fillRect(0, 0, this.width, this.height);

this.mantas.sort(function(manta1, manta2){

return manta1.z - manta2.z;

});

for(var i=this.mantas.length - 1; i >=0; i--){

if(!this.mantas[i].render(this.context)){

this.mantas.splice(i, 1);

}

if(this.interval--==0){

this.interval=this.ADD_INTERVAL;

this.mantas.push(new MANTA(this.width, this.height, this.context));

}

this.theta +=this.DELTA_THETA;

this.theta %=Math.PI * 2;

}

};

var MANTA=function(width, height, context){

this.width=width;

this.height=height;

this.init(context);

};

MANTA.prototype={

COLOR : 'hsl(200, %s%, %l%)',

ANGLE_RANGE : {min : -Math.PI / 8, max : Math.PI / 8},

INIT_SCALE : 0.3,

RANGE_Z : {min : 0, max : 30},

DELTA_ANGLE : Math.PI / 160,

VELOCITY : 2,

VERTICAL_THRESHOLD : 400,

init : function(context){

this.angle=this.getRandomValue(this.ANGLE_RANGE);

this.x=this.width / 2 + this.width / 3 * this.angle / Math.PI * 8;

this.y=this.height + this.VERTICAL_THRESHOLD * this.INIT_SCALE;

this.z=this.getRandomValue(this.RANGE_Z);

this.vx=-this.VELOCITY * Math.cos(this.angle + Math.PI / 2);

this.vy=-this.VELOCITY * Math.sin(this.angle + Math.PI / 2);

this.phi=Math.PI * 2 * Math.random();

this.theta=Math.PI * 2 * Math.random();

this.psi=Math.PI * 2 * Math.random();

var color=this.COLOR.replace('%s', 60),

luminance=20 * this.z / this.RANGE_Z.max | 0;

this.gradient=context.createLinearGradient(-140, 0, 140, 0);

this.gradient.addColorStop(0, color.replace('%l', 10 + luminance));

this.gradient.addColorStop(0.1, color.replace('%l', 10 + luminance));

this.gradient.addColorStop(0.5, color.replace('%l', 20 + luminance));

this.gradient.addColorStop(0.9, color.replace('%l', 10 + luminance));

this.gradient.addColorStop(1, color.replace('%l', 10 + luminance));

this.color=this.COLOR.replace('%s', 100).replace('%l', 5 + luminance);

getRandomValue : function(range){

return range.min + (range.max - range.min) * Math.random();

render : function(context){

var height=this.height + this.VERTICAL_THRESHOLD,

scale=this.INIT_SCALE + (1 - this.INIT_SCALE) * (height - this.y) / height * (this.RANGE_Z.max - this.z) / this.RANGE_Z.max * 2,

top=(Math.sin(this.phi) < 0 ? 50 : 60) * Math.sin(this.phi);

context.save();

context.translate(this.x, this.y);

context.scale(scale, scale);

context.rotate(this.angle);

context.fillStyle=this.color;

context.beginPath();

context.moveTo((225 + top) / 4, -20);

context.lineTo((210 + top) / 4, 70 / 4);

context.lineTo(-(210 + top) / 4, 70 / 4);

context.lineTo(-(225 + top) / 4, -20);

context.closePath();

context.fill();

context.lineWidth=5;

context.strokeStyle=this.gradient;

context.beginPath();

context.moveTo(0, 70);

context.quadraticCurveTo(0, 130, 20 * Math.sin(this.theta), 190);

context.stroke();

context.fillStyle=this.gradient;

context.beginPath();

context.moveTo(-15, -40);

context.bezierCurveTo(-10, -35, 10, -35, 15, -40);

context.lineTo(30, -40);

context.quadraticCurveTo(35, -40, 45, -30);

context.quadraticCurveTo(50, -25, 80 + top, 0);

context.quadraticCurveTo(60, 0, 10, 70);

context.lineTo(-10, 70);

context.quadraticCurveTo(-60, 0, -80 - top, 0);

context.quadraticCurveTo(-50, -25, -45, -30);

context.quadraticCurveTo(-35, -40, -30, -40);

context.lineTo(-15, -40);

context.closePath();

context.fill();

context.lineWidth=12;

context.strokeStyle=this.gradient;

context.beginPath();

context.moveTo(23, -38);

context.quadraticCurveTo(33, -55, 23 - 10 * Math.sin(this.psi), -70);

context.stroke();

context.beginPath();

context.moveTo(-23, -38);

context.quadraticCurveTo(-33, -55, -23 + 10 * Math.sin(this.psi), -70);

context.stroke();

context.lineWidth=1;

context.strokeStyle=this.color;

context.beginPath();

for(var i=0; i < 5; i++){

var y=-10 + i * 8 + (1 - Math.sin(this.phi)) * 3;

context.moveTo(10, -20 + i * 8);

context.quadraticCurveTo(20, -15 + i * 8, 30, y);

context.moveTo(-10, -20 + i * 8);

context.quadraticCurveTo(-20, -15 + i * 8, -30, y);

}

context.stroke();

context.restore();

this.x +=this.vx * scale;

this.y +=this.vy * scale;

this.phi +=this.DELTA_ANGLE;

this.phi %=Math.PI * 2;

this.theta +=this.DELTA_ANGLE;

this.theta %=Math.PI * 2;

this.psi +=this.DELTA_ANGLE;

this.psi %=Math.PI * 2;

return this.y >=-this.VERTICAL_THRESHOLD;

}

};

$(function(){

MANTA_RENDERER.init();

HAMMERHEAD_RENDERER.init();

});

</script>

</div>

</body>

</html>

品：科普中國

制作：蘇澄宇

監(jiān)制：中國科學(xué)院計算機(jī)網(wǎng)絡(luò)信息中心

這看似是一個理所應(yīng)當(dāng)?shù)膯栴}："因?yàn)轸~有鰭，就像人有腳一樣，所以魚會游泳"。

如果嫌這句話麻煩甚至可以用"因?yàn)樗囚~，所以它會游泳"這種方式來回答。

但真相真的是這樣嗎？魚鰭是魚游泳的主要動力來源嗎？

如果深究下來，你會發(fā)現(xiàn)這個問題其實(shí)并不簡單。

圖源：Giphy 動圖

很早之前，人們就認(rèn)識到，游泳是動物最省力的運(yùn)動方式。

走路、飛行、游泳，如果讓你選擇一種方式從A點(diǎn)移動到B點(diǎn)，你會怎么選？

我想大部分人都會選擇飛行。

確實(shí)，對于個體來說，飛行是最快的運(yùn)動方式，但如果單從消耗能量大小的角度來考慮，飛行卻不是最優(yōu)解。

科學(xué)家研究發(fā)現(xiàn)，同樣要移動1km，松鼠爬行需要消耗22.73J的熱量；海鷗飛行需要消耗6.07J的熱量；鮭魚游泳只需要消耗1.63J的熱量，大約只有松鼠的1/20，海鷗的1/6。

就算是找一個和鮭魚一模一樣的物體，用同樣的速度把它放到水里拖動它移動1km，科學(xué)家發(fā)現(xiàn)會游動的鮭魚消耗的能量只有前者的1/7-1/8。

很顯然，游泳是動物最省力的方式。

魚既然游泳那么高效，人類肯定會想去模仿它，去創(chuàng)造一個和魚運(yùn)動方式一樣的水下推進(jìn)裝置。

你也許會想，我們不是已經(jīng)有潛艇了嗎？

但即使是最快的核潛艇，用螺旋槳推進(jìn)的它時速只有44.7節(jié)，也就是每小時80.4公里。水里游得最快的旗魚，速度可以達(dá)到每小時112公里。

不止是速度的問題，潛艇推進(jìn)時噪音大、耗能高，并且高速旋轉(zhuǎn)的螺旋槳還會產(chǎn)生空蝕效應(yīng)，導(dǎo)致螺旋槳磨損。

所以人類一直想去模仿魚的游動方式，設(shè)計出更先進(jìn)的水下載具，這也就是仿生。

但想去模仿，就得先搞懂魚游泳的原理。

那第一個問題來了，選哪種魚作為研究對象呢？

如果仔細(xì)觀察魚的運(yùn)動方式，你會發(fā)現(xiàn)大部分的魚運(yùn)動方式大抵相同：利用尾部和身軀肌肉的收縮進(jìn)行有規(guī)律的左右扭動，專業(yè)上這稱為身體/尾鰭推進(jìn)模式(Body and/or caudal fin, BCF)。

魚的游動方式｜圖源：https://tpwd.texas.gov/kids/wild_things/fish/howdofishswim.phtml

科學(xué)家發(fā)現(xiàn)，不同的魚，扭動的幅度大小和頻率不太一樣，但核心都是在于扭動。

當(dāng)然，魚鰭的擺動在游動時也起到一定的作用，主要是調(diào)整方向，最主要的動力還是來自于身軀的扭動，特別是當(dāng)魚快速移動的時候。

所以，魚鰭并不是魚游泳的主要的動力來源，而是軀干的扭動。

不同魚的魚鰭大小、形狀不一樣｜圖源：https://tpwd.texas.gov/kids/wild_things/fish/howdofishswim.phtm

既然魚的主要運(yùn)動方式是靠軀干的扭動，那就研究它們扭動的細(xì)節(jié)就好了。

前面說了，不同的魚擺動的幅度不太一樣，有的幅度大，有的幅度小。扭動幅度大的稱為波動式，扭動幅度小的稱為擺動式。不

管怎么分類，這兩種推進(jìn)模式在基本運(yùn)動原理都一樣。

不同的魚扭動的幅度不一樣｜圖源：文獻(xiàn)3

而作為科學(xué)研究，肯定優(yōu)先找那些擺動幅度大的魚來作為研究對象，因?yàn)檫\(yùn)動幅度越大，越容易觀察到擺動的細(xì)節(jié)。

那什么魚擺動幅度比較大呢？

自然是黃鱔、鰻鱺之類的長條魚，因?yàn)樯硇驮介L條，利用肌肉收縮為動力產(chǎn)生的波浪式運(yùn)動越明顯。

鰻魚的運(yùn)動方式主要依靠軀體的波浪式運(yùn)動｜圖源：giphy 動圖

所以很早的時候，科學(xué)家就拿鰻魚之類的長條魚來做實(shí)驗(yàn)，主要用高速攝影的方式來拍攝它們的運(yùn)動方式。

利用攝影技術(shù)來研究魚的運(yùn)動方式，有很大的局限性。

魚是自由的，它在水箱里游來游去都是隨心所欲的，更不會做出特定的動作來滿足科學(xué)家的研究需求。

為了定量分析魚在游動過程中的振幅、頻率、前進(jìn)速度等參數(shù)，有科學(xué)家設(shè)計了一個能讓一條死魚軀體產(chǎn)生波狀游泳動作的機(jī)械裝置。

這個裝置通過在魚的身體上插一排長桿，然后搖動裝置上的凸輪來控制魚的動作。

當(dāng)凸輪轉(zhuǎn)動的時候，動桿就會驅(qū)動魚體產(chǎn)生預(yù)定的波狀運(yùn)動。

這樣科學(xué)家就可以讓魚按照自己想要的方式進(jìn)行運(yùn)動，可以更方便地研究出具體的參數(shù)。

記錄下魚運(yùn)動的方式很多，但不管什么研究方式，最后都還是要總結(jié)成理論模型，才能了解運(yùn)動的具體機(jī)制。

通過觀察科學(xué)家發(fā)現(xiàn)，在魚的游動過程中，魚體的肌肉會按從頭至尾的順序進(jìn)行收縮，身體逐個部位彎曲，產(chǎn)生向后的運(yùn)動波，進(jìn)而推動水流產(chǎn)生向前的推力。

鮭魚的肌肉排列順序｜圖源：https://tpwd.texas.gov/

至于這個推力是如何產(chǎn)生的，主要有兩個理論來解釋：

阻力理論（RFT）& 細(xì)長體理論（EBT）

阻力理論

這是英國物理學(xué)家弗里·泰勒（Geoffrey Taylor）在1952年提出的，在阻力理論中，一個物體會被分割成無窮小的部分，每一個部分都會產(chǎn)生推力和阻力。

當(dāng)魚產(chǎn)生波浪式運(yùn)動時，那么垂直于魚體方向的阻力比平行于魚體方向的阻力大。其結(jié)果是在平行方向，也就是前進(jìn)的方向上，產(chǎn)生一個推力。

阻力理論｜圖源：AIP Publish

細(xì)長體理論

這是一位英國數(shù)學(xué)家詹姆斯·萊特希爾（James Lighthill）在1960年提出的，和前面的阻力理論完全不一樣，他認(rèn)為推動魚前進(jìn)主要依靠的是水的慣性。

這使得魚體作為一個平面，可以通過小振幅的波動產(chǎn)生推力。

這兩個理論之間的最主要區(qū)別在于所產(chǎn)生的力量的類型。

泰勒理論認(rèn)為，讓魚向前游動的力產(chǎn)生于阻力，阻力的作用方向和魚的運(yùn)動方向相反，但與物體的運(yùn)動速度相一致；萊特希爾則認(rèn)為魚向前的游動的力產(chǎn)生于反作用力，其作用方向與作用力相反，并與加速度保持一致。

后來一個北京計算機(jī)科學(xué)研究中心的團(tuán)隊，通過超級計算機(jī)的模擬，對兩個理論進(jìn)行了驗(yàn)證。

之后發(fā)現(xiàn)兩個理論都是對的，但不同的魚情況不太一樣。

這主要還是和魚的形狀有關(guān)，長條形的魚，比如鰻魚，它在波動的時候，軀干部分產(chǎn)生的阻力是最主要的，因?yàn)檫@部分力的作用相對平滑和均勻。

模擬鰻魚的主要運(yùn)動方式｜圖源：文獻(xiàn)1

而對于鯖魚，這類形狀比較普通的魚，它在擺動的時候，雖然也依靠軀干部分的阻力，但尾鰭左右擺動產(chǎn)生的反作用力也同樣很重要。

模擬鯖魚的運(yùn)動方式｜圖源：文獻(xiàn)1

簡單來說，身型越長條的魚，越依靠軀干部分產(chǎn)生的作用力，身型越短的魚，越依靠尾鰭產(chǎn)生的作用力。

將動力移到尾部的魚有一個缺點(diǎn)，那就是魚體很容易失去側(cè)向平衡，也就是說，它一擺尾就可能會引起頭部的搖擺。

對于這點(diǎn)，鲅魚通過演化，把自己身體中部垂直面提高，增重軀干前面的重量（可以說是增加配重），來增大左右擺動的阻力，避免了游泳的時候偏來偏去。

雖然科學(xué)家最終搞清楚了魚到底是如何游動的，但他們并沒有搞懂魚游動過程中能量是如何轉(zhuǎn)移利用的，這也是為什么直到現(xiàn)在，我們還沒能造出一個完美的仿生魚游動裝置。

之前造出來的仿生魚雖然可以模擬魚的游動效果，但問題還有一大堆：要么游得太慢，要么功耗太高，要么軀體過大，要么結(jié)構(gòu)復(fù)雜。

各式各樣的仿生魚｜圖源：文獻(xiàn)2

魚游泳很容易見到，但即使是身邊常見的現(xiàn)象，要搞清楚原理也很難，要復(fù)制它則更難。

在大自然面前，人類的知識真的好渺小…

參考文獻(xiàn)：

[1]https://www.technologyreview.com/2018/12/18/138543/we-finally-know-how-fish-swim-so-fast/

[2]https://mall.cnki.net/magazine/article/HLGX199202002.htm

[3]http//tow.cnki.net/kcms/detail/detail.aspx?filename=JXXB201617015&dbcode=CRJT_CJFD&dbname=CRJT_CJFDTOTAL&v=

[4]https://epubs.siam.org/doi/abs/10.1137/1.9781611970517.ch5

在線咨詢

上一篇：Qt為什么站穩(wěn)c++GUI的top1
下一篇：致青春！一鍵上線你們專屬的云上畢業(yè)紀(jì)念冊

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS3的那些事，網(wǎng)站特效想怎么玩就怎么玩

網(wǎng)站樣式源碼：

您的項目需求