menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

css3-------变换/过渡/动画

武飞扬头像
和蔼的阿木木o
帮助1人

变换transform

transform: rotate | scale | skew | translate;
属性之间用空格隔开   注意：不是逗号“，”

一、移动translate

1、translate(<translation-value>[, <translation-value>])（x偏移量，y偏移量）

学新通

2、translateX(<translation-value>)x偏移量

学新通

3、translateY(<translation-value>)y偏移量

学新通

  1.  
    .box{
  2.  
    width: 200px;
  3.  
    height: 200px;
  4.  
    background-color: #009;
  5.  
    transition: 1s;
  6.  
    }
  7.  
    .box:hover{
  8.  
    /* transform: translate(200px,300px); 向右下角移动，x方向200，y方向300 */
  9.  
    transform: translate(200px); /* 一个值代表x方向 */
  10.  
    }

移动定位

  1.  
    <style>
  2.  
    .box{
  3.  
    position: relative;
  4.  
    width: 300px;
  5.  
    height: 300px;
  6.  
    background-color: darkorange;
  7.  
    }
  8.  
    .box1{
  9.  
    position: absolute;
  10.  
    left: 50%;
  11.  
    top: 50%;
  12.  
    width: 150px;
  13.  
    height: 150px;
  14.  
    transform: translate(-50%,-50%);
  15.  
    background-color: aquamarine;
  16.  
    }
  17.  
    </style>
  18.  
    </head>
  19.  
    <body>
  20.  
    <div class="box">
  21.  
    <div class="box1"></div>
  22.  
    </div>
学新通

学新通

 旋转rotate

学新通

Transform:rotate(45deg);   默认绕Z轴旋转
Transform:rotateX(45deg); 绕X轴旋转
Transform:rotateY(45deg);  绕Y轴旋转
Transform:rotateZ(45deg); 绕Z轴旋转，正值顺时针旋转
Perspective:500;设置元素被查看位置的视图(给父元素加这个属性,视图透视效果)值越大离元素越远

  1.  
    .box:hover p{
  2.  
    position: absolute;
  3.  
    transform:translate(-50%,-300px) rotate(360deg);
  4.  
    }

改变元素基点transform-origin

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

transform-origin:X Y

(1)  transform-origin:left top:
(2)  transform-origin:right
(3)  transform-origin:25% 75%;

缩放scale 

scale(数字)      等比例缩放

scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

扭曲skew

skewX(30deg)  X轴扭曲30度

学新通

skewY(10deg)   Y轴扭曲10度

学新通

过渡transition

一、transition-property: （多个属性之间用逗号隔开）

transition-property ： none | all | [ <IDENT> ]

二、transition-duration:   （过渡持续时间）

 transition-duration ： <time> [, <time>]*

<time>为数值，单位为s（秒）或者ms(毫秒),      1s=1000ms

三、transition-timing-function:

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier(x1,y1,x2,y2)：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)        四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

四、transition-delay  延迟

学新通

cubic-bezier是贝塞尔曲线中的绘制方法。
贝塞尔曲线通过四个点来定义一条曲线。这四个值描述了控制点的位置p1,p2，其他两个点永远是p0（0,0）p3（1,1）。

cubic-bezier(0,.27,.32,1)
cubic-bezier(0.42, 0, 0.58, 1.0)

学新通

阶跃函数

一个是雪碧图的实现动画的steps效果。steps（）阶跃函数，是transition-timing-function和animation-timing-function两个属性的属性值，他是表示两个关键帧之间的动画效果，默认是ease。

steps（）有两个参数：参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。参数二是表示分成几段后，他是start还是end去执行动画。参数二有两个可选值start和end，默认是end。 

背面是否可见

-webkit-backface:versibilty  默认值可见

backface：hidden  背面不可见

