Project

General

Profile

Actions
Copy link

Feature #61

closed

TopページのDescriptionSectionのメッセージ修正

Added by 關山 和丈 about 1 year ago. Updated about 1 year ago.

Status:
Closed
Priority:
Normal
Assignee:
-
Start date:
11/28/2024
Due date:
11/28/2024
% Done:

0%

Estimated time:
1:00 h
Spent time:
2:18 h

Files

スクリーンショット 2024-11-26 17.59.05.png (98.9 KB) スクリーンショット 2024-11-26 17.59.05.png 關山 和丈, 11/26/2024 08:59 AM
Actions
Copy link
 #1

Updated by 關山 和丈 about 1 year ago

  • Subject changed from メッセージ、文言修正 to DescriptionSectionのメッセージ修正
Actions
Copy link
 #2

Updated by 關山 和丈 about 1 year ago

  • Subject changed from DescriptionSectionのメッセージ修正 to TopページのDescriptionSectionのメッセージ修正
  • Due date changed from 12/10/2024 to 11/21/2024
  • Start date changed from 12/10/2024 to 11/21/2024
Actions
Copy link
 #3

Updated by 關山 和丈 about 1 year ago

MVVの内容に変更

Actions
Copy link
 #4

Updated by 關山 和丈 about 1 year ago · Edited

https://baigie.me/officialblog/2021/02/25/css-tips-1/

鳥が飛ぶHTML

<div class="bird"></div>
<div class="bird -type_2"></div>
<div class="bird -type_3"></div>

鳥が飛ぶcss

.bird {
  position: absolute;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  animation: moving 16s linear infinite;
}

.bird.-type_2 {
  animation-delay: 1s;
}
.bird.-type_2:before,
.bird.-type_2:after {
  animation-delay: -2s;
}

.bird.-type_3 {
  animation-delay: 3s;
}

@keyframes moving {
  0% {
    top: 47vh;
    left: -2vw;
  }
  25% {
    top: 51vh;
    left: 23vw
  }
  100% {
    top: 47vh;
    left: 101vw;
  }
}

.bird:before, .bird:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: black;
  transform: rotate(-30deg);
  transform-origin: right bottom;
}

.bird:before {
  width: 100%;
  height: 1px;
  animation: leftWing 8s linear infinite;
}
.bird:after {
  width: 1px;
  height: 100%;
  animation: rightWing 8s linear infinite;
}

@keyframes leftWing {
  0%   { transform: rotate(-30deg); }
  2%   { transform: rotate(-110deg); }
  4%   { transform: rotate(-30deg); }
  6%   { transform: rotate(-110deg); }
  8%   { transform: rotate(-30deg); }
  10%  { transform: rotate(-110deg); }
  12%  { transform: rotate(-30deg); }
  30%  { transform: rotate(-30deg); }
  42%  { transform: rotate(-35deg); }
  72%  { transform: rotate(-35deg); }
  74%  { transform: rotate(10deg); }
  76%  { transform: rotate(-30deg); }
  78%  { transform: rotate(-110deg); }
  80%  { transform: rotate(-30deg); }
  82%  { transform: rotate(-110deg); }
  84%  { transform: rotate(-30deg); }
  86%  { transform: rotate(-110deg); }
  88%  { transform: rotate(-30deg); }
  90%  { transform: rotate(-110deg); }
  92%  { transform: rotate(-30deg); }
  94%  { transform: rotate(-110deg); }
  96%  { transform: rotate(-30deg); }
  98%  { transform: rotate(-110deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes rightWing {
  0%   { transform: rotate(30deg); }
  2%   { transform: rotate(110deg); }
  4%   { transform: rotate(30deg); }
  6%   { transform: rotate(110deg); }
  8%   { transform: rotate(30deg); }
  10%  { transform: rotate(110deg); }
  12%  { transform: rotate(30deg); }
  30%  { transform: rotate(30deg); }
  42%  { transform: rotate(35deg); }
  72%  { transform: rotate(35deg); }
  74%  { transform: rotate(0deg); }
  76%  { transform: rotate(30deg); }
  78%  { transform: rotate(110deg); }
  80%  { transform: rotate(30deg); }
  82%  { transform: rotate(110deg); }
  84%  { transform: rotate(30deg); }
  86%  { transform: rotate(110deg); }
  88%  { transform: rotate(30deg); }
  90%  { transform: rotate(110deg); }
  92%  { transform: rotate(30deg); }
  94%  { transform: rotate(110deg); }
  96%  { transform: rotate(30deg); }
  98%  { transform: rotate(110deg); }
  100% { transform: rotate(30deg); }
}

/****** Base style. ******/
body {
  overflow: hidden;
  height: 100vh;
  margin: 0;
}
Actions
Copy link
 #5

Updated by 關山 和丈 about 1 year ago

  • Status changed from New to Closed
Actions
Copy link

Also available in: Atom PDF