てすと


<!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>