如何使输入元素闪烁

Question

所以我的工作分配给我一项任务。我们必须闪烁一个输入标签，我搜索了CSS，发现很多都在使用：after:before，因此input是自关闭标签，所以不可能在输入中使用它们。

所以问题是，有没有其他方法可以在不使用：after and：before的情况下闪烁按钮，或者在输入元素上使用：afterand:before？

这是代码示例：https://github.com/shripalm/IntegrationStudio-Sitemap/blob/master/shimmerButtonTest.html

Answer 1

也许它可以帮助你。如果我错了，我会很难过。https://codepen.io/shswanson/pen/VwQKgE

html {
background-color: #333;
}
.button-container{
color: #eee;
cursor: pointer;
overflow: hidden;
height: 75px;
width: 300px;
text-align: center;
vertical-align: middle;
line-height: 75px;
border-style: solid;
border-width: 3px;
border-color: #eee;
border-radius: 5px;
-webkit-transition: 100ms;
-moz-transition: 100ms;
-o-transition: 100ms;
transition 100ms;
}
.button-container:hover {
background-color: #eee;
color: #333;
-webkit-transition: 100ms;
-moz-transition: 100ms;
-o-transition: 100ms;
transition 100ms;
}
.button-text{
width: 300px;
font-family: helvetica;
font-size: 55px;
font-weight: 100; 
z-index: 1;
position: absolute;
}
.button-shimmer {
width: 200px;
height: 100px;
position: relative;
-webkit-animation: shimmer 6s infinite;
-moz-animation: shimmer 6s infinite;
animation: shimmer 6s infinite;
}
@-webkit-keyframes shimmer {
0%   {
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0)));
left: -5000px;
top: 0px;
}

100% {
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0)));
left: 5000px;
top: 0px;}
}
@-moz-keyframes shimmer {
0%   {
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 
left: -5000px;
top: 0px;}
}
100% {
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
left: 5000px;
top: 0px;}
}
@keyframes shimmer {
0%   {
background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
left: -5000px;
top: 0px;
}

100% { 
background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
left: 5000px;
top: 0px;}
}

<center>
<div class="button-container">
<div class="button-text">Click Me!</div>
<div class="background button-shimmer"></div>
</div>
</center

https://codepen.io/macshooo/pen/xrLGWa

body { background: black; }
.error {
position: relative;
display: block;
margin: 25% auto;
color: grey;
background: none;
border: 5px solid grey;
width: 300px;
height: 50px;
font: bold 25px 'Open Sans';
padding-right: 20px;
overflow: hidden;
&::before {
content: '0ab';
position: relative;
opacity: 0;
top: 0;
left: -20px;
transition: 0.5s;
}
&:hover::before {
padding-right: 10px;
opacity: 1;
left: 0;
}
}
.shimmer {
position: absolute;
display: block;
background: rgba(255,255,255, 0.7);
width: 350px;
height: 100px;
transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
transition: all 1.5s cubic-bezier(0.19,1,.22,1);
}
.error:hover{
border-color: white;
color: white;
.shimmer{
transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}
}

<button class="error">
Shimmer Effect
<div class="shimmer"></div>
</button>

输入标签

.wrapper {
width: 0px;
animation: fullView 0.5s forwards linear;
}
.br {
border-radius: 8px;  
}
.w80 {
width: 80%;
}
.card-box {
border: 2px solid #fff;
box-shadow:0px 0px 10px 0 #a9a9a9;
padding: 30px 40px;
width: 80%;
margin: 50px auto;
}
.Pic {
height: 65px;
width: 65px;
border-radius: 50%;
}
.comment {
height: 10px;
background: #777;
margin-top: 20px;
}
.animate {
animation : shimmer 2s infinite;
background: linear-gradient
(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
background-size: 1000px 100%;
}
@keyframes fullView {
100% {
width: 100%;
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}

<div class="card-box br">
<div class="wrapper">
<label>input tag</label>
<input type="text" class="comment br animate w80" placeholder="input shimmer"/>
<div class="comment br animate"></div>
<div class="comment br animate"></div>
</div>
</div>