简单的伪元素动画效果
简单的伪元素动画效果
史文帝 发表于1年前
简单的伪元素动画效果
  • 发表于 1年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

<!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>

鼠标没有移到该块时:

鼠标移到该块后:

 

共有 人打赏支持
粉丝 2
博文 15
码字总数 6100
×
史文帝
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: