Report Blog Entry
I've been working on making a layout for a few hours now. And i've been using the testing area to do it. Once i got to where i thought was a great look i went to move it all over to my profile...everything transitioned smoothly...but the snowflake effect. Apparently when ever i copy and paste it it keeps adding in these (") and whenever i remove them and press "save" it adds them back in breaking the code on them. How can i fix this???
Here's the code i'm using to make the snowflake effect I'm trying to do
<div class="snowflakes">
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2023/07/Floppy-3.png width="50"/>
</div>
<div class="snowflake">
<img src=https://happilyellaafterusa.myshopify.com/cdn/shop/files/Unicorse-png-svg-cut-file.png?v=1703741472&width=1946 width="50"/>
</div>
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2023/07/CHATTERMAX.png width="50"/>
</div>
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2024/06/bbu.png width="50"/>
</div>
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2023/07/1.9-HORSEY-RIDE.png width="50"/>
</div>
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2023/11/Brtlebee.png width="50"/>
</div>
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2023/07/1.3-KEEPY-UPPY.png width="50"/>
</div>
<div class="snowflake">
<img src="https://www.bluey.tv/wp-content/uploads/2023/07/2.1-DANCEMODE.png" width="50"/>
</div>
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2023/07/1.19-THE-CLAW.png width="50"/>
</div>
<div class="snowflake">
<img src=https://www.bluey.tv/wp-content/uploads/2024/01/HECUBA.png width="50"/>
</div>
</div>
<style> @-webkit-keyframes snowflakes-fall {
0% {
top: -10%
}
100% {
top: 100%
}
}
@-webkit-keyframes snowflakes-shake {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px)
}
}
@keyframes snowflakes-fall {
0% {
top: -10%
}
100% {
top: 100%
}
}
@keyframes snowflakes-shake {
0%,
100% {
transform: translateX(0)
}
50% {
transform: translateX(80px)
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 9999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-animation-name: snowflakes-fall, snowflakes-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running
}
.snowflake:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s
}
.snowflake:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s
}
.snowflake:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, .5s;
animation-delay: 6s, .5s
}
.snowflake:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s
}
.snowflake:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s
}
.snowflake:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s
}
.snowflake:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s
}
.snowflake:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s
}
.snowflake:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s
}
.snowflake:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s
}
.snowflake:nth-of-type(10) {
left: 25%;
-webkit-animation-delay: 2s, 0s;
animation-delay: 2s, 0s
}
.snowflake:nth-of-type(11) {
left: 65%;
-webkit-animation-delay: 4s, 2.5s;
animation-delay: 4s, 2.5s
}</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )