تعلم البلوجر هكركوز الكويت: قوس قزح ucoz

الأربعاء

قوس قزح ucoz

عدد المشاهدات الان

الاضافه css

@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700');
body{
font-family: 'Nunito', sans-serif;
background: #2e0c35;
}

.a{color: #e03b42}
.b{color: #e27c13}
.c{color: #e8db0c}
.d{color: #11a25a}
.e{color: #12a7bd}
.f{color: #722382}

.amsurem-kimsadelar{
margin-top: 150px;
}

.text-center {
text-align: center;
}

.rainbow {
background-color: #464c52;
border-radius: 4px;
color: #f5efef;
cursor: pointer;
padding: 10px 15px;
border: 2px solid #a9a5a5;
box-shadow: 0px 4px 10px rgba(183, 180, 180, 0.38), 0px 10px 30px -15px rgba(37, 36, 36, 0.72);
}

.pervaya:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
animation:slidebg 5s linear infinite;
}

.vtoraya:hover {
background-image: linear-gradient(to right, #ff1212, #ec9e0d, #f1f10c, #0b860b, #0a0af3, #4d0582, #ec7cec, #f91111);
animation: slidebg 2s linear infinite;
}

.vetusa:hover{
background-image: linear-gradient(to right, #ff1212, #ec9e0d, #f1f10c, #0b860b, #0a0af3, #4d0582, #ec7cec, #f91111);
animation:slidebg 2s linear infinite;
}

.ketvebsa:hover{
background-image: linear-gradient(
to right,
#de343b,
#e47f18,
#f1e309,
#099851,
#10b4cc,
#702380
);
animation:slidebg 2s linear infinite;
}

@keyframes slidebg {
to {
background-position:20vw;
}
}

HTML

<div class="container text-center">
<h1 class=""> القائمه</h1>
<a class="rainbow rainbow-1">تعديل<a/>
<a class="rainbow rainbow-2">تعديل<a/>
<a class="rainbow rainbow-3">تعديل<a/>
<a class="rainbow rainbow-4">تعديل<a/>
<a class="rainbow rainbow-5">تعديل<a/>
<div>

المصدر

https://codepen.io/kocsten/pen/OJPXZJx

اذا حبيت نسخ المقالهـ