当前位置：首页 > 网页特效 > 文字效果

7种HTML5 Figure图片字幕标题特效

分类：文字效果日期：2024-05-14 点击(2) 评论(0)

简介

##### HTML结构
该图片标题特效可以直接使用一个<img>元素来制作，也可以使用HTML5 <figure>元素来制作：

```html
<img id="eg1" src="img/sunbreakthrough.jpg" title="An awesome picture caption!" /> 
<figure id="eg6">
  <img src="img/sunbreakthrough.jpg" alt="An awesome picture">  
  <figcaption>An awesome picture caption!</figcaption>
</figure>
```
#####  CSS样式
该特效中给出了最基本的CSS样式，你可以根据需要对figurecaptions.css文件进行修改。

```html
figure, .figurefx{
position: relative;
overflow: hidden;
display: inline-block;
z-index: 2000; /* set this to highest z-index value on your page */
margin: 0;
padding: 0;
}
 
.figurefx img{
position: relative;
display: block;
left: 0;
top: 0;
z-index: 98;
}
 
.figurefx div.veils{
content: '';
width: 100%;
height: 100%;
display: block;
background: black;
position: absolute;
opacity: 0.3;
visibility: hidden;
top: 0;
left 0;
z-index: 99;
}
 
 
.figurefx figcaption{
position: absolute;
left: 0;
top: 50%; /* vertically center caption */
transform: translateY(-50%); /* vertically center caption */
width: 100%;
height: auto;
background: #000;
color: #fff;
padding: 5px 10px;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
z-index: 100;
}
 
.figurefx figcaption a{
text-decoration: none;
}
 
a#stickyhoverfixios{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1999;  /* set this to 2nd highest z-index value on your page */
display: none;
}           
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片标题插件。

```html
$(function(){ 
 $('selector').addCaption({
  //comma separated options
 })
})   
```             
#####  配置参数
|  参数 | 描述  |
| ------------ | ------------ |
| fx  | 'string'  |
|默认值"default"|图片上的标题效果，下面是7种可用的标题效果：|
|"default"：|遮罩层从上向下滑落，标题从左向后滑出。|
|"zoomin"：|当鼠标滑过时图片被放大。|
|"dualpanels"：|遮罩层分别从上面和下面向中间合拢，然后标题出现。|
|"dualpanels2"：|遮罩层分别从左边和右边向中间合拢，然后标题出现。|
|"pushup"：|图片被轻微的向上推，图片标题从下方出现。|
|"flipopen"：|图片翻转，标题在图片下方出现。|
|"flipreveal"：|图片绕X轴旋转180度，然后标题出现。|
|caption:'string，title' 默认值：null|"string"参数表示图片的标题，可以带HTML标签。"title"参数表示使用图片的title标签来作为图片标题。|
|duration: seconds 默认值：0.5|图片标题动画的持续时间，单位毫秒。|

web299.com

7种HTML5 Figure图片字幕标题特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果