前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >加些CSS,让网站变得面目全非,你会怎么做?

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

作者头像
前端GoGoGo
发布2018-08-24 15:17:16
3290
发布2018-08-24 15:17:16
举报

我想到的一些玩法如下。

玩法1: 让页面一片空白

可以这么写

代码语言:javascript
复制
html {
  display: none !important;
}

或这么写

代码语言:javascript
复制
html {
  visibility: hidden !important;
  background: #fff !important;
}

或这么写

代码语言:javascript
复制
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;
  */
}

或这么写

代码语言:javascript
复制
html{
  transform: rotate(180deg) !important;
  transform-origin: 0 0 !important;
  background: #fff !important;
}

玩法2: 恶俗的配色

代码语言:javascript
复制
*: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: 搞乱布局

代码语言:javascript
复制
*:nth-child(odd) {
  position: absolute;
}

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

玩法4: 让字变的不能看

代码语言:javascript
复制
*:nth-child(odd) {
  font-size: 100px;
  letter-spacing: 2em;
  transform: skew(30deg);
}

玩法5: 变形

让页面倒过来

代码语言:javascript
复制
html{
  transform: rotate(180deg) !important;
}

玩法6: 闪瞎眼的动画

代码语言:javascript
复制
html{
  animation: 1s flash infinite !important;
}
@keyframes flash {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.03.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 玩法1: 让页面一片空白
  • 玩法2: 恶俗的配色
  • 玩法3: 搞乱布局
  • 玩法4: 让字变的不能看
  • 玩法5: 变形
  • 玩法6: 闪瞎眼的动画
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档