我有这个段落的标签我猛烈摇晃并从屏幕上撕下来工作正常，除非我喜欢暂时用另一个段落替换它直到它回来。
#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));}
}<p id="poltergeist">Sample text</p>
答案 0 :(得分：0)
编辑2 这是一个codepen
我删除了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>