MEMOREYES

Developer
Keyon
Size
2,914 Kb
Views
4,048
  1. MEMOREYES Previews
  2. MEMOREYES HTML Codes
  3. MEMOREYES CSS Codes

How do I make an memoreyes?

I'm studying SVG and I tried to do something that seems like the holograms in the game "Remember Me". What is a memoreyes? How do you make a memoreyes? This script and codes were developed by Keyon on 10 January 2023, Tuesday.

MEMOREYES Previews
IQ Test

MEMOREYES - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MEMOREYES</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="all">
<svg class="masterc0"> <defs> <linearGradient id="grad1" x1="0" x2="1" y1="1" y2="0"> <stop offset="20%" stop-color="rgba(244,67,54,0.6)" stop-opacity="1" /> <stop offset="80%" stop-color="#F44336" stop-opacity="0" /> </linearGradient> </defs> <path d="M10,50a40,40 0 1,0 80,0a40,40 0 1,0 -80,0" stroke="url(#grad1)" stroke-width="8" fill="none"/>
</svg>
<svg class="masterc1"> <defs> <linearGradient id="grad1" x1="0" x2="1" y1="1" y2="0"> <stop offset="20%" stop-color="rgba(244,67,54,0.6)" stop-opacity="1" /> <stop offset="80%" stop-color="#F44336" stop-opacity="0" /> </linearGradient> </defs> <path d="M10,50a40,40 0 1,0 80,0a40,40 0 1,0 -80,0" stroke="url(#grad1)" stroke-width="6" fill="none"/> <!--<circle class="cn1">-->
</svg>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/531144/arrow_rmprj.png" class="ar" />
<div class="wc1"></div>
<div class="sq1"></div>
<p class="memoreyes">MEMOREY</p><p class="m_e">E</p><p class="m_s">S<p>
<p class="trustUS">TRUST <span>US</span></p>
<p class="wewont">WE WONT</p>
<p class="forget">FORGET</p>
<p class="you">YOU</p>
</div>
</body>
</html>

MEMOREYES - Script Codes CSS Codes

html { width: 100vw; height: 100vh; /*background-image: url(https://s-media-cache-ak0.pinimg.com/originals/94/3b/c1/943bc1a4ef7c45bb8708d3d22008b0c8.jpg);*/ background-image: url(http://revelwallpapers.net/d/3632396E66467A72736248536B6F5233786E5A6C7673445871366C3569413D3D/cyberpunk-city-rain-background.jpg); background-size: 1920px; background-position: left top;
}
.all { position: fixed; top: 370px; left: 525px; transition: all 1s ease; -webkit-transform: translateZ(0) scale(0.7) rotateY(65deg) rotate(11deg); -moz-transform: translateZ(0) scale(0.7) rotateY(65deg) rotate(11deg); transform: translateZ(0) scale(0.7) rotateY(65deg) rotate(11deg);
}
.all:Hover { -moz-transform: translateZ(0) scale(0.7) rotateY(0deg) rotate(0deg); -webkit-transform: translateZ(0) scale(0.7) rotateY(0deg) rotate(0deg); transform: translateZ(0) scale(0.7) rotateY(0deg) rotate(0deg);
}
body { position: fixed; perspective: 900px; width: 1200px; height: 100vh;
}
.masterc0 { position: fixed; left: 0; top: 0; width: 670px; height: 670px; left: calc(50% - 335px); top: calc(50% - 335px); border-radius: 100%; animation: rotate 15s linear infinite;
}
.masterc1 { position: fixed; left: 0; top: 0; width: 900px; height: 900px; left: calc(50% - 450px); top: calc(50% - 450px); animation: rotateinv 13s linear infinite; border-radius: 100%;
}
.cn1 { fill: none; stroke: url(#grad1); stroke-width: 50; /*stroke-dasharray: 440;*/ stroke-dasharray: 0 110 705; cx: 215; cy: 195; r: 150; transition: all 1s ease;
}
.masterc0 > path { transform: scale(6.75);
}
.masterc1 > path { transform: scale(9);
}
@-webkit-keyframes rotate { from {transform: rotate(0deg)} to {transform: rotate(360deg)}
}
@-webkit-keyframes rotateinv { from {transform: rotate(0deg)} to {transform: rotate(-360deg)}
}
@-webkit-keyframes movm { 0% {transform: rotate(-2deg)} 50% {transform: rotate(2deg)} 100% {transform: rotate(-2deg)}
}
.ar { position: fixed; width: 425px; height: 425px; left: calc(50% - 212.5px); top: calc(50% - 212.5px); opacity: 0.87; animation: movm 7s ease infinite;
}
.wc1 { position: fixed; width: 175px; height: 175px; background: rgba(255,255,255,0.85); border-radius: 100%; left: calc(50% - 88.5px); top: calc(50% - 88.5px);
}
.sq1 { position: fixed; width: 75px; height: 75px; /*background: #feec80;*/ background: #FFD54F; opacity: 0.95; left: calc(50% - 38.5px); top: calc(50% - 38.5px); box-shadow: 0 3px 6px rgba(216,67,21,0.16), 0 3px 6px rgba(216,67,21,0.23);
}
.memoreyes { position: fixed; color: #fff; font-size: 55px; font-family: Segoe Ui; left: calc(50% + 185px); top: calc(50% - 185px); text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.m_e { position: absolute; color: #fff; font-size: 55px; font-family: Segoe Ui; transform: scaleX(-1) !important; left: calc(50% + 445px); top: calc(50% - 185px); text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.m_s { position: absolute; color: #fff; font-size: 55px; font-family: Segoe Ui; left: calc(50% + 475px); top: calc(50% - 185px); text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.trustUS { position: fixed; font-size: 105px; left: calc(50% - 690px); top: calc(50% - 450px); font-family: Segoe Ui; width: 1000px; color: #E0E0E0; opacity: 0.9; transform: rotateY(50deg); text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0px 1px 25px rgba(255,255,255,0.85);
}
.trustUS > span { color: #D50000; font-size: 220px; text-shadow: 0 19px 38px rgba(213,0,0,0.30), 0px 1px 25px rgba(213,0,0,0.85);
}
.wewont { position: fixed; font-size: 65px; left: calc(50% - 660px); top: calc(50% - 170px); font-family: Segoe Ui; width: 1000px; color: #E0E0E0; opacity: 0.9; transform: rotateY(50deg); text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0px 1px 25px rgba(255,255,255,0.85);
}
.forget{ position: fixed; font-size: 65px; left: calc(50% - 600px); top: calc(50% - 105px); font-family: Segoe Ui; width: 1000px; color: #E0E0E0; opacity: 0.9; transform: rotateY(50deg); text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0px 1px 25px rgba(255,255,255,0.85);
}
.you { position: fixed; font-size: 140px; left: calc(50% - 455px); top: calc(50% - 270px); font-family: Segoe Ui; width: 1000px; color: #E0E0E0; opacity: 0.9; transform: rotateY(50deg); text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0px 1px 25px rgba(255,255,255,0.85);
}
MEMOREYES - Script Codes
MEMOREYES - Script Codes
Home Page Home
Developer Keyon
Username Keyon
Uploaded January 10, 2023
Rating 3
Size 2,914 Kb
Views 4,048
Do you need developer help for MEMOREYES?

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!

Keyon (Keyon) Script Codes
Name
Polaroid Snap Realistic
Material Vintage - Modal
Notepad Project Neon
Play of the Game
Cloud OS
Simple Login
Gooey mouse follow
Profile Box
Zelda Breath of the Wild Cartridge
Switch Logo
Create amazing sales emails 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!