`

趣文：巧用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下！！！！！！！！！！！

    愚人节恶搞程序

    "愚人节恶搞程序"就是一个典型的例子，它利用编程技能制作出有趣且具有互动性的应用程序，为用户带来欢笑。这类程序通常包含一些巧妙的代码技巧和幽默元素，让人们在享受科技乐趣的同时，也能感受到编程的魅力。 ...

    基于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（层叠样式表）**是Web前端开发中的核心技术之一，用于定义网页的布局、颜色、字体等视觉效果。CSS样式表手册是开发者学习和查阅CSS规则的重要参考资料，尤其对于中文用户，中文手册能更直观、准确地理解概念和...

    css文件

    css文件css文件css文件css文件css文件css文件

    java开发中压缩js,css文件

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

    kvcorecss：KVCore网站CSS文件

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

    css文件列表

    此外，CSS可以使用媒体查询（media queries）实现响应式设计，使得页面在不同设备和屏幕尺寸下都能有良好的显示效果。例如： ```css @media screen and (max-width: 600px) { body { background-color: lightblue...

    mui开发js文件与css文件

    本文将详细探讨MUI中的JavaScript文件与CSS文件如何协同工作，以实现强大的功能和美观的界面。 一、MUI的JS文件 MUI的JavaScript文件主要负责交互逻辑和组件的动态行为。这些文件通常包括基础库、组件库以及特定...

    postcss-discard-comments:使用 PostCSS 丢弃 CSS 文件中的注释

    -discard-comments 使用 PostCSS 丢弃 CSS 文件中的注释。 通过安装： npm install postcss-discard-comments --save例子 var postcss = require ( 'postcss' )var comments = require ( 'postcss-discard-comments'...

    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文件的缩小版本...

    easyui用到的css文件和主题文件

    在“easyui用到的css文件和主题文件”这个压缩包中，我们主要关注的是EasyUI的样式表（CSS）文件以及可能包含的主题文件。 1. **CSS 文件**： EasyUI 的核心在于它的 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...

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