css炫酷标题,纯css3鼠标滑过图片炫酷标题显示特效
很多网站的图片鼠标滑过显示标题效果都是使用jQuery来完成的，现在，我们可以使用CSS3 animations来完成同样惊艳的效果。如果你对CSS3 animations还不了解，请先阅读CSS3 animations。
HTML
我们使用html5来制作这款插件。通过figure和figcaption来包装图片。4个demo中html结构都是相同的。
I love this title!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More
DEMO1 CSS
在demo1中，将figure元素的position设置为相对定位(relative)。在这个例子中，标题和图片可以通过绝对定位相互堆叠到一起。
img {width: 100%;}
figure {
margin: 0;
padding: 0;
height: 300px;
position: relative;
display: block;
cursor: pointer;
overflow: hidden;
border: 3px solid #fff;
}
figure:hover figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
top: 0;
}
figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
top: -100%;
background: rgba(0,0,0,.5);
color: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
-ms-transition-delay: .5s;
transition-delay: .5s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
figcaption h3 {
font-family: 'Open sans';
font-weight: 400;
color: #f3b204;
padding: 10px 20px;
margin-bottom: 0;
position: relative;
left: 100%;
margin-top: 37px;
font-size: 30px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
transition: all .5s;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
}
figcaption p {
font-family: 'Open sans';
padding: 10px 20px;
margin-bottom: 0;
margin-top: 20px;
position: relative;
left: 100%;
font-size: 13px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
transition: all .5s;
-webkit-transition-delay: 1.3s;
-moz-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
transition-delay: 1.3s;
}
figure:hover h3,figure:hover p { left: 0; }
figcaption a {
color: #fff;
border: 2px solid #fff;
padding: 4px 10px;
text-decoration: none;
}
figcaption a:hover {
color: #4f5856;
background: #fff;
}
注意：在figcaption上使用transition来旋转它，这将使标题有一个非常好的旋转和圆滑的过渡效果。在某些h3和p元素上使用了transition-delay，这使得它们在动画中有一些延迟。
其它demo的css代码请参考下载文件。
相关文章：
学习成长就到鸿蒙思维,庆国庆，迎中秋，鸿蒙教育享双节99元开启思维之旅！！...
原标题：庆国庆，迎中秋，鸿蒙教育享双节99元开启思维之旅！！庆国庆，迎中秋，鸿蒙教育享双节99元开启思维之旅！！鸿蒙口才＋绘画课推出99元体验课程！学1科…
String拼接字符串效率低，你知道原因吗？
面试官Q1：请问为什么String用""拼接字符串效率低下，最好能从JVM角度谈谈吗？ 对于这个问题，我们先来看看如下代码： public class StringTest {public static void main(String[] args) {String a "abc&…
oracle01003,ORA-01003:nostatementparsed-Oracle
手贱，故意删除了一张表，在OGG同步数据的同时，删除之后立刻报错，如下：OCI Error ORA-12096: error in materialized view log on "JTINFO"."TBL_USERID"ORA-01003: no statement parsed (status 1…
笔记一：python安装和执行
一：学习内容 python安装python简介python执行二：python安装 1. 下载python，网地址：https://www.python.org/，进入地址后，点击下载downloads下的windows 2. 进入下载页后，选择要下载的版本和类型…
一个客户机-服务器系统使用了卫星网络,客户机／服务器体系结构可用于局域网、广域网和WWW。这三种用途迥异的网络的一个共同特点是工作负 - 试题答案网问答...
相关题目与解析关于客户机/服务器体系结构的错误说法是()A.曾经是一种流行的结构B.可用于广域网C.不可用于万●C/S(客户机/服务器)与B／S(浏览器服务器)体系结构的区别是：(57)。(57)A．B/S建立在局域网上，C/S●C/S(客户机/服务器)与…
android 初始化语言,3.4.1 Android初始化语言（1）
3.4 init.rc文件解析过程init.rc文件按照一定的格式组织，要分析init.rc文件的解析过程，首先要熟悉它的格式。init.rc的文件格式由Android初始化语言(Android Init Language)定义，所以这里首先分析Android初始化语言。3.4.1 Android初始化语…
[bzoj3673/3674可持久化并查集加强版]
n个集合 m个操作 操作： 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a,b是否属于同一集合，是则输出1否则输出0 0<n,m<2*10^5 强制在线。 这两题一题都一样，另一题比较水，nm只有2*10^4,允许…
[Manthan, Codefest 18][Codeforces 1037E. Trips]
题目链接：1037E - Trips 题目大意：有n个人，m天，每天晚上都会有一次聚会，一个人会参加一场聚会当且仅当聚会里有至少k个人是他的朋友。每天早上都会有一对人成为好朋友，问每天晚上最多能有多少人参加聚会。朋…
oracle 10g undo 管理,Oracle 10g undo表空间管理
一、oracle 9i起，有两种undo管理方式：AUM Automatic Undo ManagementMUN Manual Undo Management建议使用 AUM ，下面只讨论AUM一、Oracle 9i起，有两种undo管理方式：AUM Automatic Undo ManagementMUN Manual Undo Mana…
电子狗显示连接不上服务器,大家觉得我这样做得对吗?行车记录仪新名词：云狗...
“云”概念化已经成为新轮的市场趋势，些行车记录仪品牌已经加入云狗功能，云狗普通的电子狗有什么区别？“云”概念对于行车记录仪行业发展的意义何在？何谓“云电子狗”？云电子狗指通过无线互联网络具备实时与中…
织梦html引入html代码,织梦标签引入共html.doc
织梦标签引入共html1.无法在这个位置找到: {dede:include filename"织梦模板include插入非模板目录文件出现“无法在这个位置找到”错误的解决办法以下是dede V55_UTF8查dede include标签手册(3) include 引入一个文件，形式为：{dede:include file文…
AutoMapper用法
AutoMapper是对象到对象的映射工具。在完成映射规则之后，AutoMapper可以将源对象转换为目标对象。 作者：齐飞 原文：http://www.qeefee.com/article/automapper 配置AutoMapper映射规则 AutoMapper是基于约定的，因此在实用映射之前…
【洛谷习题】小A点菜
虽然也是一道dp的入门题，但就是想不到，或者说不会实现。dp还是要多做题。 链接：https://www.luogu.org/problemnew/show/P1164 我们可以设dp[i][j]表示以考虑完第i件，恰好消费j元的方案数。那么dp[i][j]dp[i-1][j]dp[i-1][j-a[i]]…
加载服务器版本信息,传奇服务器端启动加载错误的解决方法
1、启动服务端M2报错的类型2、错误分类，思路理清3、文字总结以下常见现象传奇服务器端启动加载错误解决方法Exception] 物品数据库加载错误![Exception] 魔法数据库加载错误!!! 地图数据加载错误.Code -1 加载Guardlist.txt时出现错误.Code -1 加载MakeItem.txt时出…
股票移动平均线matlab,股票的移动平均线 (图文)
股票的移动平均线【泸指】股票的移动平均线移动平均线是个强大的工具，能够更清晰地展示一系列无规律的数值变化 (比如股市波动)。此外，泸指移动平均线还可别除任何周期性变化(正常的季节性温度变化)的影响，便于我们观察到真正的趋势变化。移动…
htcd816+android密码,HTC Desire 816刷机解锁教程
一、解锁前的准备：1.解锁将会丢失所有数据，请先做好备份，如电话本、短信、照片、应用程序。2.下载并安装驱动程序HTC Driver。3.注册HTC Dev帐号，为提交解锁码做好准备。4.下载并解压 “Desire 816 解锁工具”：5.手机关…
BZOJ1058 [ZJOI2007]报表统计 set
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ1058.html 题目传送门 - BZOJ1058 题解 考虑用两个 multiset 分别维护两个答案。 一个直接按照权值维护，另一个维护一下相邻位置的差。 比较容易想到如何维护的吧，不多讲，看代码吧。 代码…
扫描服务器端口信息工具,服务器端口扫描工具
服务器端口扫描工具 内容精选换一换2.3.2 端口扫描Internet上的大部分服务都使用一种基于TCP/IP协议的客户机/服务器的模式。在这种模式下，服务器端在某个TCP或UDP(User Datagram Protocol，用户数据报协议)的端口处于侦听状态，等待客户端程序…
python-Django-01基础配置
参考资料地址 http://www.ziqiangxuetang.com/django/django-install.html 官方文档 一： 1先下载Django源码包，下载地址https://www.djangoproject.com/download/ 然后下载自己想安装的版本 Django 1.5.x 支持 Python 2.6.5 Python 2.7, Python 3.2 和 3…
linux进程 网络占用率,linux CPU SI软中断比较占用率比较大（网络解决方案）
https://my.oschina.net/323148/blog/724408irq 默认linux自动启动的，但是往往它自己控制不是很好(CPU SI经常某个CPU占用大)通常碰到大流量的，通常我们会把自动启动的irqblance关闭，然后手动指定一下IRQ进行优化：看CPU的 si利用率…
android设备未指定怎么办,APKpath未指定为模块“示例 – 示例”
退出Android工作室 。 用pipe理员权限启动它。这解决了Windows 7中的 Android Studio v0.1的问题。我有同样的问题，我没有select 2个文件，然后收到错误"ERROR: APK path is not specified for module"我刚刚重新启动Android Studio并重新打开该…
链表 -- 双向循环链表(线性表）
1，双向链表也叫双链表，是链表的一种，它的每个数据结点中都有两个指针，分别指向直接后继和直接前驱。所以，从双向链表中的任意一个结点开始，都可以很方便地访问它的前驱结点和后继结点。一般我们都构造双向循…
开发脚本自动部署及监控
1.编写脚本自动部署反向代理、web、nfs； 要求： I、部署nginx反向代理三个web服务，调度算法使用加权轮询； #!/bin/shngxStatusps aux | grep -v grep |grep -c nginxfunction ngxProxyInstall() { if [ -e /usr/sbin/nginx ];the…
服务器日志显示乱码,CentosOS 6.5 服务器 控制台输出中文乱码，日志打印中文也乱码...
系统是Centos 6.5使用localeLANGen_US.UTF-8LC_CTYPE"en_US.UTF-8"LC_NUMERICzh_CN.UTF-8LC_TIME"en_US.UTF-8"LC_COLLATE"en_US.UTF-8"LC_MONETARYzh_CN.UTF-8LC_MESSAGES"en_US.UTF-8"LC_PAPERzh_CN.UTF-8LC_NAMEzh_CN.UTF-8LC_ADDR…
go linux 源码编译环境,Linux 源码安装 GO 环境
Go 安装1.4以上的版本出现的问题个人在安装 go1.9.2 的时候，一直 提醒的错误是：Building Go bootstrap tool.cmd/distERROR: Cannot find /root/go1.4/bin/go.Set $GOROOT_BOOTSTRAP to a working Go tree > Go 1.4.步骤如果之前已经安装过老版本的 G…
django html数据库连接,Django数据库连接的问题
多线程运行项目。有N个工作线程从DB中获取jobs，并把结果写回DB。项目运行一段时间后，发现数据库连接耗尽了，幸好内存大，然后一直往上调，最后连接数都上8000多。耗尽连接数的时候，postgresql会出现类似这样的…
Java Web之XML基础
有好几天没有更新博客了，前段时间因为要开学了，需要凑足学费才能继续在学校学习，耽误了几天，这两天需要补充前面需要学习的一些知识点了。今天就开始进入JavaWeb阶段吧，这段时间我们需要了解一些前端的知识，…
ios NSLayoutConstraint
为了让我们的应用在不同尺寸的屏幕下都能 “正常”的表示，我们尽量不要把数据写死。大多数可视元素都是一个矩形区域，当然这个矩形区域有坐标的，我们有了这个区域坐标就能确定可视元素的现实位置了。但是iphone5和以前的屏幕不一样了…
分布式技术追踪 2017年第十二期
分布式系统实践 1. 深入Facebook图数据库系统（TAO）系列 http://dwz.cn/5zQEdo http://dwz.cn/5zQEBK http://dwz.cn/5zQEPV 摘要: TAO是Facebook 的分布式图数据库, 存储了Facebook所有的社交关系数据, TAO的QPS超过30亿, 作者曾经在Facebook做过TAO相关…
linux 统计日志数量总,shell统计日志中时间段内匹配的数量的方法
shell统计日志中时间段内匹配的数量的方法，有需要的朋友可以参考下。假设日志文件mtasvr.log格式如下：T:24583088(04:02:06)[root:Info] 6KqowLDLAgC93DFIKrENAA.41S2:from,to, queuedT:122428336(13:36:51)[root:Info] 6KqowLAbAAByYzJIZGsOAA.2W:from,…