兼容性交叉，使用需加前缀

  1.  
    <style>
  2.  
    .box{
  3.  
    position: relative;
  4.  
    width: 640px;
  5.  
    height: 400px;
  6.  
    box-shadow: 0 0 0 2px pink;
  7.  
    perspective: 1000px;
  8.  
    }
  9.  
    .box img{
  10.  
    position: absolute;
  11.  
    left: 0;
  12.  
    top: 0;
  13.  
    transition: 2s;
  14.  
     
  15.  
    -webkit-backface-visibility: hidden;
  16.  
    -moz-backface-visibility: hidden;
  17.  
    backface-visibility: hidden;
  18.  
    }
  19.  
    .box img:nth-of-type(1){
  20.  
    transform: rotateX(0deg); /*第一张照片旋转0度*/
  21.  
    }
  22.  
    .box img:nth-of-type(2){
  23.  
    transform: rotateX(-180deg); /*第二种照片旋转-180度，不显示*/
  24.  
    }
  25.  
    .box:hover img:nth-of-type(1){
  26.  
    transform: rotateX(180deg);
  27.  
    }
  28.  
    .box:hover img:nth-of-type(2){
  29.  
    transform: rotateX(0deg);
  30.  
    }
  31.  
    </style>
  32.  
    </head>
  33.  
    <body>
  34.  
    <div class="box">
  35.  
    <img src="./pic1.jpg" alt="">
  36.  
    <img src="./pic7.jpg" alt="">
  37.  
    </div>
  38.  
    </body>
学新通

正面学新通

 背面学新通

 照片滤镜

Filter 函数

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：

<offset-x> <offset-y> (必须)

这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).

<blur-radius> (可选)

这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).

<spread-radius> (可选)

这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 
注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。

 

<color> (可选)

查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
grayscale(%)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)

给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
opacity(%)

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <style>
  5.  
    img {
  6.  
    width: 33%;
  7.  
    height: auto;
  8.  
    float: left;
  9.  
    }
  10.  
     
  11.  
    .blur {-webkit-filter: blur(4px);filter: blur(4px);} /*模糊背景*/
  12.  
    .brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);} /*线性乘法*/
  13.  
    .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);} /*图像对比度*/
  14.  
    .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} /*灰度图像*/
  15.  
    .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}/*色相旋转*/
  16.  
    .invert {-webkit-filter: invert(100%);filter: invert(100%);} /*反转输入图像*/
  17.  
    .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);} /*照片透明度*/
  18.  
    .saturate {-webkit-filter: saturate(7); filter: saturate(7);} /*照片饱和度*/
  19.  
    .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);} /*图片转为深褐色*/
  20.  
    .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
  21.  
    /*阴影*/
  22.  
    </style>
  23.  
    </head>
  24.  
    <body>
  25.  
     
  26.  
    <p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
  27.  
     
  28.  
    <img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  29.  
    <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  30.  
    <img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  31.  
    <img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  32.  
    <img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  33.  
    <img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  34.  
    <img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  35.  
    <img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  36.  
    <img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  37.  
    <img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  38.  
    <img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
  39.  
     
  40.  
    </body>
  41.  
    </html>
学新通

 学新通

学新通 自定义变量

  1.  
    <style>
  2.  
    :root{
  3.  
    --c:#00f;
  4.  
    }
  5.  
    .box{
  6.  
    width: 200px;
  7.  
    height: 100px;
  8.  
    /* background-color: #f00; */
  9.  
    background-color: var(--c);
  10.  
    }
  11.  
    span{
  12.  
    /* color: #f00; */
  13.  
    color: var(--c);
  14.  
    }
  15.  
    </style>
  16.  
    </head>
  17.  
    <body>
  18.  
    <div class="box">hello div</div>
  19.  
    <span>hello span</span>
  20.  
    </body>
学新通

学新通

动画

动画animation

学新通

Keyframes   “关键帧”

  1.  
    /* 定义关键帧 */
  2.  
    @keyframes myball { /*引用动画名称*/
  3.  
    /* from表示动画的开始位置，也可以使用0%来表示。 */
  4.  
    form{
  5.  
    transform: translate(0);
  6.  
    }
  7.  
    /* to表示动画的结束位置，也可以使用100%来表示。 */
  8.  
    to{
  9.  
    transform: translate(800px);
  10.  
    }
  11.  
    }

一、animation-name:    动画名称

  1.  
    animation-name: none | IDENT
  2.  
    IDENT是由Keyframes创建的动画名，可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开

二、animation-duration   动画持续时间

取值:<time>为数值，单位为s （秒.）其默认值为“0”

三、animation-timing-function:    动画速度

animation-timing-function:ease | linear(匀速) | ease-in(加速) | ease-out(减速) | ease-in-out (加速再减速)| cubic-bezier(<number>, <number>, <number>, <number>) | steps()

 steps函数

四、animation-delay:    动画延迟时间

