Pure CSS3 Face Animation & Web Visibility

Developer
Karsten Buckstegge
Size
5,754 Kb
Views
40,480
  1. Pure CSS3 Face Animation & Web Visibility Previews
  2. Pure CSS3 Face Animation & Web Visibility HTML Codes
  3. Pure CSS3 Face Animation & Web Visibility CSS Codes
  4. Pure CSS3 Face Animation & Web Visibility JS Codes

How do I make an pure css3 face animation & web visibility?

Playing around with the Web Visibility API and some CSS3 faces.. What is a pure css3 face animation & web visibility? How do you make a pure css3 face animation & web visibility? This script and codes were developed by Karsten Buckstegge on 10 September 2022, Saturday.

Pure CSS3 Face Animation & Web Visibility Previews
IQ Test

Pure CSS3 Face Animation & Web Visibility - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Face Animation & Web Visibility</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ @charset "UTF-8";
body { font-family: 'Gloria Hallelujah', cursive; font-size: 20px; line-height: 1.5em; transition: background 1s ease-in-out;
}
.face { position: relative; margin: 100px auto; width: 260px; height: 220px; background: radial-gradient(ellipse, #a0f5ff 0%, #3aeaff 95%); border-radius: 50%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.face::after { content: ''; position: absolute; background: #f9857c; transition: all 1s ease-in-out; width: 74.28571px; height: 44px; border-radius: 0 0 90px 90px; top: 157.14286px; left: 123.80952px;
}
.eye { position: absolute; width: 130px; height: 130px; background: #FFF; border-radius: 50%;
}
.eye::before { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; transition: all 1s ease-in-out; background: #444; top: 56.52174px; left: 54.16667px;
}
.eye::after { content: ''; position: absolute; background: #3aeaff; border-radius: 90px 90px 0 0; transition: all 1s ease-in-out; width: 98%; height: 40%; left: 1%;
}
.eye:nth-child(2) { left: 130px;
}
body[data-state='2'] .face::after { width: 70px; height: 10px; border-radius: 0 0 90px 90px; top: 170px; left: 140px; transform: rotate(-15deg);
}
body[data-state='2'] .eye::before { top: 90px; left: 30px;
}
body[data-state='2'] .eye::after { left: -4%; transform: rotate(-10deg);
}
body[data-state='2'] .eye:nth-child(2)::after { left: 6%; transform: rotate(10deg);
}
body[data-state='3'] .face::after { width: 40px; height: 10px; border-radius: 90px 90px; top: 170px; left: 140px;
}
body[data-state='3'] .eye::before { top: 55px; left: 50px;
}
body[data-state='3'] .eye::after { left: 0; height: 50%; width: 100%;
}
body[data-state='4'] .face::after { width: 70px; height: 20px; border-radius: 90px 90px 0 0; top: 170px; left: 140px; transform: rotate(-15deg);
}
body[data-state='4'] .eye::before { top: 60px; left: 50px;
}
body[data-state='4'] .eye::after { height: 50%; width: 100%; left: 4%; transform: rotate(10deg);
}
body[data-state='4'] .eye:nth-child(2)::after { left: -4%; transform: rotate(-10deg);
}
.bubble { position: relative; width: 80%; min-height: 150px; margin: 80px auto; background: #FFF; border-radius: 30px; padding: 1%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); word-wrap: break;
}
.bubble::before { content: "Hey, I'm Apy. \A Welcome to my visible World! \A How nice of you to visit me!"; white-space: pre-wrap; position: absolute; width: 92%; padding: 2% 10%; transition: content 1s ease-in-out;
}
.bubble .pointy-thingy, .bubble::after { content: ''; position: absolute; width: 80px; height: 40px; background: #FFF; border-radius: 90px 90px 0 0; top: -40px; left: 60%;
}
.bubble::after { height: 60px; top: -60px; left: 58%; transition: background 1s ease-in-out;
}
body[data-state="2"] .bubble::before { content: "Oh, you left… \A Well, but you came back. \A Thought, you wouldn't…";
}
body[data-state="3"] .bubble::before { content: "Really, stop doing that! \A Such a pen window gets really boring all by myself!";
}
body[data-state="4"] .bubble::before { content: "Alright, skrew you! \A I don't want you here anymore! \A Leave me and my window alone, you unaccountable piece of $#%7!";
}
body[data-state='1'] { background: #c1ff7f;
}
body[data-state='1'] .bubble::after { background: #c1ff7f;
}
body[data-state='2'] { background: #faff7f;
}
body[data-state='2'] .bubble::after { background: #faff7f;
}
body[data-state='3'] { background: #ffc17f;
}
body[data-state='3'] .bubble::after { background: #ffc17f;
}
body[data-state='4'] { background: #f94a4a;
}
body[data-state='4'] .bubble::after { background: #f94a4a;
}
footer { position: fixed; bottom: 0; width: 100%; padding: 20px; background: rgba(0, 0, 0, 0.4); color: #DDD; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <head> <link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
</head>
<body data-state="1"> <div class="face"> <div class="eye"></div> <div class="eye"></div> </div> <section class="bubble"> <div class="pointy-thingy"></div> </section> <footer>Change browsertabs to piss off Apy!</footer>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS3 Face Animation & Web Visibility - Script Codes CSS Codes

@charset "UTF-8";
body { font-family: 'Gloria Hallelujah', cursive; font-size: 20px; line-height: 1.5em; transition: background 1s ease-in-out;
}
.face { position: relative; margin: 100px auto; width: 260px; height: 220px; background: radial-gradient(ellipse, #a0f5ff 0%, #3aeaff 95%); border-radius: 50%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.face::after { content: ''; position: absolute; background: #f9857c; transition: all 1s ease-in-out; width: 74.28571px; height: 44px; border-radius: 0 0 90px 90px; top: 157.14286px; left: 123.80952px;
}
.eye { position: absolute; width: 130px; height: 130px; background: #FFF; border-radius: 50%;
}
.eye::before { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; transition: all 1s ease-in-out; background: #444; top: 56.52174px; left: 54.16667px;
}
.eye::after { content: ''; position: absolute; background: #3aeaff; border-radius: 90px 90px 0 0; transition: all 1s ease-in-out; width: 98%; height: 40%; left: 1%;
}
.eye:nth-child(2) { left: 130px;
}
body[data-state='2'] .face::after { width: 70px; height: 10px; border-radius: 0 0 90px 90px; top: 170px; left: 140px; transform: rotate(-15deg);
}
body[data-state='2'] .eye::before { top: 90px; left: 30px;
}
body[data-state='2'] .eye::after { left: -4%; transform: rotate(-10deg);
}
body[data-state='2'] .eye:nth-child(2)::after { left: 6%; transform: rotate(10deg);
}
body[data-state='3'] .face::after { width: 40px; height: 10px; border-radius: 90px 90px; top: 170px; left: 140px;
}
body[data-state='3'] .eye::before { top: 55px; left: 50px;
}
body[data-state='3'] .eye::after { left: 0; height: 50%; width: 100%;
}
body[data-state='4'] .face::after { width: 70px; height: 20px; border-radius: 90px 90px 0 0; top: 170px; left: 140px; transform: rotate(-15deg);
}
body[data-state='4'] .eye::before { top: 60px; left: 50px;
}
body[data-state='4'] .eye::after { height: 50%; width: 100%; left: 4%; transform: rotate(10deg);
}
body[data-state='4'] .eye:nth-child(2)::after { left: -4%; transform: rotate(-10deg);
}
.bubble { position: relative; width: 80%; min-height: 150px; margin: 80px auto; background: #FFF; border-radius: 30px; padding: 1%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); word-wrap: break;
}
.bubble::before { content: "Hey, I'm Apy. \A Welcome to my visible World! \A How nice of you to visit me!"; white-space: pre-wrap; position: absolute; width: 92%; padding: 2% 10%; transition: content 1s ease-in-out;
}
.bubble .pointy-thingy, .bubble::after { content: ''; position: absolute; width: 80px; height: 40px; background: #FFF; border-radius: 90px 90px 0 0; top: -40px; left: 60%;
}
.bubble::after { height: 60px; top: -60px; left: 58%; transition: background 1s ease-in-out;
}
body[data-state="2"] .bubble::before { content: "Oh, you left… \A Well, but you came back. \A Thought, you wouldn't…";
}
body[data-state="3"] .bubble::before { content: "Really, stop doing that! \A Such a pen window gets really boring all by myself!";
}
body[data-state="4"] .bubble::before { content: "Alright, skrew you! \A I don't want you here anymore! \A Leave me and my window alone, you unaccountable piece of $#%7!";
}
body[data-state='1'] { background: #c1ff7f;
}
body[data-state='1'] .bubble::after { background: #c1ff7f;
}
body[data-state='2'] { background: #faff7f;
}
body[data-state='2'] .bubble::after { background: #faff7f;
}
body[data-state='3'] { background: #ffc17f;
}
body[data-state='3'] .bubble::after { background: #ffc17f;
}
body[data-state='4'] { background: #f94a4a;
}
body[data-state='4'] .bubble::after { background: #f94a4a;
}
footer { position: fixed; bottom: 0; width: 100%; padding: 20px; background: rgba(0, 0, 0, 0.4); color: #DDD; text-align: center;
}

Pure CSS3 Face Animation & Web Visibility - Script Codes JS Codes

var body = document.body;
var counter = 0;
document.addEventListener('visibilitychange', function(){ if(document.hidden) { if(counter < 3) { counter++; } } else { body.setAttribute('data-state', counter + 1); }
});
Pure CSS3 Face Animation & Web Visibility - Script Codes
Pure CSS3 Face Animation & Web Visibility - Script Codes
Home Page Home
Developer Karsten Buckstegge
Username MrBambule
Uploaded September 10, 2022
Rating 3.5
Size 5,754 Kb
Views 40,480
Do you need developer help for Pure CSS3 Face Animation & Web Visibility?

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!

Karsten Buckstegge (MrBambule) Script Codes
Name
Scalable animated css menu button
A Pen by Karsten Buckstegge
Simple React Slider
Broken TV
The wheel of social fortune
SeXy buttons
Responsive focuspoint on image with object-position
Base64 SVG Me
Even More Brokener TV
Sliding Skill-Diagramm
Create amazing Facebook ads 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!