CSS Chrome safari で動かない

回答率: 85.48%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ CSSに関する質問

Q&A

解決済

1回答

1098閲覧

CSS Chrome safari で動かない

総合スコア7

0グッド

0クリップ

投稿2019/09/03 04:19

編集2019/09/04 00:21

0

0

CSSで波紋を作りたいと思い、ネット上を検索し、CSSをコピペ下のですが、
firefoxでしか動きません。
どこが問題なのかわかりません。

試したこと

ベンダープレフィックスはつけてみましたが動きません。
各ブラウザのキャシュは消しました。

html,
body {
  margin: 0;
  background: #45c2c5;
}

div {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
  width: 40px;
  line-height: 40px;
}
h1 {
  font-size: 50px;
  color: white;
  text-shadow: 0 2px 0 #8ed2d4, 2px 3px 15px rgba(0, 0, 0, 0.5);
}
.ripple,
.ripple:before,
.ripple:after {
  display: block;
  border-radius: 2px;
  width: 2px;
  height: 2px;
  animation: rip 6s infinite ease-out;
}
.ripple {
  position: absolute;
  z-index: -1;
  top: 40px;
  left: 15px;
}
.ripple:before,
.ripple:after {
  content: "";
  position: absolute;
}
.ripple:before {
  -webkit-animation-delay: 0.2s;
  top: 5px;
  left: 25px;
}
.ripple:after {
  -webkit-animation-delay: 0.8s;
  top: 25px;
  left: 0;
}
@keyframes rip {
  0% {
    box-shadow: 0 0 0 0 transparent,
  0 0 0 0 transparent,
    0 0 0 0 transparent,
      0 0 0 0 transparent;
  }
  15% {
    box-shadow:
      0 0 0 0 #45c2c5,
     0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 0 #45c2c5,
       0 0 0 0 rgba(0, 0, 0, 0.08);
  }
  100% {
    box-shadow: 
    0 0 40px 200px #45c2c5, 
    0 0 10px 210px transparent,
      0 0 30px 220px #45c2c5, 
      0 0 5px 230px transparent;
  }
}

html
1
2<html>
3
4<link type="text/css" rel="stylesheet" href="css/h_style.css" />
5
6
7<body>
8
9<div>
10  <h1>波紋</h1>
11  <span class="ripple"></span>
12</div>
13</body>
14
15</html>

リンク内容

2019/09/03 04:46

コードはマークダウンのcode機能を利用してご提示ください https://teratail.com/help#about-markdown

2019/09/03 04:54

winのchromeだと動きましたけど、想定するOSは？

2019/09/03 04:56

MacOS Mojava です。

2019/09/03 05:04

質問は編集できますので。適宜ご対応ください。

2019/09/03 05:11

@m.ts10806様すみません。書き直しました。

2019/09/03 05:14

HTMLは？

2019/09/03 08:16

>ネット上を検索し、CSSをコピペ下のですがそのコピペもとのURLもご提示ください。

行動規範の内容に同意します

回答1件

0

ベストアンサー

コピペ元のコードコピペしたら動きました。
(IE11,Edge,Chrome,FireFox)

html
1<!doctype html>
2<html lang="ja">
3<head>
4<style>
5html,
6body {
7  margin: 0;
8  background: #45c2c5;
9}
10
11div {
12  display: block;
13  position: absolute;
14  top: 50%;
15  left: 50%;
16  margin: -20px 0 0 -20px;
17  width: 40px;
18  line-height: 40px;
19}
20h1 {
21  font-size: 50px;
22  color: white;
23  text-shadow: 0 2px 0 #8ed2d4, 2px 3px 15px rgba(0, 0, 0, 0.5);
24}
25.ripple,
26.ripple:before,
27.ripple:after {
28  display: block;
29  border-radius: 2px;
30  width: 2px;
31  height: 2px;
32  animation: rip 6s infinite ease-out;
33}
34.ripple {
35  position: absolute;
36  z-index: -1;
37  top: 40px;
38  left: 15px;
39}
40.ripple:before,
41.ripple:after {
42  content: "";
43  position: absolute;
44}
45.ripple:before {
46  animation-delay: 0.2s;
47  top: 5px;
48  left: 25px;
49}
50.ripple:after {
51  animation-delay: 0.8s;
52  top: 25px;
53  left: 0;
54}
55@keyframes rip {
56  0% {
57    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent,
58      0 0 0 0 transparent;
59  }
60  15% {
61    box-shadow: 0 0 0 0 #45c2c5, 0 0 0 0 rgba(255, 255, 255, 0.4),
62      0 0 0 0 #45c2c5, 0 0 0 0 rgba(0, 0, 0, 0.08);
63  }
64  100% {
65    box-shadow: 0 0 40px 200px #45c2c5, 0 0 10px 210px transparent,
66      0 0 30px 220px #45c2c5, 0 0 5px 230px transparent;
67  }
68}
69</style>
70	</head>
71<body>
72<div>
73  <h1>foo</h1>
74  <span class="ripple"></span>
75</div>
76</body>
77
78</html>

差分

投稿2019/09/04 00:26

編集2019/09/04 00:58

総合スコア80850

2019/09/04 01:00

ありがとうございました。こちらをコピペしたら動きました。原因は解らずですが、したい事はできたので。

2019/09/04 01:04

最近はベンダープレフィクスは不要かと思います。差分を貼っておきました。念のため元コードもコピペしなおしてみてください。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ CSSに関する質問

CSS Chrome safari で動かない