取值为<time>为数值，单位为s(秒)，其默认值也是0

五、animation-iteration-count  动画次数

animation-iteration-count: 4，可选值：数字或infinite，其中数字的大小就是执行的次数，而infinite则表示无限次。

 animation-iteration-count:infinite | <number>

六、animation-direction    动画运动方向

normal，默认值，从from到to运行，每次都是这样；
reverse，从to到from运行，每次都是这样，从结束到开始；
alternate，从from向to运行，重复执行动画时会反方向执行，即第一个是从from到to，第二次则是从to到from……；
alternate-reverse，与alternate的执行时是反向的；

animation-direction: normal | alternate | reverse

 七.动画的播放状态，默认 running

animation-play-state: running(开始)/paused(暂停)  

八、animation-fill-mode   动画填充模式

规定动画在播放之前或之后，其动画效果是否可见。
animation-fill-mode : none | forwards | backwards | both;
none    不改变默认行为，默认值，动画执行完毕后，元素回到原来的位置。    
both    向前和向后填充模式都被应用。
forwards    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。动画执行完毕后，元素会停止在动画执行结束的位置；
backwards    在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 （在第一个关键帧中定义）。动画延时等待时，元素就会处于开始的位置，即from或to所指定的位置；

animation里的forwards的作用：forwards是停在动画最后的的那个画面。
详细解释：
设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧。
其他相关定义：
animation-fill-mode
设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先 

简写属性

可以使用animation一个属性来实现上面所介绍的所有属性，在使用animation时，格式如下：

animation: name duration timing-function delay iteration-count direction fill-mode;

 需要注意的是，在写时间时，持续时间是在延迟时间的前面即可。

  1.  
    /*表示动画关键帧的名字为test，延迟一秒钟之后开始执行，持续时间两次，重复执行4次，时序函数为匀速运动，重复执行时方向为alternate。*/
  2.  
    animation: test 2s linear 1s 4 alternate;

