当前位置:   article > 正文

html高级篇

html高级篇

1.2D转换

  转换(transform)你可以简单理解为变形

移动:translate

旋转:rotate

缩放:sCale

  1. 移动:translate
1.移动具体值
  1. /* 移动盒子的位置: 定位 盒子的外边距 2d转换移动 */
  2. div {
  3. width: 200px;
  4. height: 200px;
  5. background-color: pink;
  6. /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
  7. /* transform: translate(x, y); */
  8. /* transform: translate(100px, 100px); */
  9. /* 1. 我们如果只移动x坐标 */
  10. /* transform: translate(100px, 0); */
  11. /* transform: translateX(100px); */
  12. /* 2. 我们如果只移动y坐标 */
  13. /* transform: translate(0, 100px); */
  14. /* transform: translateY(100px); */
  15. }
  16. div:first-child {
  17. transform: translate(30px, 30px);
  18. }
  19. div:last-child {
  20. background-color: purple;
  21. }
2.移动百分比
  1. div {
  2. position: relative;
  3. width: 500px;
  4. height: 500px;
  5. background-color: pink;
  6. /* 1. 我们tranlate里面的参数是可以用 % */
  7. /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
  8. /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
  9. /* transform: translateX(50%); */
  10. }
  11. p {
  12. position: absolute;
  13. top: 50%;
  14. left: 50%;
  15. width: 200px;
  16. height: 200px;
  17. background-color: purple;
  18. /* margin-top: -100px;
  19. margin-left: -100px; */;
  20. /* 盒子往上走自己高度的一半 */
  21. transform: translate(-50%, -50%);
  22. }

2. 旋转:rotate

