462122
ホーム \| 日記 \| プロフィール	【フォローする】【ログイン】

プログラミング好きなきょうゆうくんのブログ

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! --/--

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

プロフィール

きょうゆうくん

フォローする

カレンダー

バックナンバー

2024.11
2024.10
2024.09
2024.08
2024.07

2024.06
2024.05
2024.04
2024.03
2024.02

カテゴリ

カテゴリ未分類

(410)

プログラミング

(3)

python

(315)

html

(37)

javascript

(121)

VC#

(79)

php

(120)

小技

(18)

android studio

(32)

料理

(5)

詐欺

(17)

SQL

(7)

VC++

(5)

用語

(3)

ubuntu

(0)

node.js

(13)

生活用品

(78)

映画

(4)

韓流・華流

(123)

ジュエリー

(56)

調べもの

(72)

ファッション

(4)

タイドラマ

(1)

歴史

(44)

お菓子

(3)

玩具

(1)

3DCG

(0)

ことわざ

(1)

blender

(96)

Vue.js

(22)

TypeScript

(3)

css

(30)

コミック

(3)

android

(1)

日記/記事の投稿

python sqlite3 excuteとexcutemanyの時間差
termuxでopenssh スマフォへlinuxのようにPCからssh login
ボーイフレンド
花青歌
韓国ドラマ　アンクル

コメント新着

コメントに書き込みはありません。

キーワードサーチ

▼キーワード検索

< 新しい記事

新着記事一覧(全1727件)

過去の記事 >

2024.08.02

css keyframesで遊ぶ

カテゴリ：css

1秒間で位置、サイズ、色が変化します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>keyframes</title>
  <style>

.box {
      position: relative;

      top:200px;
      left:300px;
      width: 50px;
      height: 50px;
      background-color: rgb(132, 0, 255);
      animation-name: slidebox;
      animation: slidebox 1s linear infinite;
    }

    @keyframes slidebox {
            0% {
                width: 50px;
                height: 50px;
                transform: translate(0px,0px);
                background-color: rgb(132, 0, 255);
            }
            30% {
                width: 200px;
                height: 200px;
                transform: translate(100px,0px);
                background-color: rgb(255, 0, 0);
            }
            50% {
                width: 100px;
                height: 100px;
                transform: translate(100px,100px);
                background-color: rgb(0, 255, 13);            }
            80% {
                width: 300px;
                height: 300px;
                transform: translate(0px,100px);
                background-color: rgb(68, 0, 255);
            }
            100% {
                width: 50px;
                height: 50px;
                transform: translate(0px,0px);
                background-color: rgb(132, 0, 255);
            }
        }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>