定义一个小球的滚动

  1.  
    <style>
  2.  
    .box{
  3.  
    width: 100px;
  4.  
    height: 100px;
  5.  
    border-radius: 50%;
  6.  
    background-image: radial-gradient(#fff, #f01);
  7.  
    animation: myball; /*动画名称 */
  8.  
    animation-duration: 2s; /*动画的持续时间*/
  9.  
    animation-timing-function: linear; /*动画速度*/
  10.  
    /* animation-delay: 2s; 动画延迟时间 */
  11.  
    animation-iteration-count: infinite; /*播放次数*/
  12.  
    animation-direction: normal; /* 动画播放方向 默认从开始-->结束 */
  13.  
    /* animation-direction:reverse ; 从结束到开始 */
  14.  
    /* animation-direction: alternate; 从开始到结束再到开始 */
  15.  
    /* animation-direction: alternate-reverse; 从结束-->开始-->结束 */
  16.  
    }
  17.  
    /* 定义关键帧 */
  18.  
    @keyframes myball{ /*引用动画名称*/
  19.  
    form{
  20.  
    transform: translate(0);
  21.  
    }
  22.  
    to{
  23.  
    transform: translate(800px);
  24.  
    }
  25.  
    }
  26.  
    </style>
  27.  
    </head>
  28.  
    <body>
  29.  
    <div class="box"></div>
  30.  
    </body>
学新通

         小球沿四周滚动

  1.  
    <style>
  2.  
    .box{
  3.  
    width: 100px;
  4.  
    height: 100px;
  5.  
    border-radius: 50%;
  6.  
    background-image: radial-gradient(#fff, #f01);
  7.  
    animation: myball; /*动画名称 */
  8.  
    animation-duration: 4s; /*动画的持续时间*/
  9.  
    animation-timing-function: linear; /*动画速度*/
  10.  
    animation-iteration-count: infinite; /*播放次数*/
  11.  
    animation-direction: normal; /* 动画播放方向 默认从开始-->结束 */
  12.  
    position: absolute;
  13.  
    }
  14.  
    /* 定义关键帧 */
  15.  
    @keyframes myball{ /*引用动画名称*/
  16.  
    0%{ /*初始位置*/
  17.  
    top: 0%;
  18.  
    left: 0%;
  19.  
    }
  20.  
    25%{
  21.  
    top: 0%;
  22.  
    left: 25%;
  23.  
    }
  24.  
    50%{
  25.  
    left: 25%;
  26.  
    top: 30%;
  27.  
    }
  28.  
    75%{
  29.  
    top: 30%;
  30.  
    left: 0%;
  31.  
    }
  32.  
    100%{
  33.  
    top: 0%;
  34.  
    left: 0%;
  35.  
    }
  36.  
    }
  37.  
    </style>
  38.  
    </head>
  39.  
    <body>
  40.  
    <div class="box"></div>
  41.  
    </body>
学新通

css实现动画轮播图

（第一张照片和最后一张照片相同，障眼法）

  1.  
    <style>
  2.  
    .banner{
  3.  
    width: 1200px;
  4.  
    height: 800px;
  5.  
    margin: 0 auto;
  6.  
    overflow: hidden;
  7.  
    }
  8.  
    .banner .pics{
  9.  
    white-space: nowrap;
  10.  
    animation-name: myball;
  11.  
    animation-duration: 4s;
  12.  
    animation-delay: 3s;
  13.  
    animation-iteration-count: infinite;
  14.  
    }
  15.  
    @keyframes myball{
  16.  
    0%{
  17.  
    transform: translateX(0);
  18.  
    }
  19.  
    33.3%{
  20.  
    transform: translateX(-100%);
  21.  
    }
  22.  
    66.6%{
  23.  
    transform: translateX(-200%);
  24.  
    }
  25.  
    100%{
  26.  
    transform: translateX(-300%);
  27.  
    }
  28.  
    }
  29.  
    </style>
  30.  
    </head>
  31.  
    <body>
  32.  
    <div class="banner">
  33.  
    <div class="pics">
  34.  
    <img src="../img/u=118559538,3056625584&fm=193&f=GIF.jpg" alt="">
  35.  
    <img src="../img/u=2304223962,4258741916&fm=193&f=GIF.jpg" alt="">
  36.  
    <img src="../img/u=4020132867,3167167932&fm=193&f=GIF.jpg" alt="">
  37.  
    <img src="../img/u=118559538,3056625584&fm=193&f=GIF.jpg" alt="">
  38.  
    </div>
  39.  
    </div>
  40.  
    </body>
学新通

走动的僵尸案例

学新通

  1.  
    <style>
  2.  
    .box{
  3.  
    position: relative;
  4.  
    overflow: hidden;
  5.  
    background-image: url(../img/walkingdead.png);
  6.  
    background-repeat: no-repeat;
  7.  
    width: 200px;
  8.  
    height: 305px;
  9.  
    margin: 0 auto;
  10.  
    animation-name: my;
  11.  
    animation-duration: 1s;
  12.  
    animation-timing-function: linear;
  13.  
    animation-iteration-count: infinite;
  14.  
    animation-direction: alternate; /*倒着走 可不要*/
  15.  
    animation-timing-function: steps(10);
  16.  
    }
  17.  
    @keyframes my{
  18.  
    0%{
  19.  
    background-position: 0 0;
  20.  
    }
  21.  
    100%{
  22.  
    background-position: -2000px 0;
  23.  
    }
  24.  
    }
  25.  
    </style>
  26.  
    </head>
  27.  
    <body>
  28.  
    <div class="box"> </div>
学新通

学新通

 走动的川普

  1.  
    <style>
  2.  
    .box{
  3.  
    position: relative;
  4.  
    overflow: hidden;
  5.  
    background-image: url(../img/20200723191016712.png);
  6.  
    background-repeat: no-repeat;
  7.  
    width: 161px;
  8.  
    height: 105.5px;
  9.  
    margin: 0 auto;
  10.  
    animation-name: my;
  11.  
    animation-duration: 1s;
  12.  
    animation-timing-function: linear; /*匀速*/
  13.  
    animation-iteration-count: infinite; /*播放次数 infinite表示无限次*/
  14.  
    animation-timing-function: steps(4);
  15.  
     
  16.  
    }
  17.  
    @keyframes my{
  18.  
    0%{
  19.  
    background-position: 0 0;
  20.  
     
  21.  
    }
  22.  
    100%{
  23.  
    background-position: 0 -422px;
  24.  
    }
  25.  
    }
  26.  
    </style>
  27.  
    </head>
  28.  
    <body>
  29.  
    <div class="box">
  30.  
     
  31.  
    </div>
学新通

学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgbcjea
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群