teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問横に流れていくアニメーションを実装したいです

編集履歴

質問編集履歴

1

CSS間違えていま

2021/12/21 23:44

投稿

Lian07jp
Lian07jp

スコア7

test CHANGED
File without changes
test CHANGED
@@ -46,90 +46,86 @@
46
46
 
47
47
  ```CSS
48
48
 
49
- #works{
49
+ header ul li{
50
50
 
51
- width: 100vw;
51
+ list-style: none;
52
52
 
53
- height: 600px;
53
+ text-align: center;
54
54
 
55
- overflow: hidden;
56
-
57
- display: flex;
58
-
59
- margin: 25px 0;
55
+ margin: 0 auto;
60
56
 
61
57
  }
62
58
 
63
59
 
64
60
 
65
- #works ul{
61
+ header ul li a{
66
62
 
67
- width: auto;
68
-
69
- height: 100%;
70
-
71
- display: flex;
72
-
73
- }
74
-
75
- #works ul img{
76
-
77
- width:auto;
63
+ color:#333;
78
-
79
- height: 100%;
80
64
 
81
65
  }
82
66
 
83
67
 
84
68
 
85
- #works ul:first-of-type{
69
+ .works:hover{
86
70
 
71
+ background-image: url(../img/li1.png);
72
+
87
- animation: loop 50s -25s linear infinite;
73
+ animation-name: slideup;
74
+
75
+ background-repeat: no-repeat;
76
+
77
+ background-size: contain;
78
+
79
+ margin-top: -10px;
88
80
 
89
81
  }
90
82
 
91
- #works ul:last-of-type{
83
+ .blog:hover{
92
84
 
85
+ background-image: url(../img/li2.png);
86
+
93
- animation: loop2 50s linear infinite;
87
+ animation-name: slideup;
88
+
89
+ background-repeat: no-repeat;
90
+
91
+ background-size: contain;
94
92
 
95
93
  }
96
94
 
95
+ .about:hover{
97
96
 
97
+ background-image: url(../img/li3.png);
98
98
 
99
- @keyframes loop {
99
+ animation-name: slideup;
100
100
 
101
- 0% {
101
+ background-repeat: no-repeat;
102
102
 
103
- transform: translateX(100%);
103
+ background-size: contain;
104
104
 
105
- }
105
+ }
106
106
 
107
- to {
107
+ .skills:hover{
108
108
 
109
- transform: translateX(-100%);
109
+ background-image: url(../img/li4.png);
110
110
 
111
- }
111
+ animation-name: slideup;
112
112
 
113
- }
113
+ background-repeat: no-repeat;
114
114
 
115
-
115
+ background-size: contain;
116
116
 
117
- @keyframes loop2 {
117
+ }
118
118
 
119
- 0% {
119
+ .contact:hover{
120
120
 
121
- transform: translateX(0);
121
+ background-image: url(../img/li5.png);
122
122
 
123
- }
123
+ animation-name: slideup;
124
124
 
125
- to {
125
+ background-repeat: no-repeat;
126
126
 
127
- transform: translateX(-200%);
127
+ background-size: contain;
128
128
 
129
- }
129
+ }
130
-
131
- }
132
-
133
-
134
130
 
135
131
  ```