加些CSS,让网站变得面目全非,你会怎么做?

我想到的一些玩法如下。

玩法1: 让页面一片空白

可以这么写

html {
  display: none !important;
}

或这么写

html {
  visibility: hidden !important;
  background: #fff !important;
}

或这么写

html:before {
  content: '' !important;
  position: fixed !important;
  z-index: 99999 !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  background: #fff !important;
  /*
  这么玩也很有意思
  background-image: url(随心所欲的图片);
  background-size: cover;
  */
}

或这么写

html{
  transform: rotate(180deg) !important;
  transform-origin: 0 0 !important;
  background: #fff !important;
}

玩法2: 恶俗的配色

*:nth-child(3n) {
  color: yellow;
  background-color: red !important;
}
*:nth-child(3n+1) {
  color: blue;
  background-color: green !important;
}
*:nth-child(3n+2) {
  color: red;
  background-color: blue !important;
}

玩法3: 搞乱布局

*:nth-child(odd) {
  position: absolute;
}

搞乱布局有太多的写法了,就不一一举例了。

玩法4: 让字变的不能看

*:nth-child(odd) {
  font-size: 100px;
  letter-spacing: 2em;
  transform: skew(30deg);
}

玩法5: 变形

让页面倒过来

html{
  transform: rotate(180deg) !important;
}

玩法6: 闪瞎眼的动画

html{
  animation: 1s flash infinite !important;
}
@keyframes flash {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏较真的前端

为什么 CSS 这么难学?

25340
来自专栏理论坞

干货 | 字体组合十法则

设计或者艺术的世界,是没有什么一成不变的法则的。了解了基本的规则之后,我们就可以加入自己的想法,自由的去打破规则。今天就来看看现任设计师正在实践的10个字体组合...

10440
来自专栏镁客网

文艺青年居家旅行必备,Spector让你捕捉生活中的美

13220
来自专栏前端知识分享

第72天:jQuery实现下拉菜单

1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度

11920

四个最好的SaaS财务软件

现在我们来谈谈一些最好的SaaS财务软件。是的,我知道我已经多次发布过这样的名单。但事实就是这样,新软件在不断出现或者原有软件通过改进,超越之前最好的软件,我会...

2.1K100
来自专栏企鹅号快讯

前端开发者:最喜欢 React,Vue.js比Angular 更值得尝试

State Of JavaScript 2017 调查结果已经出炉。作者对众多 JavaScript 开发者进行了调查,以了解现在前端开发者对前端各种技术栈、框...

529170
来自专栏java一日一条

未来 Web 设计的 7 大趋势

关于Web设计的未来趋势,我相信很多文章都有涉及。下面就让我带你总结一下哪些才是真正的预言。

10010
来自专栏Android群英传

自定义动画怎么学

13340
来自专栏我分享我快乐

学生问:如何绘制这种圆润图标底色

前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

394140
来自专栏理论坞

电商设计中的极简设计

电子商务经过了几年的发展已经逐渐成熟,并且已经发展出了自己的模式和风格。但是对于电商的设计风格大多数人还停留在最初的用商品堆砌+文字信息+各种乱七八糟的效果。而...

12920

扫码关注云+社区

领取腾讯云代金券