回答編集履歴

1

chousei

2021/04/21 02:54

投稿

yambejp
yambejp

スコア116728

test CHANGED
@@ -1,4 +1,6 @@
1
1
  marqueeは廃止されたので、cssのキーフレームで処理します
2
+
3
+ ※blinkも追記しておきました
2
4
 
3
5
  ```css
4
6
 
@@ -14,23 +16,15 @@
14
16
 
15
17
  }
16
18
 
17
-
18
-
19
19
  .marquee > *{
20
20
 
21
21
  display:inline-block;
22
22
 
23
- padding-left:600px;
23
+ padding-left:600px;
24
24
 
25
25
  white-space:nowrap;
26
26
 
27
- animation-name:marquee;
28
-
29
- animation-timing-function:linear;
30
-
31
- animation-duration:5s;
32
-
33
- animation-iteration-count:infinite;
27
+ animation:marquee linear 5s infinite;
34
28
 
35
29
  }
36
30
 
@@ -42,9 +36,31 @@
42
36
 
43
37
  }
44
38
 
39
+ @keyframes blink {
40
+
41
+ from{ opacity:0;}
42
+
43
+ to { opacity:1;}
44
+
45
+ }
46
+
47
+ .blink{
48
+
49
+ animation:blink linear 1s infinite;
50
+
51
+ }
52
+
53
+ .bold{
54
+
55
+ font-weight:bold;
56
+
57
+ }
58
+
45
59
  </style>
46
60
 
61
+ <div class="blink bold">この部分を点滅</div>
62
+
47
- <div class="marquee"><div><img src="hoge.jpg" alt="img" ></div></div>
63
+ <div class="marquee"><div><img src="#" alt="img"></div></div>
48
64
 
49
65
  <div class="marquee"><span>testtesttesttesttesttest</span></div>
50
66