Javascript 暂时交换段落
我有一个段落标签，我剧烈地摇晃，从屏幕上撕下，效果很好，只是我想暂时用另一个段落替换它，直到它回来Javascript 暂时交换段落,javascript,css,Javascript,Css,我有一个段落标签，我剧烈地摇晃，从屏幕上撕下，效果很好，只是我想暂时用另一个段落替换它，直到它回来 #恶鬼{ -网络工具包动画：Fling30s； 动画：Fling30s； 动画迭代次数：无限； -moz动画迭代次数：无限； -webkit动画迭代计数：无限； -o-动画-迭代-计数：无限； } @-webkit关键帧投掷{ 20%{-webkit变换：旋转（0度）；} 20.1%{-webkit变换：旋转（-1deg）；} 20.2%{-webkit变换：旋转（2deg）；} 20.3%{-
#恶鬼{
-网络工具包动画：Fling30s；
动画：Fling30s；
动画迭代次数：无限；
-moz动画迭代次数：无限；
-webkit动画迭代计数：无限；
-o-动画-迭代-计数：无限；
}
@-webkit关键帧投掷{
20%{-webkit变换：旋转（0度）；}
20.1%{-webkit变换：旋转（-1deg）；}
20.2%{-webkit变换：旋转（2deg）；}
20.3%{-webkit变换：旋转（-2deg）；}
20.4%{-webkit变换：旋转（3deg）；}
20.5%{-webkit变换：旋转（-3deg）；}
20.6%{-webkit变换：旋转（4deg）；}
20.7%{-webkit变换：旋转（-4deg）；}
20.8%{-webkit变换：旋转（5度）；}
20.9%{-webkit变换：旋转（-5度）；}
21.0%{-webkit变换：旋转（4deg）；}
21.1%{-webkit变换：旋转（-4deg）；}
21.2%{-webkit变换：旋转（3deg）；}
21.3%{-webkit变换：旋转（-3deg）；}
21.4%{-webkit变换：旋转（2deg）；}
21.5%{-webkit变换：旋转（-2deg）；}
21.7%{-webkit变换：旋转（4deg）；}
21.9%{-webkit变换：旋转（-4deg）；}
22.1%{-webkit变换：旋转（8度）；}
22.3%{-webkit变换：旋转（-8度）；}
22.5%{-webkit变换：旋转（20度）；}
22.7%{-webkit转换：translate（100px，100px）；}
23%{-webkit转换：转换（-2000px，-200px）；}
24%{opacity:1；过滤器：（alpha（opacity=100））；}
25%{opacity:0；过滤器：（alpha（opacity=0））；}
89%{-webkit转换：翻译（0px，0px）；}
90%{opacity:0；过滤器：（alpha（opacity=0））；}
100%{opacity:1；过滤器：（alpha（opacity=100））；}
}
@关键帧投掷{
20%{变换：旋转（0度）；}
20.1%{变换：旋转（-1deg）；}
20.2%{变换：旋转（2deg）；}
20.3%{变换：旋转（-2deg）；}
20.4%{变换：旋转（3deg）；}
20.5%{变换：旋转（-3deg）；}
20.6%{变换：旋转（4deg）；}
20.7%{变换：旋转（-4deg）；}
20.8%{变换：旋转（5度）；}
20.9%{变换：旋转（-5度）；}
21.0%{变换：旋转（4deg）；}
21.1%{变换：旋转（-4deg）；}
21.2%{变换：旋转（3deg）；}
21.3%{变换：旋转（-3deg）；}
21.4%{变换：旋转（2deg）；}
21.5%{变换：旋转（-2deg）；}
21.7%{变换：旋转（4deg）；}
21.9%{变换：旋转（-4deg）；}
22.1%{变换：旋转（8度）；}
22.3%{变换：旋转（-8度）；}
22.5%{变换：旋转（20度）；}
22.7%{转换：翻译（100px，100px）；}
23%{transform:translate（-2000px，-200px）；}
24%{opacity:1；过滤器：（alpha（opacity=100））；}
25%{opacity:0；过滤器：（alpha（opacity=0））；}
89%{transform:translate（0px，0px）；}
90%{opacity:0；过滤器：（alpha（opacity=0））；}
100%{opacity:1；过滤器：（alpha（opacity=100））；}
}示例文本
这是一个
我删除了Javascript，现在它是纯css
根据您的代码，我添加了以下行
div.cont p { position:absolute;}
div.cont p#poltergeist { z-index: 2;}
div.cont p#replaced { z-index: 1; }
这是你的完整页面
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head><body>
<style>
html{
font-family:'Josefin Slab',sans;
}
body{
background:rgb(5,5,5) url(http://thelab.org.au/online/wp-content/uploads/2016/07/landscape.jpg) no-repeat;
background-size: cover;
color:rgb(88,114,103);
}
p{
font-size:160%;
margin:5% 3%;
padding:1%;
border-color:rgba(248,255,157,0.3);
border-width:6px;
border-style:groove;
background-color:rgb(5,5,5);
}
.credit{
text-align:right;
font-size:80%;
line-height:200%;
font-style:italic;
-o-transition: all 3s;
-moz-transition: all 3s;
-webkit-transition: all 3s;
transition: all 3s;
}
.credit:hover{
font-size:200%;
line-height:100%;
}
.credit a{
color:inherit;
text-decoration:none;
}
#eyecanvas{
background: url(http://thelab.org.au/online/wp-content/uploads/2016/07/cat_eyes.jpg);
background-size:100% 100%;
}
.ghost{
position:fixed;
bottom:0;
right:0;
opacity: 0.2;
filter: alpha(opacity=20);
z-index:1;
-o-transition: opacity 5s;filter 5s;
-moz-transition: opacity 5s;filter 5s;
-webkit-transition: opacity 5s;filter 5s;
transition: opacity 5s;filter 5s;
-webkit-animation: hauntx 21s infinite, haunty 37s infinite, fadeout 29s infinite, moveback 15s infinite;
animation: hauntx 21s infinite, haunty 37s infinite, fadeout 29s infinite, moveback 15s infinite;
}
.ghost:hover{
opacity:1;
filter: alpha(opacity=100);
}
@-webkit-keyframes hauntx {
0% {right: 5%;}
50% {right: 80%;}
100% {right: 5%;}
}
@keyframes hauntx {
0% {right: 5%;}
50% {right: 80%;}
100% {right: 5%;}
}
@-webkit-keyframes haunty {
0% {bottom: 5%;}
30% {bottom: 80%;}
100% {bottom: 5%;}
}
@keyframes haunty {
0% {bottom: 5%;}
30% {bottom: 80%;}
100% {bottom: 5%;}
}
@-webkit-keyframes fadeout{
20% {filter:blur(0px);-webkit-filter:blur(0px);}
30% {filter:blur(50px);-webkit-filter:blur(50px);}
60% {filter:blur(0px);-webkit-filter:blur(0px);}
}
@keyframes fadeout{
20% {filter:blur(0px);-webkit-filter:blur(0px);}
30% {filter:blur(50px);-webkit-filter:blur(50px);}
60% {filter:blur(0px);-webkit-filter:blur(0px);}
}
@-webkit-keyframes moveback{
30% {z-index:-1;}
60% {z-index:1;}
}
@keyframes moveback{
30% {z-index:-1;}
60% {z-index:1;}
}
/* code added by me */
div.cont p { position:absolute;}
div.cont p#poltergeist { z-index: 2;}
div.cont p#replaced { z-index: 1; }
/* end */
#poltergeist{
-webkit-animation: fling 30s;
animation: fling 30s;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
@-webkit-keyframes fling {
20% {-webkit-transform:rotate(0deg);}
20.1% {-webkit-transform:rotate(-1deg);}
20.2% {-webkit-transform:rotate(2deg);}
20.3% {-webkit-transform:rotate(-2deg);}
20.4% {-webkit-transform:rotate(3deg);}
20.5% {-webkit-transform:rotate(-3deg);}
20.6% {-webkit-transform:rotate(4deg);}
20.7% {-webkit-transform:rotate(-4deg);}
20.8% {-webkit-transform:rotate(5deg);}
20.9% {-webkit-transform:rotate(-5deg);}
21.0% {-webkit-transform:rotate(4deg);}
21.1% {-webkit-transform:rotate(-4deg);}
21.2% {-webkit-transform:rotate(3deg);}
21.3% {-webkit-transform:rotate(-3deg);}
21.4% {-webkit-transform:rotate(2deg);}
21.5% {-webkit-transform:rotate(-2deg);}
21.7% {-webkit-transform:rotate(4deg);}
21.9% {-webkit-transform:rotate(-4deg);}
22.1% {-webkit-transform:rotate(8deg);}
22.3% {-webkit-transform:rotate(-8deg);}
22.5% {-webkit-transform:rotate(20deg);}
22.7% {-webkit-transform:translate(100px,100px);}
23% {-webkit-transform:translate(-2000px,-200px);}
24% {opacity:1;filter:(alpha(opacity=100));}
25% {opacity:0;filter:(alpha(opacity=0));}
89%{-webkit-transform:translate(0px,0px);}
90% {opacity:0;filter:(alpha(opacity=0));}
100% {opacity:1;filter:(alpha(opacity=100));}}
@keyframes fling{
20% {transform:rotate(0deg);}
20.1% {transform:rotate(-1deg);}
20.2% {transform:rotate(2deg);}
20.3% {transform:rotate(-2deg);}
20.4% {transform:rotate(3deg);}
20.5% {transform:rotate(-3deg);}
20.6% {transform:rotate(4deg);}
20.7% {transform:rotate(-4deg);}
20.8% {transform:rotate(5deg);}
20.9% {transform:rotate(-5deg);}
21.0% {transform:rotate(4deg);}
21.1% {transform:rotate(-4deg);}
21.2% {transform:rotate(3deg);}
21.3% {transform:rotate(-3deg);}
21.4% {transform:rotate(2deg);}
21.5% {transform:rotate(-2deg);}
21.7% {transform:rotate(4deg);}
21.9% {transform:rotate(-4deg);}
22.1% {transform:rotate(8deg);}
22.3% {transform:rotate(-8deg);}
22.5% {transform:rotate(20deg);}
22.7% {transform:translate(100px,100px);}
23% {transform:translate(-2000px,-200px);}
24% {opacity:1;filter:(alpha(opacity=100));}
25% {opacity:0;filter:(alpha(opacity=0));}
89%{transform:translate(0px,0px);}
90% {opacity:0;filter:(alpha(opacity=0));}
100% {opacity:1;filter:(alpha(opacity=100));}
}
div.cont{height:150px;width:600px}
</style>
<h1>About the mansion</h1>
<div class=cont>
<p id="poltergeist">The house is full of ghosts and other spirits who do not want visitors.</p>
<p id="replaced">The house is full of puppies kittens and rainbows who love visitors.</p>
</div>
<p id="eyecanvas">
The first edition was substantially a transcript of some lectures
which I delivered in the year 1888 with the object of giving a sketch of
the history, previous to the nineteenth century, that should be intelligible
to any one acquainted with the elements of mathematics. In the
second edition, issued in 1893, I rearranged parts of it, and introduced
a good deal of additional matter.
</p>
<p>
The scheme of arrangement will be gathered from the table of contents
at the end of this preface. Shortly it is as follows. The first chapter
contains a brief statement of what is known concerning the mathematics
of the Egyptians and Phoenicians; this is introductory to the history
of mathematics under Greek influence. The subsequent history is divided
into three periods: first, that under Greek influence, chapters ii
to vii; second, that of the middle ages and renaissance, chapters viii
to xiii; and lastly that of modern times, chapters xiv to xix.
</p>
<p>
In discussing the mathematics of these periods I have confined myself
to giving the leading events in the history, and frequently have
passed in silence over men or works whose influence was comparatively
unimportant. Doubtless an exaggerated view of the discoveries of those
mathematicians who are mentioned may be caused by the non-allusion
to minor writers who preceded and prepared the way for them, but in
all historical sketches this is to some extent inevitable, and I have done
my best to guard against it by interpolating remarks on the progress
of the science at different times. Perhaps also I should here state that
generally I have not referred to the results obtained by practical astronomers
and physicists unless there was some mathematical interest
in them. In quoting results I have commonly made use of modern notation;
the reader must therefore recollect that, while the matter is
the same as that of any writer to whom allusion is made, his proof is
sometimes translated into a more convenient and familiar language.
</p>
<p>
The greater part of my account is a compilation from existing histories
or memoirs, as indeed must be necessarily the case where the works
discussed are so numerous and cover so much ground. When authorities
disagree I have generally stated only that view which seems to me
to be the most probable; but if the question be one of importance, I
believe that I have always indicated that there is a difference of opinion
about it.
</p>
<p>
I think that it is undesirable to overload a popular account with
a mass of detailed references or the authority for every particular fact
mentioned. For the history previous to 1758, I need only refer, once for
all, to the closely printed pages of M. Cantor’s monumental Vorlesungen
über die Geschichte der Mathematik (hereafter alluded to as Cantor),
which may be regarded as the standard treatise on the subject, but
usually I have given references to the other leading authorities on which
</p>
<p>
I have relied or with which I am acquainted. My account for the period
subsequent to 1758 is generally based on the memoirs or monographs
referred to in the footnotes, but the main facts to 1799 have been also
enumerated in a supplementary volume issued by Prof. Cantor last year.
I hope that my footnotes will supply the means of studying in detail
the history of mathematics at any specified period should the reader
desire to do so.
</p>
<p>
My thanks are due to various friends and correspondents who have
called my attention to points in the previous editions. I shall be grateful
for notices of additions or corrections which may occur to any of my
readers.
</p>
<img class="ghost" src="<?php bloginfo('template_url'); ?>/images/ghostgirl.gif" alt="ghostgirl" height="550px"/>
<div class="credit">Background by <a href="https://www.flickr.com/people/79899037@N04">Tobiasvde</a> from <a href="https://commons.wikimedia.org/wiki/File:Creepy_landscape_(8023951031).jpg">Wikimedia commons</a></div>
</body></html>
html{
字体系列：'Josefin Slab'，sans；
}
身体{
背景：rgb（5,5,5）url(http://thelab.org.au/online/wp-content/uploads/2016/07/landscape.jpg)不重复；
背景尺寸：封面；
颜色：rgb（88114103）；
}
p{
字体大小：160%；
利润率：5%3%；
填充：1%；
边框颜色：rgba（248255157,0.3）；
边框宽度：6px；
边框样式：凹槽；
背景色：rgb（5,5,5）；
}
.信用卡{
文本对齐：右对齐；
字号：80%；
线高：200%；
字体：斜体；
-o-过渡：均为3s；
-moz转换：全部3s；
-webkit转换：所有3s；
过渡：所有3s；
}
.信贷：悬停{
字体大小：200%；
线高：100%；
}
.信用卡a{
颜色：继承；
文字装饰：无；
}
#眼罩{
背景：url(http://thelab.org.au/online/wp-content/uploads/2016/07/cat_eyes.jpg);
背景大小：100%100%；
}
.鬼魂{
位置：固定；
底部：0；
右：0；
不透明度：0.2；
过滤器：α（不透明度=20）；
z指数：1；
-o-过渡：不透明度5s；过滤器5s；
-moz转换：不透明度5s；过滤器5s；
-webkit转换：不透明度5s；过滤器5s；
过渡：不透明度5s；过滤器5s；
-webkit动画：闹鬼21秒无限，闹鬼37秒无限，淡出29秒无限，后移15秒无限；
动画：闹鬼21秒无限，闹鬼37秒无限，淡出29秒无限，后移15秒无限；
}
.幽灵：悬停{
不透明度：1；
过滤器：α（不透明度=100）；
}
@-webkit关键帧{
0%{右：5%；}
50%{右：80%；}
100%{对：5%；}
}
@关键帧{
0%{右：5%；}
50%{右：80%；}
100%{对：5%；}
}
@-webkit关键帧闹鬼{
0%{底部：5%；}
30%{底部：80%；}
100%{底部：5%；}
}
@关键帧闹鬼{
0%{底部：5%；}
30%{底部：80%；}
100%{底部：5%；}
}
@-webkit关键帧淡出{
20%{filter:blur（0px）；-webkit filter:blur（0px）；}
30%{filter:blur（50px）；-webkit filter:blur（50px）；}
60%{filter:blur（0px）；-webkit filter:blur（0px）；}
}
@关键帧淡出{
20%{filter:blur（0px）；-webkit filter:blur（0px）；}
30%{filter:blur（50px）；-webkit filter:blur（50px）；}
60%{filter:blur（0px）；-webkit filter:blur（0px）；}
}
@-webkit关键帧向后移动{
30%{z-指数：-1；}
60%{z-指数：1；}
}
@关键帧向后移动{
30%{z-指数：-1；}
60%{z-指数：1；}
}
/*由我添加的代码*/
div.cont p{位置：绝对；}
div.cont p#poltergeist{z-index:2；}
div.cont p#替换{z-index:1；}
/*结束*/
#闹鬼{
-网络工具包动画：Fling30s；
动画：Fling30s；
动画迭代次数：无限；
-moz动画迭代次数：无限；
-webkit动画迭代计数：无限；
-o-动画-迭代-计数：无限；
}
@-webkit关键帧投掷{
20%{-webkit变换：旋转（0度）；}
20.1%{-webkit变换：旋转（-1deg）；}
2.