11-16 - 前端笔记 JSRUN

CSS 边框属性属性描述 border 简写属性，用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。 border-bottom-color 设置元素的下边框的颜色。 border-bottom-style 设置元素的下边框的样式。 border-bottom-width 设置元素的下边框的宽度。 border-left 简写属性，用于把左边框的所有属性设置到一个声明中。 border-left-color 设置元素的左边框的颜色。 border-left-style 设置元素的左边框的样式。 border-left-width 设置元素的左边框的宽度。 border-right 简写属性，用于把右边框的所有属性设置到一个声明中。 border-right-color 设置元素的右边框的颜色。 border-right-style 设置元素的右边框的样式。 border-right-width 设置元素的右边框的宽度。 border-top 简写属性，用于把上边框的所有属性设置到一个声明中。 border-top-color 设置元素的上边框的颜色。 border-top-style 设置元素的上边框的样式。 border-top-width 设置元素的上边框的宽度。

所有CSS 轮廓（outline）属性 "CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

属性说明值 CSS outline 在一个声明中设置所有的轮廓属性 outline-color outline-style outline-width inherit
outline-color 设置轮廓的颜色 color-name hex-number rgb-number invert inherit
outline-style 设置轮廓的样式 none dotted dashed solid double groove ridge inset outset inherit
outline-width 设置轮廓的宽度 thin medium thick length inherit

所有的CSS边距属性属性描述 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。

1.CodePen：http://codepen.io/

网站里有很多很酷的特效，而且可以看到效果的源代码，也可以看到实现效果，是一个非常不错的前端开发学习资源网站。

2.RunJS：http://runjs.cn/

点击广场，则可以看到很多开发者分享的一些效果源码，如果你想找资源，做项目，这个网站绝对是一个不错的选择。

3.BestCSSButtonGenerat：

http://www.bestcssbuttongenerator.com/

这个网站主要提供各种按钮的CSS代码，你可以从预设的按钮中选择并使用模板用于自己的设计，还可以查看源代码，非常适合学习

。

4.jsrun： http://jsrun.net

这里可以查看项目的源码，里面有很多人分享的一些特效，绝对是一个不错的学习资源网站。

5.CodePlayerh：

ttp://thecodeplayer.com/

这个网站里的项目资源，不仅可以看源码与项目效果，同时你还能看到开发者是如果将效果通过一行一行的代码敲定出来，个人觉

得非常酷，不行，你可以去看看哦！web小二说话，从来不骗人。

6、实验楼-web：

https://www.shiyanlou.com/courses/

这里也有很多前端的项目，里面有详细的实现步骤，你可以跟着项目一步一步的做，同时还可以将源码下载下来学习，也是一个不

错的前端项目学习网站。

7、html5tricks：

http://www.html5tricks.com/

网站里有很多前端实现的功能，可以在线查看效果，也可以下载源码的，是一个不错的学习资源网站。

Enjoy CSS：http://enjoycss.com/

此网站是一个完整的代码生成器，可以自定义输入域或CSS3按钮，同样可以查看源代码，适合学习。

10、Coursera：

https://www.coursera.org/

Coursera 是一个教育平台，它与全世界最顶尖的大学和机构合作，提供任何人可学习的免费在线课程。

Dribbble：https://dribbble.com/

这是一个质量不错的设计网站，也可以常去逛逛，对提高审美也有帮助，即使不学设计的，多看看自然会有帮助。

12、TutsPlus：https://tutsplus.com/

TutsPlus是一个为Web开发人员与设计人员提供教程与技术文章为目的网站，技能和技巧，提高用户设计和建立网站的能力。

13、CAN I USE：http://caniuse.com/

CAN I USE，一个查询浏览器兼容性的网站。

14、JSHint：http://jshint.com/

此站点是一个在线JS检测工具，可以检测JavaScript代码中的错误和潜在问题。

15、CSS-tricks：https://css-tricks.com/

CSS-tricks是一个关于运用CSS技术进行网络开发和设计的小技巧的交流网站，里面有各类样式问题的解决方案以及深度思考。

18212566162

16、TechCrunch：

https://techcrunch.com/

TechCrunch 是一个科技类博客网站，主要以报道新兴互联网公司、评论互联网新产品、发布重大突发新闻为主要内容。

17、Webdesigner Depot：

http://www.webdesignerdepot.com/

这是一个网页设计资源网站，网页设计师必备站点，涵盖大量教程、工具、素材等资源，是一个必去的网站。

<!DOCTYPE html>

#login-box{ width: 30%; height: auto; margin: 0 auto; margin-top: 10%; text-align: center; background: #00000080; padding: 20px 50px; }

#login-box h1{ color: #ffffff; }

#login-box .form{ margin-top: 50px; }

#login-box .form i{ font-size: 18px; color: #ffffff; }

#login-box .form .item{ margin-top: 15px; }

#login-box .form .item input{ width: 180px; font-size: 18px; border: 0; border-bottom: 2px solid #ffffff; padding: 5px 10px; background: #ffffff00; color: #ffffff; }

#login-box button{ margin-top: 15px; width: 180px; height: 30px; font-size: 20px; font-weight: 700; border: 0; background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #ddbaee 0%, #e8a8ee 33%, #b8d9f8 66%,

