Windowsのミラーリングに関する備忘録
Windowsのミラーリングに関する備忘録
てすと
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Messages Macintosh Screensaver | After Dark in CSS</title>
<meta name="description" content='Experience an After Dark-style Messages screensaver that says "Can you celebrate?" in a crawling marquee, rendered entirely in CSS.'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/* ball styling */
.message {
display: block;
width: 467px;
margin: 0;
color: white;
position: absolute;
font-size: 20px;
/* ball animation */
-webkit-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
-moz-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
-o-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate ;
}
/* --------Responsive for less than 600px width screen size--------- */
@media screen and (max-width:600px){
.message{
width: 160px;
height: 85px;
/* border: 3px solid yellow; */
}
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of message */
from { left: 0; } to { left: calc(100% - 160px); }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: calc(100% - 160px); }
}
@-o-keyframes moveX {
from { left: 0; } to { left: calc(100% - 160px); }
}
@keyframes moveX {
from { left: 0; } to { left: calc(100% - 160px); }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
@-o-keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
@keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
}
/* --------Responsive for greater than 600px width screen size--------- */
@media screen and (min-width:600px){
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of message */
from { left: 0; } to { left: calc(100% - 467px); }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: calc(100% - 467px); }
}
@-o-keyframes moveX {
from { left: 0; } to { left: calc(100% - 467px); }
}
@keyframes moveX {
from { left: 0; } to { left: calc(100% - 467px); }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
@-o-keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
@keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Messages Screensaver 2 - After Dark in CSS</h1>
<h2 class="message">Why are you staring at my Macintosh?</h2>
</body>
</html>
てすと
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Messages Macintosh Screensaver | After Dark in CSS</title>
<meta name="description" content='Experience an After Dark-style Messages screensaver that says "Can you celebrate?" in a crawling marquee, rendered entirely in CSS.'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/* ball styling */
.message {
display: block;
width: 467px;
margin: 0;
color: white;
position: absolute;
font-size: 20px;
/* ball animation */
-webkit-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
-moz-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
-o-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate ;
}
/* --------Responsive for less than 600px width screen size--------- */
@media screen and (max-width:600px){
.message{
width: 160px;
height: 85px;
/* border: 3px solid yellow; */
}
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of message */
from { left: 0; } to { left: calc(100% - 160px); }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: calc(100% - 160px); }
}
@-o-keyframes moveX {
from { left: 0; } to { left: calc(100% - 160px); }
}
@keyframes moveX {
from { left: 0; } to { left: calc(100% - 160px); }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
@-o-keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
@keyframes moveY {
from { top: 0; } to { top: calc(100% - 85px); }
}
}
/* --------Responsive for greater than 600px width screen size--------- */
@media screen and (min-width:600px){
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of message */
from { left: 0; } to { left: calc(100% - 467px); }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: calc(100% - 467px); }
}
@-o-keyframes moveX {
from { left: 0; } to { left: calc(100% - 467px); }
}
@keyframes moveX {
from { left: 0; } to { left: calc(100% - 467px); }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
@-o-keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
@keyframes moveY {
from { top: 0; } to { top: calc(100% - 26px); }
}
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Messages Screensaver 2 - After Dark in CSS</h1>
<h2 class="message">Why are you staring at my Macintosh?</h2>
</body>
</html>