文档章节

简单的伪元素动画效果

史文帝
 史文帝
发布于 2016/12/01 22:22
字数 232
阅读 5
收藏 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
从青铜到王者10个css3伪类使用技巧和运用,了解一哈

写在前面 伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒...

08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
12
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部