文档章节

简单的伪元素动画效果

史文帝
 史文帝
发布于 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
孝感
程序员
前端开发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
jQuery基础知识

》》》jQuery选择器《《《《《 jQuery选择器(对比css选择器): 基础选择器//伪类选择器 css选择器----> $(" ") --->$(" ") jq选择器 >基础选择器: 基本选择器:元素选择器、id选择器、class...

yuanyuan_chen
2016/11/08
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windbg学习记录

我开始熟练使用windbg是从帮助手册开始的,也就是.hh命令。 就像学习windows开发从msdn开始一样,微软的产品虽然不开源,但是文档做的是相当的好。然而那些开源的东西呢?开源的竞争力其实就...

simpower
9分钟前
0
0
学习scala的网站汇总

https://www.codacy.com/blog/how-to-learn-scala/

Littlebox
11分钟前
0
0
配置本地的cloud9开发环境

前言 说到在线IDE开发环境,cloud9是不能绕过的,cloud9支持很多语言,默认支持的就有Node.js,Python,Ruby,PHP,Go,更逆天的是,他还支持数据库,包括MySQL,MongoDB,Redis,SQLite。但...

Kefy
15分钟前
0
0
springcloud应用程序上下文层次结构

如果您从SpringApplication或SpringApplicationBuilder构建应用程序上下文,则将Bootstrap上下文添加为该上下文的父级。这是一个Spring的功能,即子上下文从其父进程继承属性源和配置文件,因...

itcloud
19分钟前
0
0
新程序员最爱的免费资源

简评:国外美女程序员推荐了她自己用过的一些免费资源,对新手比较友好的那种。 原作者 Ali Spittel,是个美女程序员,以下这些资源都是她自己试过的。以下「我」代表 Ali Spittel。 学 HTML...

极光推送
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部