`

趣文：巧用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中常用的 reset.css文件

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

    响应式布局参考css文件

    响应式布局参考css文件

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

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

    愚人节页面翻转效果

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

    DW CS6 CSS样式汉化文件补丁

    总的来说，"DW CS6 CSS样式汉化文件补丁"是为了解决中文用户在使用Dreamweaver CS6进行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），...

    unigui_css引用路径

    在Unigui中，正确配置CSS引用路径对于实现美观且响应式的用户界面至关重要。 1. **基本概念** - CSS：是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。 - Unigui：一个基于...

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

    EasyUI很全的CSS样式文件与图标

    在给定的资源中，"EasyUI 很全的 CSS 样式文件与图标" 涵盖了 EasyUI 所需的各种 CSS 样式和图标，方便开发者直接集成到项目中使用。 首先，EasyUI 的 CSS 样式文件是框架的核心部分，它们定义了各个组件的外观和...

    CSS中文手册（完整版）.rar

    这个压缩包文件包含了一套全面的CSS中文手册，旨在为中文用户提供方便快捷的CSS参考资料，无需再花费时间在网上搜索。它由老明宇提供，集成了三种不同的CSS手册，确保覆盖了广泛的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...

    css文件，ssm框架中图书馆里系统用到的

    在SSM（Spring、SpringMVC和MyBatis）框架中，CSS文件是构建用户界面的重要组成部分，尤其是在图书馆管理系统这样的Web应用中，它们对提供清晰、整洁且易于导航的界面起着关键作用。 **CSS基础知识** 1. **选择器...

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