[英]CSS Animation: How can I put a text using pseudo-element for each image?
我目前有4张图片,我使用CSS动画每隔X秒显示一张不同的图片。 问题是我想为每个图像放置一个唯一的文本。 例如,对于第一个图像,“第一图像”,对于第二个图像,“第二图像”,等等。
这是我的HTML代码:
<div class="wrapper">
<div id="container">
<h1 id="all-available-styles">All available styles</h1>
<div id="all-available-styles-block">
<img src="images/test.jpg" alt="">
<img src="images/test2.jpg" alt="">
<img src="images/test3.jpg" alt="">
<img src="images/test4.jpg" alt="">
</div>
</div>
</div>
我的CSS:
#welcome-to
{
text-align: center;
margin: 0 auto 15px auto;
width: 75%;
}
#all-available-styles
{
text-align: center;
margin-bottom: 25px;
}
#all-available-styles:before, #all-available-styles:after
{
content: "\f122";
display: inline-block;
position: relative;
top: 10px;
}
#all-available-styles:before
{
transform: rotate(250deg);
-webkit-transform: rotate(250deg);
-ms-transform: rotate(250deg);
-moz-transform: rotate(250deg);
margin-right: 5px;
}
#all-available-styles:after
{
margin-left: 5px;
transform: rotate(100deg) scaleX(-1);
-webkit-transform: rotate(100deg) scaleX(-1);
-ms-transform: rotate(100deg) scaleX(-1);
-moz-transform: rotate(100deg) scaleX(-1);
}
#all-available-styles-block
{
position: relative;
height: 281px;
}
#all-available-styles-block img
{
background-color: #FFFFFF;
margin: 0 auto;
padding: 2px;
position: absolute;
right: 0;
left: 0;
animation: allAvailableStylesBlockFadeInOut ease-in-out infinite 8s;
-webkit-animation: allAvailableStylesBlockFadeInOut ease-in-out infinite 8s;
box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
width: 50%;
pointer-events: none;
}
@keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
@-webkit-keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
@-moz-keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
@-o-keyframes allAvailableStylesBlockFadeInOut
{
0%
{
opacity: 1;
}
17%
{
opacity: 1;
}
25%
{
opacity: 0;
}
92%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
#all-available-styles-block img:nth-of-type(1)
{
animation-delay: 6s;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
}
#all-available-styles-block img:nth-of-type(2)
{
animation-delay: 4s;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
}
#all-available-styles-block img:nth-of-type(3)
{
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
}
#all-available-styles-block img:nth-of-type(4)
{
animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
}
结果: http : //screencast.com/t/WPcf8X2b7z
因此,对于每个图像,中间都有一个文本。 我想我可以用:before或:after做到这一点,但是我确实找到了解决方案。
感谢那些会努力帮助我的人。
检查一下:
http://jsfiddle.net/DariuszMusielak/qzrrqryd/
<div class="wrapper">
<div id="container">
<h1 id="all-available-styles">All available styles</h1>
<div id="all-available-styles-block">
<div class='image'>
<img src="http://marcisischo.com/wp-content/uploads/2014/12/TrollFace.png" alt="">
<p> nice troll face 1</p>
</div>
<div class='image'>
<img src="http://img4.wikia.nocookie.net/__cb20130116153004/uncyclopedia/images/c/cb/Internet-troll-face-explorer.png" alt="">
<p> nice troll face 2</p>
</div>
<div class='image'>
<img src="http://www.clipartbest.com/cliparts/dT6/MEb/dT6MEbgEc.gif" alt="">
<p> nice troll face 3</p>
</div>
<div class='image'>
<img src="http://fc02.deviantart.net/fs70/f/2011/074/f/f/kirby_troll_face_by_arashi93_sama-d3bqrxs.jpg" alt="">
<p> nice troll face 4</p>
</div>
</div>
</div>
</div>
在div中移动图像和文本,并添加动画
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.