Sheji

Developer
Anghelos Coulon
Size
2,287 Kb
Views
46,552
  1. Sheji Previews
  2. Sheji HTML Codes
  3. Sheji CSS Codes

How do I make an sheji?

An idea for my portfolio site. The Chinese character for "design", with its components linking to different sections. Nothing out of the ordinary code-wise.. What is a sheji? How do you make a sheji? This script and codes were developed by Anghelos Coulon on 31 August 2022, Wednesday.

Sheji Previews
IQ Test

Sheji - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sheji</title> <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! */ body{ background-color:whitesmoke;
}
.she-color{ position:absolute; margin:auto; left:0;right:0;top:0;bottom:0; width:344px; height:336px; background-image:url('https://dl.dropboxusercontent.com/u/4186912/she-color.png');
}
.gray{ position:absolute; background-image:url('https://dl.dropboxusercontent.com/u/4186912/she-gray.png'); opacity:1; transition:all .4s ease; animation:blink .8s ease 2 alternate;
}
.gray:hover{ opacity:0;
}
.she1{ top:0; left:0; width:148px; height:184px; animation-delay:3.5s;
}
.she2{ top:0; right:0; width:196px; height:150px; background-position:right top; animation-delay:5s;
}
.she3{ bottom:0; right:0; width:206px; height:186px; background-position:right bottom; animation-delay:2s;
}
.she4{ bottom:0; left:0; width:138px; height:145px; background-position:left bottom; animation-delay:6.5s;
}
@keyframes blink{ 0%{opacity:1;} 80%{opacity:0;} 100%{opacity:0;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <div class="she-color"> <div class="gray she1"></div> <div class="gray she2"></div> <div class="gray she3"></div> <div class="gray she4"></div> </div>
</body>
</body>
</html>

Sheji - Script Codes CSS Codes

body{ background-color:whitesmoke;
}
.she-color{ position:absolute; margin:auto; left:0;right:0;top:0;bottom:0; width:344px; height:336px; background-image:url('https://dl.dropboxusercontent.com/u/4186912/she-color.png');
}
.gray{ position:absolute; background-image:url('https://dl.dropboxusercontent.com/u/4186912/she-gray.png'); opacity:1; transition:all .4s ease; animation:blink .8s ease 2 alternate;
}
.gray:hover{ opacity:0;
}
.she1{ top:0; left:0; width:148px; height:184px; animation-delay:3.5s;
}
.she2{ top:0; right:0; width:196px; height:150px; background-position:right top; animation-delay:5s;
}
.she3{ bottom:0; right:0; width:206px; height:186px; background-position:right bottom; animation-delay:2s;
}
.she4{ bottom:0; left:0; width:138px; height:145px; background-position:left bottom; animation-delay:6.5s;
}
@keyframes blink{ 0%{opacity:1;} 80%{opacity:0;} 100%{opacity:0;}
}
Sheji - Script Codes
Sheji - Script Codes
Home Page Home
Developer Anghelos Coulon
Username anguo
Uploaded August 31, 2022
Rating 3
Size 2,287 Kb
Views 46,552
Do you need developer help for Sheji?

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!

Anghelos Coulon (anguo) Script Codes
Name
Salt Shaker CSS-Animated SVG
Pure CSS Giftbox
Simple always-visible comment indicator
CSS Gas Flame Animation
Lemon
Ripple
Pistachio pattern
Rotating oven - Animated SVG
Night reading mode
Pistachio skin remover machine, animated SVG
Create amazing art & images 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!