#59bcf5 100%); border-radius: 15px; }

body { background: url(wallhaven-ne7lr8.jpg); background-repeat: no-repeat; background-size: 100% auto; }

.container

for (i = 0; i < 400; i++) .trigger .monitor .camera.-x .camera.-y

.camera.-z
  .world
    - for (i = 0; i < 10; i++)
      .set
        .hole
          .wall
          .wall
          .wall
          .wall
          .wall.-cover
        .plug
          .in
            .wall
            .wall
            .wall
            .wall
            .wall

$speed: 12000ms;

body { background: #fff; height: 100vh; overflow: hidden; display: flex; font-family: 'Anton', sans-serif; justify-content: center; align-items: center; // perspective: 1000px; }

.container { position: relative; display: grid; grid-template-rows: repeat(20, 5vh); grid-template-columns: repeat(20, 5vw); transform-style: preserve-3d; }

.monitor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transform-style: preserve-3d; }

.trigger { position: relative;

@for $i from 1 through 20 { @for $j from 1 through 20 { $key: ($i - 1) * 20 + $j;

  &:nth-child(#{$key}) {
    &:hover ~ .monitor {
      .camera {
        // &.-z {
        //   transform: rotateZ(($j - 10) * -14deg);
        // }

        &.-y {
          transform: rotateY(($j - 2) * -2deg - 16);
        }
      }
    }
  }
}

} }

.camera { position: absolute; width: 100%; height: 100%; transition: 500ms;

&.-x { transform: rotateX(-30deg); }

&.-y { transform: rotateY(-45deg); } }

.world { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translateY(200px); }

div { position: absolute; transform-style: preserve-3d; }

.hole { transform: translate(-50px, -50px);

.wall { width: 100px; height: 300px; background: #ccc;

&:nth-child(1) {
  transform: translateZ(50px) scaleX(1.5);
  background: #fff;
}

&:nth-child(2) {
  transform: rotateY(90deg) translateZ(50px) scaleX(1.5);
  background: #fff;
}

&:nth-child(3) {
  transform: rotateY(-90deg) translateZ(50px);
  background: linear-gradient(#eee, #000);
}

&:nth-child(4) {
  transform: rotateY(180deg) translateZ(50px);
  background: linear-gradient(#ccc, #000);
}

&:nth-child(5) {
  transform-origin: 0 100%;
  transform: translateY(-100px) translateZ(-50px) rotateX(20deg);
  background: #fff;
  height: 100px;
  animation: cover $speed ease-in-out infinite;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#eee, #ddd);
    transform: translateZ(1px);
  }
}

} }

.plug { transform: translate(-45px, -50px);

.wall { width: 90px; height: 90px; background: #ccc;

&:nth-child(1) {
  transform: translateZ(45px);
  background: #f00;
}

&:nth-child(2) {
  transform: rotateY(90deg) translateZ(45px);
  background: #ff0;
}

&:nth-child(3) {
  transform: rotateY(-90deg) translateZ(45px);
  background: #f0f;
}

&:nth-child(4) {
  transform: rotateY(180deg) translateZ(45px);
  background: #0ff;
}

&:nth-child(5) {
  transform: rotateX(90deg) translateZ(45px);
  background: #0ff;
}

}

.in { animation: plugIn $speed linear infinite; } }

.set { animation: belt $speed linear infinite;

@for $i from 1 through 30 { $r: random(200); $g: random(200); $b: random(200);

&:nth-child(#{$i}) {
  animation-delay: $i * $speed / -10;

  .in,
  .-cover {
    animation-delay: $i * $speed / -10;
  }

  .plug {
    .wall {
      &:nth-child(1) {
        background: linear-gradient(10deg, rgb($r, $g, $b), rgb($r + 30, $g + 30, $b + 30));
      }

      &:nth-child(2) {
        background: linear-gradient(-10deg, rgb($r, $g, $b), rgb($r + 30, $g + 30, $b + 30));
      }

      &:nth-child(3) {
        background: linear-gradient(-100deg, rgb($r, $g, $b), rgb($r + 30, $g + 30, $b + 30));
      }

      &:nth-child(4) {
        background: linear-gradient(-100deg, rgb($r, $g, $b), rgb($r + 30, $g + 30, $b + 30));
      }

      &:nth-child(5) {
        background: linear-gradient(100deg, rgb($r, $g, $b), rgb($r + 30, $g + 30, $b + 30));
      }
    }
  }
}

} }

@keyframes cover { 0% { transform: translateY(-100px) translateZ(-50px) rotateX(-90deg); }

10% { transform: translateY(-100px) translateZ(-50px) rotateX(-90deg); }

15% { transform: translateY(-100px) translateZ(-50px) rotateX(20deg); }

65% { transform: translateY(-100px) translateZ(-50px) rotateX(20deg); }

70% { transform: translateY(-100px) translateZ(-50px) rotateX(-90deg); }

100% { transform: translateY(-100px) translateZ(-50px) rotateX(-90deg); } }

@keyframes plugIn { 0% { transform: translateY(-1000px); }

54% { transform: translateY(15px); }

55% { transform: translateY(5px); }

100% { transform: translateY(5px); } }

@keyframes belt { 0% { transform: translateZ(-1000px); }

100% { transform: translateZ(1000px); } }

Login