`

趣文：巧用CSS文件，愚人节极客式恶搞

 
阅读更多

今天无意间在网上看到一篇很有意思的文章，可以用在愚人节那天恶搞一下！！粘贴过来跟大家分享：

 

一、打开浏览器的 Custom.css 文件

本文以 Chrome 为例（CSS 修改后立即生效），进入同事或朋友的电脑，按下面方式打开 Custom.css 文件

  • Mac：~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • Windows XP：系统盘:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css（其他 Windows 系统类似，在个人账号中的找“应用数据” AppData……）
  • Ubuntu (Chromium)：~/.config/chromium/Default/User StyleSheets/Custom.css

二、在 Custom.css 文件中添加相应CSS代码

1. 网页上下颠倒

1
2
3
4
5
6
/*
  Turn every website upside down
*/
body {
  -webkit-transform: rotate(180deg);
}

website upside down

点击查看原始尺寸图片

2. 网页旋转

1
2
3
4
5
6
/*
  Spin every Website
*/
body {
  /*-webkit-animation: spin 5s linear infinite;*/
}

website spin

点击查看原始尺寸图片

3. 网页中所有图片上下颠倒

1
2
3
4
5
6
/*
  Flip all images upside down
*/
img {
  /*-webkit-transform: rotate(180deg);*/
}

img upside down

点击查看原始尺寸图片

4. 网页中所有图片都自转

1
2
3
4
5
6
/*
Spin all images
*/
img {
  /*-webkit-animation: spin 1s linear infinite;*/
}

img spin

点击查看原始尺寸图片

5. 网页倒在地上了（请用内容超过多屏的网页测试）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
Make every website fall over!
*/
/*
html, body {
height: 100%;
}
 
html {
-webkit-perspective: 1000;
}
 
body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotateX(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
*/

website fall over 2

有些网站会不起作用，往下翻网页，有种自由下落的感觉

website fall over

点击查看原始尺寸图片

上面就列举这些了，其他恶搞内容，请参见下面这段 CSS 代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/*
aprilFools.css
Written by Wes Bos
I assume no responsibility for angry co-workers or lost productivity
 
Put these CSS definitons into your co-workers Custom.css file.
They will be applied to every website they visit as well as their developer tools.
 
Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
 
PC: C:/Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
 
Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css
*/
 
/*
Turn every website upside down
*/
body {
  /*-webkit-transform: rotate(180deg);*/
}
 
/*
blur every website for a split second every 30 seconds
*/
body {
  /*-webkit-animation: blur 30s infinite;*/
}
 
/*
Spin every Website
*/
body {
  /*-webkit-animation: spin 5s linear infinite;*/
}
 
/*
Flip all images upside down
*/
img {
  /*-webkit-transform: rotate(180deg);*/
}
 
/*
COMIC SANS EVERYTHING
*/
 
body, p, body p, body div p {
  /*font-family: 'Comic Sans MS', cursive !important;*/
}
 
/*
Spin all images
*/
img {
  /*-webkit-animation: spin 1s linear infinite;*/
}
 
/*
Hide every 2nd paragraph element on a page
*/
p:nth-child(2) {
  /*display:none !important;*/
}
 
/*
Spin dev tools round and round
*/
#-webkit-web-inspector {
 /*-webkit-animation: spin 1s linear infinite; */
}
 
/*
Flip dev tools upside down
*/
#-webkit-web-inspector {
 /*-webkit-transform:rotate(180deg);*/
}
 
/* Hide the close button */
#-webkit-web-inspector .toolbar-item.close-left {
  /*display:none !important;*/
}
 
/* Make console text all blurry */
#-webkit-web-inspector .console-group-messages {
  /*text-shadow: 0 0 3px rgba(0,0,0,.5) !important;*/
}
 
#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title {
  /*text-shadow: 0 0 3px rgba(255,0,0,.5) !important;*/
}
 
#-webkit-web-inspector .console-user-command > .console-message-text {
  /*text-shadow: 0 0 3px rgba(0,128,255,.5) !important;*/
}
 
#-webkit-web-inspector .console-group-messages,
#-webkit-web-inspector .console-user-command > .console-message-text,
#-webkit-web-inspector .console-formatted-null,
#-webkit-web-inspector .console-formatted-undefined,
#-webkit-web-inspector .console-debug-level .console-message-text,
#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title,
#-webkit-web-inspector .console-group-messages .section .header .title,
#-webkit-web-inspector .console-formatted-object,
#-webkit-web-inspector .console-formatted-node,
#-webkit-web-inspector .console-formatted-array,
#-webkit-web-inspector .section .properties .name,
#-webkit-web-inspector .event-properties .name,
#-webkit-web-inspector .console-formatted-object .name,
#-webkit-web-inspector .console-formatted-number,
#-webkit-web-inspector .console-formatted-string,
#-webkit-web-inspector #console-messages a {
  /*color: transparent !important;*/
}
 
/* HTML PRIDE! */
html {
  /*-webkit-animation: rainbow 8s infinite;*/
}
 
/*
Make every website fall over!
*/
/*
html, body {
height: 100%;
}
 
html {
-webkit-perspective: 1000;
}
 
body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotateX(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
*/
 
/*
Insert a phrase every paragraph
*/
/*
p:before {
content: "YOLO ";
}
*/
 
/* Animations */
 
@-webkit-keyframes blur {
  0% { -webkit-filter: blur(0px); }
  49% { -webkit-filter: blur(0px); }
  50% { -webkit-filter: blur(1px); }
  51% { -webkit-filter: blur(0px); }
  100% { -webkit-filter: blur(0px); }
}
 
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
 
@-webkit-keyframes rainbow {
  100% { -webkit-filter: hue-rotate(360deg); }
}
 
@-webkit-keyframes fall {
  0% { -webkit-transform: none; }
  100% { -webkit-transform: rotateX(-90deg); }
}

 

如果各位还有其他极客式恶搞方法，请在评论中留言吧~

分享到：
| 如何实现点击回车自动提交（当按钮为图片的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    扒网站界面神器(一键下载：html,css,js,img等文件)

    扒网站界面神器(一键下载：html,css,js,img等文件)扒网站界面神器(一键下载：html,css,js,img等文件)扒网站界面神器(一键下载：html,css,js,img等文件)扒网站界面神器(一键下载：html,css,js,img等文件)扒网站界面...

    CEMS：mainPage.css文件

    CEMS：mainPage.css文件，在系統的Css下！！！！！！！！！！！

    响应式布局参考css文件

    响应式布局参考css文件

    CSS中常用的 reset.css文件

    为了确保不同浏览器间的一致性以及消除默认样式带来的差异，开发者通常会使用`reset.css`或类似的重置样式表。`reset.css`文件的主要目的是消除浏览器内置样式的影响，使网页元素具有统一的初始样式，从而为自定义...

    基于PHP的愚人节恶搞网页 php版.zip

    【标题】"基于PHP的愚人节恶搞网页 php版.zip"揭示了这个压缩包包含了一个使用PHP编程语言创建的愚人节玩笑网页项目。PHP（Hypertext Preprocessor）是一种广泛使用的开源脚本语言，尤其适用于Web开发，可嵌入到HTML...

    愚人节页面翻转效果

    ### 愚人节页面翻转效果实现方法详解 #### 一、背景介绍 随着互联网技术的发展，网页设计越来越多样化，各种创意和技术层出不穷。在特殊节日或者纪念日时，许多网站会推出一些有趣的互动功能来增加用户体验，比如...

    HTML外部引用CSS文件不生效原因分析及解决办法

    就比如我在css目录下面写了一个css样式文档：style.css。这时里面只有一句话： XML/HTML Code复制内容到剪贴板 body {  background-color: #ddd;  }  然后再我的html文件里面去引入这个外部css： XML/...

    DW CS6 CSS样式汉化文件补丁

    总的来说，"DW CS6 CSS样式汉化文件补丁"是为了解决中文用户在使用Dreamweaver CS6进行CSS样式编辑时的语言障碍，提供更友好的中文界面，提高工作效率。通过正确安装和使用这个补丁，用户可以更轻松地掌握和应用CSS...

    PHP实例开发源码—愚人节恶搞网页 php版.zip

    在本资源"PHP实例开发源码—愚人节恶搞网页 php版.zip"中，包含了一个基于PHP语言的愚人节恶搞网页的源代码。这个项目可能是为了在每年的4月1日愚人节带给用户一些趣味性的互动体验。通过分析这个压缩包内的文件，...

    CSS文件和样式命名规范

    CSS 文件和样式命名规范 在网页开发中，CSS 文件和样式命名规范是一个非常重要的方面。为了提高开发效率和代码可读性，需要制定一套规范的命名规则。 一、CSS 文件命名规范 在命名 CSS 文件时，需要遵循以下规则...

    jsp和css文件

    通过使用CSS，开发者可以独立地定义不同设备、不同屏幕尺寸下的显示效果，实现响应式设计。 在**JSP与CSS的结合**中，通常JSP用于处理服务器端逻辑，如用户请求、数据库操作等，而CSS则负责前端的展示，使网页具有...

    中文网站div+css

    这句话表明，这个压缩包可能包含了一些关于Div+CSS的基础教程或实例，适合那些之前可能专注于Flash动画制作，现在希望学习如何用Div+CSS进行网页布局的初学者。Flash虽然曾经是创建动态网页的主流工具，但随着移动...

    java开发中压缩js,css文件

    这种技术通常被称为“文件合并与压缩”，它将多个js和css文件合并为一个文件，并去除其中不必要的空白、注释以及进行其他优化，以减小文件大小。下面将详细介绍这一过程及其相关知识点。 首先，我们要了解为什么要...

    kvcorecss：KVCore网站CSS文件

    3. **响应式设计文件**：可能有如`responsive.css`这样的文件，用于确保网站在不同设备和屏幕尺寸上的良好展示，实现自适应布局。 4. **Sass或Less文件**：如果项目使用预处理器，如Sass（.scss）或Less（.less），...

    aprilsfoolsmusic:愚人节网站

    在这个愚人节网站的构建过程中，开发者可能会使用CSS3的新特性，如过渡效果、动画和伪类选择器来实现各种趣味性的交互。JavaScript可能会被用来创建恶作剧功能，比如点击按钮后突然改变页面样式，或者播放意想不到的...

    css文件代码css文件代码css文件代码

    CSS文件是CSS代码的存储格式，通常以`.css`为扩展名。 在CSS文件中，代码结构主要包括选择器（selector）和声明块（declaration block）。选择器指定了我们要应用样式的元素，如`p`代表段落，`#id`代表具有特定ID的...

    Tailwind-boilerplate:基于TailwindCSS的前端开发样板

    所有脚本都在package.json中定义： build：css ：为所有实用程序生成具有所有排列的css文件build：serve ：在开发过程中启动进行实时重载prod：css ：生成清除的css文件prod：minify ：生成清除的css文件的缩小版本...

    合并网站多个css文件成一样

    1. **文件读取**：读取网站目录下的所有CSS文件，这可能需要使用`System.IO`命名空间中的`Directory.GetFiles()`方法来获取文件列表。 2. **内容合并**：将所有CSS文件的内容合并到一个字符串变量中，可以使用`File...

    愚人节整人jQuery插件Fool.zip

    愚人节整人jQuery插件Fool的文件列表虽然只有一个“愚人节整人jQuery插件Fool”，但通常这样的压缩包内会包含以下组成部分：JavaScript文件（如jquery.fool.js）、CSS文件（如fool.css）、HTML示例文件（index.html...

    tidy.css:响应式CSS框架

    **tidy.css: 响应式CSS框架** tidy.css是一个设计简洁、高效的响应式CSS框架，它专注于提供一种快速且灵活的方式来构建适应各种设备屏幕的网页布局。响应式设计是现代网页开发的关键，tidy.css的目标就是简化这一...

Magicbox
Global site tag (gtag.js) - Google Analytics