BLOOD

Developer
Katy DeCorah
Size
3,487 Kb
Views
6,072
  1. BLOOD Previews
  2. BLOOD HTML Codes
  3. BLOOD CSS Codes

How do I make an blood?

A web perf nightmare! Happy Halloween! (This is so morbid, sorry everyone.). What is a blood? How do you make a blood? This script and codes were developed by Katy DeCorah on 26 January 2023, Thursday.

BLOOD Previews
IQ Test

BLOOD - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BLOOD</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "compass/css3";
$blood: darken(red,10%);
body,html { width:100%; height:100%; overflow:hidden; background:#ddd;
}
.bloods { width:300%; height:100%; position:relative; margin:0 auto;
}
.blood { float:left; border-radius:0 0 1em 1em; position:relative; &:after, &:before { content:""; position:absolute; }
&:after {border-radius:100%;}
&:before { border-radius:0 100% 100% 100%; @include transform(rotate(45deg));
}
@for $i from 1 through 250 { &:nth-child(#{$i}){ $width:random(0.25); $darkBlood:darken($blood,random(10) * 1%); $dripTime: random(10) + 4s; top:-150%; height:100%; width: $width + em; @include background(linear-gradient(top,$blood,$darkBlood)); animation:drip $dripTime cubic-bezier(.17,.67,.41,.43) forwards random(10) + s; &:before { width:$width + em; height: $width + em; background:darken($darkBlood,1%); top:90%; animation:drop random(10.0) + 15s cubic-bezier(.17,.67,.41,.43) forwards ($dripTime + 0.5s); } &:after { width:106%; height:1em; background:darken($darkBlood,1%); bottom:0; left:-2%; }
}
}
}
@keyframes drip { to { top:0; border-radius:0; }
}
@keyframes drop { to {top:100em;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='bloods'> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div> <div class='blood'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

BLOOD - Script Codes CSS Codes

@import "compass/css3";
$blood: darken(red,10%);
body,html { width:100%; height:100%; overflow:hidden; background:#ddd;
}
.bloods { width:300%; height:100%; position:relative; margin:0 auto;
}
.blood { float:left; border-radius:0 0 1em 1em; position:relative; &:after, &:before { content:""; position:absolute; }
&:after {border-radius:100%;}
&:before { border-radius:0 100% 100% 100%; @include transform(rotate(45deg));
}
@for $i from 1 through 250 { &:nth-child(#{$i}){ $width:random(0.25); $darkBlood:darken($blood,random(10) * 1%); $dripTime: random(10) + 4s; top:-150%; height:100%; width: $width + em; @include background(linear-gradient(top,$blood,$darkBlood)); animation:drip $dripTime cubic-bezier(.17,.67,.41,.43) forwards random(10) + s; &:before { width:$width + em; height: $width + em; background:darken($darkBlood,1%); top:90%; animation:drop random(10.0) + 15s cubic-bezier(.17,.67,.41,.43) forwards ($dripTime + 0.5s); } &:after { width:106%; height:1em; background:darken($darkBlood,1%); bottom:0; left:-2%; }
}
}
}
@keyframes drip { to { top:0; border-radius:0; }
}
@keyframes drop { to {top:100em;}
}
BLOOD - Script Codes
BLOOD - Script Codes
Home Page Home
Developer Katy DeCorah
Username katydecorah
Uploaded January 26, 2023
Rating 3.5
Size 3,487 Kb
Views 6,072
Do you need developer help for BLOOD?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katy DeCorah (katydecorah) Script Codes
Name
Bowl of Trees
END by Catt
Instagram
Google Font Explorer
Snowflaker 2016
Twinner Spinner II
Double Vision
Build a store locator with Mapbox.js
Combination Lock
Accordion Nav
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!