1.图片旋转
  1. img {
  2. width: 150px;
  3. /* 顺时针旋转45度 */
  4. /* transform: rotate(45deg); */
  5. border-radius: 50%;
  6. border: 5px solid pink;
  7. /* 过渡写到本身上,谁做动画给谁加 */
  8. transition: all 0.3s;
  9. }
  10. img:hover {
  11. transform: rotate(90deg);
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <img src="media/pic.jpg" alt="">
  17. </body>
2.小三角
  1. div {
  2. position: relative;
  3. width: 249px;
  4. height: 35px;
  5. border: 1px solid #000;
  6. }
  7. div::after {
  8. content: "";
  9. position: absolute;
  10. top: 8px;
  11. right: 15px;
  12. width: 10px;
  13. height: 10px;
  14. border-right: 1px solid #000;
  15. border-bottom: 1px solid #000;
  16. transform: rotate(45deg);
  17. transition: all 0.2s;
  18. }
  19. /* 鼠标经过div 里面的三角旋转 */
  20. div:hover::after {
  21. transform: rotate(225deg);
  22. }
  1. 设置旋转中心点

1.语法

transform-origin:xy;

2.重点

·注意后面的参数x和y用空格隔开

·xy默认转换的中心点是元素的中心点(50%50%)

·还可以给xy设置像素或者方位名词(top bottom left right center)

  1. div {
  2. width: 200px;
  3. height: 200px;
  4. background-color: pink;
  5. margin: 100px auto;
  6. transition: all 1s;
  7. /* 1.可以跟方位名词 */
  8. /* transform-origin: left bottom; */
  9. /* 2. 默认的是 50% 50% 等价于 center center */
  10. /* 3. 可以是px 像素 */
  11. /* transform-origin: 80px 80px; */
  12. /* transform-origin: top left; */
  13. transform-origin: bottom right ;
  14. }
  15. div:hover {
  16. transform: rotate(360deg);
  17. }
  1. 案例
  1. div {
  2. overflow: hidden;
  3. width: 200px;
  4. height: 200px;
  5. border: 1px solid pink;
  6. margin: 10px;
  7. float: left;
  8. }
  9. div::before {
  10. content: "小猪佩奇";
  11. display: block;
  12. width: 100%;
  13. height: 100%;
  14. background-image: url("./media/pig.jpg");
  15. transform: rotate(180deg);
  16. transform-origin: left bottom;
  17. transition: all 0.4s;
  18. }
  19. /* 鼠标经过div 里面的before 复原 */
  20. div:hover::before {
  21. transform: rotate(0deg);
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div></div>
  27. <div></div>
  28. <div></div>
  1. 缩放:sCale
1.用法
  1. div {
  2. width: 200px;
  3. height: 200px;
  4. background-color: pink;
  5. margin: 100px auto;
  6. /* transform-origin: left bottom; */
  7. }
  8. div:hover {
  9. /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍 */
  10. /* transform: scale(x, y); */
  11. /* transform: scale(2, 2); */
  12. /* 2. 修改了宽度为原来的2倍 高度 不变 */
  13. /* transform: scale(2, 1); */
  14. /* 3. 等比例缩放 同时修改宽度和高度,我们有简单的写法 以下是 宽度修改了2倍,高度默认和第一个参数一样*/
  15. /* transform: scale(2); */
  16. /* 4. 我们可以进行缩小 小于1 就是缩放 */
  17. /* transform: scale(0.5, 0.5); */
  18. /* transform: scale(0.5); */
  19. /* 5. scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点*/
  20. /* width: 300px;
  21. height: 300px; */
  22. transform: scale(2);
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div></div>
  28. 123123
2.按钮案例
  1. li {
  2. float: left;
  3. width: 30px;
  4. height: 30px;
  5. border: 1px solid pink;
  6. margin: 10px;
  7. text-align: center;
  8. line-height: 30px;
  9. list-style: none;
  10. border-radius: 50%;
  11. /* 小手 */
  12. cursor: pointer;
  13. transition: all .4s;
  14. }
  15. li:hover {
  16. transform: scale(1.2);
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <ul>
  22. <li>1</li>
  23. <li>2</li>
  24. <li>3</li>
  25. <li>4</li>
  26. <li>5</li>
  27. <li>6</li>
  28. <li>7</li>
  29. </ul>
3.综合案例
  1. div {
  2. width: 200px;
  3. height: 200px;
  4. background-color: pink;
  5. transition: all .5s;
  6. }
  7. div:hover {
  8. /* transform: rotate(180deg) translate(150px, 50px); */
  9. /* 我们同时有位移和其他属性,我们需要把位移放到最前面 */
  10. transform: translate(150px, 50px) rotate(180deg) scale(1.2);
  11. }

二.动画

 制作动画分为两步:

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称{

0%{

width:100px;

}

100%{

width:200px;

}

}

2.元素使用动画

div{

width:200px;height:200px;background-color:aqua;margin:100px auto;

/*调用动画*/

animation-name:动画名称;

/*持续时间*/

animation-duration:持续时间;}

1.简单的动画

  1. /* 我们想页面一打开,一个盒子就从左边走到右边 */
  2. /* 1. 定义动画 */
  3. @keyframes move {
  4. /* 开始状态 */
  5. 0% {transform: translateX(0px);}
  6. /* 结束状态 */
  7. 100% {transform: translateX(1000px);}
  8. }
  9. div {
  10. width: 200px;
  11. height: 200px;
  12. background-color: pink;
  13. /* 2. 调用动画 */
  14. /* 动画名称 */
  15. animation-name: move;
  16. /* 持续时间 */
  17. animation-duration: 2s;
  18. }

2.动画序列

  1. /* from to 等价于 0% 和 100% */
  2. /* @keyframes move {
  3. from {
  4. transform: translate(0, 0);
  5. }
  6. to {
  7. transform: translate(1000px, 0);
  8. }
  9. } */
  10. /* 动画序列 */
  11. /* 1. 可以做多个状态的变化 keyframe 关键帧 */
  12. /* 2. 里面的百分比要是整数 */
  13. /* 3. 里面的百分比就是 总的时间(我们这个案例10s)的划分 25% * 10 = 2.5s */
  14. @keyframes move {
  15. 0% {
  16. transform: translate(0, 0);
  17. }
  18. 25% {
  19. transform: translate(1000px, 0)
  20. }
  21. 50% {
  22. transform: translate(1000px, 500px);
  23. }
  24. 75% {
  25. transform: translate(0, 500px);
  26. }
  27. 100% {
  28. transform: translate(0, 0);
  29. }
  30. }
  31. div {
  32. width: 100px;
  33. height: 100px;
  34. background-color: pink;
  35. animation-name: move;
  36. animation-duration: 10s;
  37. }

3.动画属性

属性

         描述

@keyframes

规定动画

animation

所有动画属性的简写属性

animation-name

规定@keyframes动画的名称(必须的)

animation-duration

规定动画完成一个周期花费的秒或毫秒,默认是0。(必须的)

aniamtion-timing-function

规定动画的速度曲线,默认是‘ease’

animation-delay

规定动画何时开始,默认是0

animation-iteration-count

规定动画被播放的次数,默认是1,还有infinite

animation-direction

规定动画是否在下一周期逆向播放,默认是‘normal’,alternate逆向播放

animation-play-state

规定动画是否正在运行或暂停,默认是’running’,还有‘pause’

animation-fill-mode

规定动画结束后状态,保持forwards,回到起始backwards

 1.基本使用
  1. @keyframes move {
  2. 0% {
  3. transform: translate(0, 0);
  4. }
  5. 100% {
  6. transform: translate(1000px, 0);
  7. }
  8. }
  9. div {
  10. width: 100px;
  11. height: 100px;
  12. background-color: pink;
  13. /* 动画名称 */
  14. animation-name: move;
  15. /* 持续时间 */
  16. animation-duration: 2s;
  17. /* 运动曲线 */
  18. /* animation-timing-function: ease; */
  19. /* 何时开始 */
  20. animation-delay: 2s;
  21. /* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
  22. /* animation-iteration-count: infinite; */
  23. /* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
  24. /* animation-direction: alternate; */
  25. /* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
  26. /* animation-fill-mode: forwards; */
  27. /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  28. /* animation: move 2s linear 0s 1 alternate forwards; */
  29. /* 前面2个属性 name duration 一定要写 */
  30. /* animation: move 2s linear alternate forwards; */
  31. }
  32. div:hover {
  33. /* 鼠标经过div 让这个div 停止动画,鼠标离开就继续动画 */
  34. animation-play-state: paused;
  35. }
2.大数据热图
  1. body {
  2. background-color: #333;
  3. }
  4. .map {
  5. position: relative;
  6. width: 747px;
  7. height: 616px;
  8. background: url(media/map.png) no-repeat;
  9. margin: 0 auto;
  10. }
  11. .city {
  12. position: absolute;
  13. top: 227px;
  14. right: 193px;
  15. color: #fff;
  16. }
  17. .tb {
  18. top: 500px;
  19. right: 80px;
  20. }
  21. .dotted {
  22. width: 8px;
  23. height: 8px;
  24. background-color: #09f;
  25. border-radius: 50%;
  26. }
  27. .city div[class^="pulse"] {
  28. /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
  29. position: absolute;
  30. top: 50%;
  31. left: 50%;
  32. transform: translate(-50%, -50%);
  33. width: 8px;
  34. height: 8px;
  35. box-shadow: 0 0 12px #009dfd;
  36. border-radius: 50%;
  37. animation: pulse 1.2s linear infinite;
  38. }
  39. .city div.pulse2 {
  40. animation-delay: 0.4s;
  41. }
  42. .city div.pulse3 {
  43. animation-delay: 0.8s;
  44. }
  45. @keyframes pulse {
  46. 0% {}
  47. 70% {
  48. /* transform: scale(5); 我们不要用scale 因为他会让 阴影变大*/
  49. width: 40px;
  50. height: 40px;
  51. opacity: 1;
  52. }
  53. 100% {
  54. width: 70px;
  55. height: 70px;
  56. opacity: 0;
  57. }
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="map">
  63. <div class="city">
  64. <div class="dotted"></div>
  65. <div class="pulse1"></div>
  66. <div class="pulse2"></div>
  67. <div class="pulse3"></div>
  68. </div>
  69. <div class="city tb">
  70. <div class="dotted"></div>
  71. <div class="pulse1"></div>
  72. <div class="pulse2"></div>
  73. <div class="pulse3"></div>
  74. </div>
  75. </div>

1.文字打印效果
  1. div {
  2. overflow: hidden;
  3. font-size: 20px;
  4. width: 0;
  5. height: 30px;
  6. background-color: pink;
  7. /* 让我们的文字强制一行内显示 */
  8. white-space: nowrap;
  9. /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
  10. animation: w 4s steps(10) forwards;
  11. }
  12. @keyframes w {
  13. 0% {
  14. width: 0;
  15. }
  16. 100% {
  17. width: 200px;
  18. }
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div>世纪佳缘我在这里等你</div>
2.奔跑的熊大
  1. body {
  2. background-color: #ccc;
  3. }
  4. div {
  5. position: absolute;
  6. width: 200px;
  7. height: 100px;
  8. background: url(media/bear.png) no-repeat;
  9. /* 我们元素可以添加多个动画, 用逗号分隔 */
  10. animation: bear .6s steps(8) infinite, move 4s forwards;
  11. }
  12. @keyframes bear {
  13. 0% {
  14. background-position: 0 0;
  15. }
  16. 100% {
  17. background-position: -1600px 0;
  18. }
  19. }
  20. @keyframes move {
  21. 0% {
  22. left: 0;
  23. }
  24. 100% {
  25. left: 50%;
  26. /* margin-left: -100px; */
  27. transform: translateX(-50%);
  28. }
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div></div>

三、3D转换

 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

·x轴:水平向右注意:X右边是正值,左边是负值

·y轴:垂直向下注意:y下面是正值,上面是负值

·z轴:垂直屏幕注意:往外面是正值,往里面是负值

1.3D位移translate3d(x,y,z)

translform:translateX(100px):仅仅是在x轴上移动

translform:translateY(100px):仅仅是在Y轴上移动

translform:translateZ(100px):仅仅是在z轴上移动(注意:translateZ一般用px单位)transform:translate3d(x,y,):其中x、y、z分别指要移动的轴的方向的距离

  1. body {
  2. /* 透视写到被观察元素的父盒子上面 */
  3. perspective: 200px;
  4. }
  5. div {
  6. width: 200px;
  7. height: 200px;
  8. background-color: pink;
  9. /* transform: translateX(100px);
  10. transform: translateY(100px); */
  11. /* transform: translateX(100px) translateY(100px) translateZ(100px); */
  12. /* 1. translateZ 沿着Z轴移动 */
  13. /* 2. translateZ 后面的单位我们一般跟px */
  14. /* 3. translateZ(100px) 向外移动100px (向我们的眼睛来移动的) */
  15. /* 4. 3D移动有简写的方法 */
  16. /* transform: translate3d(x,y,z); */
  17. /* transform: translate3d(100px, 100px, 100px); */
  18. /* 5. xyz是不能省略的,如果没有就写0 */
  19. transform: translate3d(200px, 100px, 100px);
  20. }
  1. 透视perspective
  1. body {
  2. perspective: 600px;
  3. /* 透视写到被观擦元素的父盒子上面 */
  4. }
  5. div {
  6. width: 200px;
  7. height: 200px;
  8. background-color: pink;
  9. margin: 100px auto;
  10. transform: translateZ(0);
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div></div>
  16. <div></div>
  17. <div></div>
  18. </body>

3.3Drotate3d

  1. body {
  2. perspective: 300px;
  3. }
  4. img {
  5. display: block;
  6. margin: 100px auto;
  7. transition: all 1s;
  8. }
  9. img:hover {
  10. transform: rotateX(45deg);
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <img src="media/pig.jpg" alt="">
  16. body {
  17. perspective: 500px;
  18. }
  19. img {
  20. display: block;
  21. margin: 100px auto;
  22. transition: all 1s;
  23. }
  24. img:hover {
  25. /* transform: rotateZ(180deg); */
  26. /* transform: rotate3d(x,y,z,deg); */
  27. /* transform: rotate3d(1, 0, 0, 45deg); */
  28. /* transform: rotate3d(0, 1, 0, 45deg); */
  29. transform: rotate3d(1, 1, 0, 45deg);
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <img src="media/pig.jpg" alt="">

4.3D呈现transform-style

·控制子元素是否开启三维立体环境。。

·transform-style:flat子元素不开启3d立体空间默认的

·transform-style:preserve-3d;子元素开启立体空间

·代码写给父级,但是影响的是子盒子

  1. body {
  2. perspective: 500px;
  3. }
  4. .box {
  5. position: relative;
  6. width: 200px;
  7. height: 200px;
  8. margin: 100px auto;
  9. transition: all 2s;
  10. /* 让子元素保持3d立体空间环境 */
  11. transform-style: preserve-3d;
  12. }
  13. .box:hover {
  14. transform: rotateY(60deg);
  15. }
  16. .box div {
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. width: 100%;
  21. height: 100%;
  22. background-color: pink;
  23. }
  24. .box div:last-child {
  25. background-color: purple;
  26. transform: rotateX(60deg);
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="box">
  32. <div></div>
  33. <div></div>
  34. </div>
  1. 双面反转

 1.搭建HTML结构

<div class="box">

<div class="front">黑马程序员</div>

<div class="back">pink老师等你</div>

</div>

·box父盒子里面包含前后两个子盒子

·box是翻转的盒子front是前面盒子back是后面盒子

  1. body {
  2. perspective: 400px;
  3. }
  4. .box {
  5. position: relative;
  6. width: 300px;
  7. height: 300px;
  8. margin: 100px auto;
  9. transition: all .4s;
  10. /* 让背面的紫色盒子保留立体空间 给父级添加的 */
  11. transform-style: preserve-3d;
  12. }
  13. .box:hover {
  14. transform: rotateY(180deg);
  15. }
  16. .front,
  17. .back {
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. border-radius: 50%;
  24. font-size: 30px;
  25. color: #fff;
  26. text-align: center;
  27. line-height: 300px;
  28. }
  29. .front {
  30. background-color: pink;
  31. z-index: 1;
  32. }
  33. .back {
  34. background-color: purple;
  35. /* 像手机一样 背靠背 旋转 */
  36. transform: rotateY(180deg);
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div class="box">
  42. <div class="front">黑马程序员</div>
  43. <div class="back">pink老师这里等你</div>
  44. </div>
  1. 旋转导航案例
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. ul {
  6. margin: 100px;
  7. }
  8. ul li {
  9. float: left;
  10. margin: 0 5px;
  11. width: 120px;
  12. height: 35px;
  13. list-style: none;
  14. /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
  15. perspective: 500px;
  16. }
  17. .box {
  18. position: relative;
  19. width: 100%;
  20. height: 100%;
  21. transform-style: preserve-3d;
  22. transition: all .4s;
  23. }
  24. .box:hover {
  25. transform: rotateX(90deg);
  26. }
  27. .front,
  28. .bottom {
  29. position: absolute;
  30. left: 0;
  31. top: 0;
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .front {
  36. background-color: pink;
  37. z-index: 1;
  38. transform: translateZ(17.5px);
  39. }
  40. .bottom {
  41. background-color: purple;
  42. /* 这个x轴一定是负值 */
  43. /* 我们如果有移动 或者其他样式,必须先写我们的移动 */
  44. transform: translateY(17.5px) rotateX(-90deg);
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <ul>
  50. <li>
  51. <div class="box">
  52. <div class="front">黑马程序员</div>
  53. <div class="bottom">pink老师等你</div>
  54. </div>
  55. </li>
  56. <li>
  57. <div class="box">
  58. <div class="front">黑马程序员</div>
  59. <div class="bottom">pink老师等你</div>
  60. </div>
  61. </li>
  62. <li>
  63. <div class="box">
  64. <div class="front">黑马程序员</div>
  65. <div class="bottom">pink老师等你</div>
  66. </div>
  67. </li>
  68. <li>
  69. <div class="box">
  70. <div class="front">黑马程序员</div>
  71. <div class="bottom">pink老师等你</div>
  72. </div>
  73. </li>
  74. <li>
  75. <div class="box">
  76. <div class="front">黑马程序员</div>
  77. <div class="bottom">pink老师等你</div>
  78. </div>
  79. </li>
  80. <li>
  81. <div class="box">
  82. <div class="front">黑马程序员</div>
  83. <div class="bottom">pink老师等你</div>
  84. </div>
  85. </li>
  86. </ul>
  1. 旋转木马
  1. body {
  2. perspective: 1000px;
  3. }
  4. section {
  5. position: relative;
  6. width: 300px;
  7. height: 200px;
  8. margin: 150px auto;
  9. transform-style: preserve-3d;
  10. /* 添加动画效果 */
  11. animation: rotate 10s linear infinite;
  12. background: url(media/pig.jpg) no-repeat;
  13. }
  14. section:hover {
  15. /* 鼠标放入section 停止动画 */
  16. animation-play-state: paused;
  17. }
  18. @keyframes rotate {
  19. 0% {
  20. transform: rotateY(0);
  21. }
  22. 100% {
  23. transform: rotateY(360deg);
  24. }
  25. }
  26. section div {
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. width: 100%;
  31. height: 100%;
  32. background: url(media/dog.jpg) no-repeat;
  33. }
  34. /* 正对着的图片 z轴*/
  35. section div:nth-child(1) {
  36. transform: rotateY(0) translateZ(300px);
  37. }
  38. /* 右边的图片 */
  39. section div:nth-child(2) {
  40. /* 先旋转好了再 移动距离 */
  41. transform: rotateY(60deg) translateZ(300px);
  42. }
  43. section div:nth-child(3) {
  44. /* 先旋转好了再 移动距离 */
  45. transform: rotateY(120deg) translateZ(300px);
  46. }
  47. section div:nth-child(4) {
  48. /* 先旋转好了再 移动距离 */
  49. transform: rotateY(180deg) translateZ(300px);
  50. }
  51. section div:nth-child(5) {
  52. /* 先旋转好了再 移动距离 */
  53. transform: rotateY(240deg) translateZ(300px);
  54. }
  55. section div:nth-child(6) {
  56. /* 先旋转好了再 移动距离 */
  57. transform: rotateY(300deg) translateZ(300px);
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <section>
  63. <div></div>
  64. <div></div>
  65. <div></div>
  66. <div></div>
  67. <div></div>
  68. <div></div>
  69. </section>

四、浏览器私有前缀

-moz-:代表firefox 浏览器私有属性

-ms-:代表ie浏览器私有属性

-webkit-:代表safari、chrome私有属性

-o-:代表Opera私有属性

2.提倡的写法

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;border-radius:10px;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/811294?site
推荐阅读
相关标签
  

闽ICP备14008679号