<div class="sky p">
<div class="skySection p">
<img src="https://assets.codepen.io/1658514/cloud1.png" class="cloud p " style="left:30px;top:300px;"/><!-- puffy wide -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:80px;top:200px;" /><!-- puffy round -->
<img src="https://assets.codepen.io/1658514/cloud3.png" class="cloud p " style="left:380px;top:70px;" /><!-- puffy big -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:60px;top:40px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud1.png" class="cloud p " style="left:600px;top:16px;"/><!-- puffy wide -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:460px;top:266px;" /><!-- puffy round -->
<img src="https://assets.codepen.io/1658514/cloud3.png" class="cloud p " style="left:577px;top:330px;" /><!-- puffy big -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:98px;top:90px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:500px;top:210px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:-60px;top:-30px;" /><!-- puffy round -->
</div><!-- skySection -->
<div class="skySection p" style="left:1000px;">
<img src="https://assets.codepen.io/1658514/cloud1.png" class="cloud p " style="left:30px;top:300px;"/><!-- puffy wide -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:80px;top:200px;" /><!-- puffy round -->
<img src="https://assets.codepen.io/1658514/cloud3.png" class="cloud p " style="left:380px;top:70px;" /><!-- puffy big -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:60px;top:40px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud1.png" class="cloud p " style="left:600px;top:16px;"/><!-- puffy wide -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:460px;top:266px;" /><!-- puffy round -->
<img src="https://assets.codepen.io/1658514/cloud3.png" class="cloud p " style="left:577px;top:330px;" /><!-- puffy big -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:98px;top:90px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:500px;top:210px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:-60px;top:-30px;" /><!-- puffy round -->
</div><!-- skySection -->
<div class="skySection p" style="left:2000px;">
<img src="https://assets.codepen.io/1658514/cloud1.png" class="cloud p " style="left:30px;top:300px;"/><!-- puffy wide -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:80px;top:200px;" /><!-- puffy round -->
<img src="https://assets.codepen.io/1658514/cloud3.png" class="cloud p " style="left:380px;top:70px;" /><!-- puffy big -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:60px;top:40px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud1.png" class="cloud p " style="left:600px;top:16px;"/><!-- puffy wide -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:460px;top:266px;" /><!-- puffy round -->
<img src="https://assets.codepen.io/1658514/cloud3.png" class="cloud p " style="left:577px;top:330px;" /><!-- puffy big -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:98px;top:90px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud4.png" class="cloud p " style="left:500px;top:210px;" /><!-- thin -->
<img src="https://assets.codepen.io/1658514/cloud2.png" class="cloud p " style="left:-60px;top:-30px;" /><!-- puffy round -->
</div><!-- skySection -->
</div><!-- sky -->
<div class="windCntr p cntr">
<div class="upperRopeCntr p cntr">
<div class="rope upperRope p">
</div><!-- upperRope -->
<div class="ratCntr p cntr">
<div class="ratCntr2 p cntr">
<img class="rat p" src="https://assets.codepen.io/1658514/rat.png">
<img class="ratTail p" src="https://assets.codepen.io/1658514/ratTail.png">
</div><!-- ratCntr2 -->
<div class="grabbedRopeCntr p cntr">
<div class="rope grabbedRope p">
</div><!-- grabbedRope -->
<div class="lowerRopeCntr p cntr">
<div class="rope lowerRope p"></div>
</div><!-- lowerRopeCntr -->
</div><!-- grabbedRopeCntr -->
</div><!-- ratCntr -->
</div><!-- upperRopeCntr -->
</div><!-- windCntr -->
<div class="heeelpMee p ">H<span class="bu">e</span>e<span class="bu">e</span>e<span class="bu">e</span>l<span class="bu">p</span>!<span class="bu">!</span></div>
<div class="wisecrack wisecrack1 p">Hey! What are <i>you</i> lookin' at?</div>
<div class="wisecrack wisecrack2 wc p">Boy! It is really <i>windy</i> out here!!</div>
<div class="wisecrack wisecrack3 wc p">What's with this stupid rope?</div>
<div class="wisecrack wisecrack4 wc p">It's like someone <i>starched</i> parts of it or something!</div>
<div class="wisecrack wisecrack5 wc p">How in the heck did I end up inside of <i>CodePen</i> ?</div>
<div class="wisecrack wisecrack6 wc p">Any ideas people?</div>
<div class="wisecrack wisecrack7 wc p">-> Sigh! <-</div>
<!--
<img src="https://assets.codepen.io/1658514/crosshair.svg"
class="p crosshair "
style="left:262.5px; top:153px;" /> -->body {
overflow:hidden;
margin:0;
padding:0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.bu {
transform: translate(0px, -8px) rotate(13deg);
color:#00cc99;
display:inline-block;
}
div {
box-sizing: border-box;
margin:0;
padding:0;
}
img {
box-sizing: border-box;
margin:0;
padding:0;
}
.p {
position:absolute;
}
/****************************************/
.cntr {
width:460px;
height:460px;
}
/* I used the class below with an SVG image of a cross hair
(in an IMG tag)
to help me set my transform-origin in places
(its Still not perfect but we're just having fun here)!
*/
.crosshair {
width:25px;
height:25px;
transform:translate(-12.5px,-12.5px);
z-index:100;
}
.sky {
background-color: #9aace5;
left:0;
top:0;
width:110%;
height:110%;
overflow:hidden;
}
@keyframes skySection_ani {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-1000px,0);
}
}
.skySection {
height:1000px;
width:850px;
animation-duration:3s;
animation-name: skySection_ani;
animation-timing-function:linear;
animation-iteration-count: infinite; /* put at END of animation props */
}
.windCntr {
/* left:400px; */
top:-5px;*/
}
.cloud {
transform:scale(.7);
opacity:.7;
}
.cloud {
transform:scale(.7);
opacity:.7;
}
@keyframes upperRopeSwaying_ani {
0% {
transform:rotate(0deg);
}
5% {
transform:rotate(6deg);
}
20% {
transform:rotate(10deg);
}
25% {
transform:rotate(12deg);
}
30% {
transform:rotate(8deg);
}
35% {
transform:rotate(9deg);
}
40% {
transform:rotate(13deg);
}
45% {
transform:rotate(6deg);
}
50% {
transform:rotate(16deg);
}
55% {
transform:rotate(2deg);
}
60% {
transform:rotate(-5deg);
}
65% {
transform:rotate(14deg);
}
70% {
transform:rotate(4deg);
}
75% {
transform:rotate(-4deg);
}
80% {
transform:rotate(9deg);
}
85% {
transform:rotate(16deg);
}
90% {
transform:rotate(10deg);
}
95% {
transform:rotate(2deg);
}
100% {
transform:rotate(0deg);
}
}
.upperRopeCntr {
left:0px;
/* axis below is positioned to the top rope pivots
off the top of the page */
transform-origin: 365px 0px;
animation: upperRopeSwaying_ani;
animation-duration:5s;
animation-fill-mode:both;
animation-iteration-count: infinite; /* put at END of animation props */
}
.upperRope {
transform: rotate(27deg);
top:-15px;
left:330px;
height:100px;
}
@keyframes ratSwayingOnRope_ani {
0% {
transform:rotate(10deg);
}
20% {
transform:rotate(25deg);
}
25% {
transform:rotate(-10deg);
}
30% {
transform:rotate(-12deg);
}
35% {
transform:rotate(6deg);
}
40% {
transform:rotate(20deg);
}
45% {
transform:rotate(4deg);
}
50% {
transform:rotate(14deg);
}
55% {
transform:rotate(17deg);
}
60% {
transform:rotate(22deg);
}
65% {
transform:rotate(26deg);
}
68% {
transform:rotate(29deg);
}
70% {
transform:rotate(20deg);
}
75% {
transform:rotate(16deg);
}
80% {
transform:rotate(21deg);
}
85% {
transform:rotate(23deg);
}
90% {
transform:rotate(-20deg);
}
90% {
transform:rotate(4deg);
}
90% {
transform:rotate(-1deg);
}
100% {
transform:rotate(10deg);
}
}
.ratCntr {
left:20px;
top: 0px;
/* axis below is positioned to where the grabbed rope pivots
off of the bottom of the upper rope */
transform-origin: 295px 74px;
animation: ratSwayingOnRope_ani;
animation-duration:5s;
animation-fill-mode:both;
animation-iteration-count: infinite; /* put at END of animation props */
}
.rat {
left:74px;
top:80px;
z-index:5;
}
@keyframes swayingRatTail_ani {
0% {
transform:rotate(0deg);
}
20% {
transform:rotate(-10deg);
}
25% {
transform:rotate(12deg);
}
30% {
transform:rotate(-8deg);
}
35% {
transform:rotate(9deg);
}
40% {
transform:rotate(-13deg);
}
90% {
transform:rotate(10deg);
}
100% {
transform:rotate(0deg);
}
}
.ratTail {
top: 164px;
left: 38px;
z-index:4;
animation: swayingRatTail_ani;
animation-duration:5s;
animation-fill-mode:both;
animation-iteration-count: infinite; /* put at END of animation props */
}
/* use in class attribute FIRST */
.rope {
width:8px;
background-color:#4d2600;
border-radius:4px;
}
.grabbedRopeCntr {
left:5px;
top:37px;
}
.ratCntr2 {
height:270px;
/* axis below is positioned to where the rat's tail pivots
on its body */
transform-origin: 122px 172px;
}
.grabbedRope {
height:130px;
transform: rotate(10deg);
left:270px;
top:30px;
lower-right-border: 8px;
}
.lowerRopeCntr {
}
@keyframes swayingLowerRope_ani {
0% {
transform:rotate(30deg);
}
5% {
transform:rotate(45deg);
}
10% {
transform:rotate(40deg);
}
15% {
transform:rotate(37deg);
}
20% {
transform:rotate(20deg);
}
25% {
transform:rotate(12deg);
}
30% {
transform:rotate(26deg);
}
35% {
transform:rotate(9deg);
}
40% {
transform:rotate(33deg);
}
90% {
transform:rotate(10deg);
}
100% {
transform:rotate(30deg);
}
}
.lowerRope {
top:150px;
left:258px;
height:210px;
/* axis below is positioned to where the lower rope pivots
off of the bottom end of the grabbed rope */
transform-origin: 50% 0%;
animation: swayingLowerRope_ani;
animation-duration:5s;
animation-iteration-count: infinite; /* put at END of animation props */
}
@keyframes fadeoutHelpMeMsg_ani {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
.heeelpMee {
--shadow-thickness:4px;
--shadow-thickness2:-4px;
bottom:30px;
color:#d65c99;
font-family: Georgia;
font-weight:bold;
font-size:64pt;
z-index:600;
text-shadow: var(--shadow-thickness) var(--shadow-thickness) black,
var(--shadow-thickness2) 0px black,
var(--shadow-thickness) 0px black,
0px var(--shadow-thickness) black,
0px var(--shadow-thickness2) black,
var(--shadow-thickness2) var(--shadow-thickness) black,
var(--shadow-thickness) var(--shadow-thickness2) black,
var(--shadow-thickness2) var(--shadow-thickness2) black;
animation-delay:5s;
animation-duration:5s;
animation-fill-mode:forwards;
animation-name: fadeoutHelpMeMsg_ani;
}
@keyframes displayWisecrack_ani {
0% {
opacity:.6;
}
99% {
opacity:.6;
}
100% {
opacity:0;
}
}
.wisecrack1 {
--ani-delay:8.5s;
}
.wisecrack2 {
--ani-delay:17s;
}
.wisecrack3 {
--ani-delay:23s;
}
.wisecrack4 {
--ani-delay:29s;
}
.wisecrack5 {
--ani-delay:36s;
}
.wisecrack6 {
--ani-delay:43s;
}
.wisecrack7 {
--ani-delay:48s;
}
.wisecrack {
bottom:60px;
font-family:tahoma;
font-weight:bold;
font-size:20pt;
background-color:lightyellow;
padding:5px 12px 5px 12px;
border-radius:8px;
opacity:0;
animation-delay:var(--ani-delay);
animation-duration:4s;
animation-fill-mode:forwards;
animation-name: displayWisecrack_ani;
}
i {
color:red;
}
@keyframes shake_ani {
10%, 90% {
transform: translate(-1px, 0);
}
20%, 80% {
transform: translate(2px, 0);
}
30%, 50%, 70% {
transform: translate(-4px, 0);
}
40%, 60% {
transform: translate(4px, 0);
}
}
.shake {
animation: shake_ani .5s cubic-bezier(.36,.07,.19,.97) both;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.