文档章节

简单的伪元素动画效果

史文帝
 史文帝
发布于 2016/12/01 22:22
字数 232
阅读 7
收藏 0

<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf8">

<title></title>

<style>

.caption2 {

position: relative;

overflow: hidden;

width: 100%;

text-align: center;

}

.caption2::before,

.caption2::after {

position: absolute;

color: #000;

-webkit-transition: -webkit-transform 0.3s ease-in-out;

-moz-transition: -moz-transform 0.3s ease-in-out;

transition: transform 0.3s ease-in-out;

}

.caption2::before {

content: attr(data-title);

left: 42%;

-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

transform: translateY(-100%);

}

.caption2::after {

content: attr(data-description);

right: 42%;

-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

transform: translateY(-100%);

}

 

.caption2:hover::before,

.caption2:hover::after {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

transform: translateY(0);

}

</style>

</head>

 

<body>

<!--伪类与伪元素没有单独的过滤效果,所以思路要先在div类名caption2里面定义一个块,定好宽度高度溢出隐藏后,把伪元素放在看不见的地方,当鼠标停留在该div的时候,就会触发动画效果!-->

<!--这个效果非常的简单,便于学习与入门,动画效果也可以依照该思路该样式即可-->

<div class="caption2" data-title="(" data-description=")">XXXXXX</div>

</body>

</html>

鼠标没有移到该块时:

鼠标移到该块后:

 

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
transform,transition,animation的混合使用——结业篇

css动画的动画制作没有什么特别高深的地方,引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的,但我想要强调的是掌握并深入的理解css的基础,以及灵活的运用是做...

缘自世界
2017/05/24
0
0
前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单   在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(...

grootzhang
2016/05/18
0
0
css3动画简介以及动画库animate.css的使用

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能...

lovethe51cto
2016/01/12
0
0
30 Seconds of CSS代码块解读(动画篇)

30 Seconds of CSS代码块解读(动画篇) 这是第三篇解读,主要包括加载效果,自定义过渡动画函数和下划线动画。其中弹跳加载很具有实用性,可以用于加载组件中,让加载效果更加个性化。 Bounci...

坤少卡卡
07/02
0
0
你所不知道的 CSS 阴影技巧与细节

关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 的用法。 最近一个新的项目,CSS-Inspiration,挖掘了其他很多有关 CSS 阴影的点子,...

chokcoco
11/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基于redis的分布式锁

redisson提供了基于redis的分布式锁实现方式,本文就尝试了下锁的使用方式。Redisson同时还为分布式锁提供了异步执行的相关方法,第二节执行介绍。 一、可重入锁验证 同一个jvm里面同一线程的...

noob_chr
13分钟前
3
0
CPU性能过剩提升乏力影响未来行业发展吗?

虽然CPU仍然在不断发展,但是它的性能已经不再仅仅受限于单个处理器类型或制造工艺上了。和过去相比,CPU性能提升的步伐明显放缓了,接下来怎么办,成为横亘在整个行业面前的大问题。 自201...

linux-tao
15分钟前
1
0
设计模式“6”大原则!

面向对象设计原则 概述 对于面向对象软件系统的设计而言,在支持可维护性的同时,提高系统的可复用性是一个至关重要的问题,如何同时提高一个软件系统的可维护性和可复用性是面向对象设计需要...

Java干货分享
32分钟前
7
0
mybatis学习(1)

JDBC连接方式: 1.底层没有使用连接池,操作数据库需要频繁的创建和关闭连接,消耗资源。 2.写原生的JDBC代码在JAVA中,一旦需要修改SQL的话(比如表增加字段),JAVA需要整体重新编译,不利...

杨健-YJ
今天
5
0
怎么组织文档

可以从以下几个方面考虑组织文档: ☐ 各种分支的界面截图和对应的类及文件 ☐ 框架或类图 ☐ 流程图 ☐ 时序图 ☐ 注意事项

-___-
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部