简单的伪元素动画效果

最新推荐文章于 2022-04-05 09:59:03 发布

chengzi5521

最新推荐文章于 2022-04-05 09:59:03 发布

阅读量683

点赞数

原文链接：https://my.oschina.net/u/3010603/blog/798518

版权

<!DOCTYPE html>

<html>

<head>

<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 class="caption2" data-title="(" data-description=")">XXXXXX</div>

</body>

</html>

鼠标没有移到该块时：

鼠标移到该块后：

转载于:https://my.oschina.net/u/3010603/blog/798518

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chengzi5521

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的伪元素动画效果

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title></title> <style> .caption2 { positio...
复制链接

扫一扫

用伪元素after添加动画蒙版

LLY_XJZ的博客

09-04

362

#不用加div就可以添加动态蒙版啦接下来让我们看一看怎么写吧 <div class="m_box"> <div class="mask"></div> </div> .m_box{ width: 500px; height: 300px; border: 1px solid red; /* overflow: hidden; */ position: relative; margin: 0 auto; } .m_box .mask::befo

伪元素实现菜单动画

acheding的博客

09-24

236

通过::before以及:class实现菜单切换动画

参与评论您还未登录，请先登录后发表或查看评论

利用伪元素+动画效果制作一个跳动的心

blinH的博客

08-07

1604

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {

关于伪元素如何添加过渡动画功能

weixin_44731038的博客

04-05

1125

关于伪元素如何添加过渡动画功能首先准备一个容器，在容器中添加伪元素及想添加的过渡属性初始值这里使用width举例我将width初始设置为0，过渡到100%；初始设置元素基本样式 <style> div{ position: relative; width: 100px; height: 30px; line-height: 30px; text-align: center;

css 动画巧用伪元素_检测伪元素动画支持

Web 开发&软件开发

07-25

299

检测伪元素动画支持不久前我发表了Daniel Buchner的有趣的趣闻，它使开发人员可以使用JavaScript和CSS动画检测DOM节点插入 ; 由CSS动画驱动的出色技巧。 Lea Verou最近发布了由CSS动画驱动的另一个检测代码段：检测伪元素动画支持。这是她的做法！观看演示 CSS 测试用例可以使用任何伪元素。在这种情况下，我们将使用:before ： ...

纯css3before和after伪元素结合animation鼠标悬停动画效果

09-14

纯css3before和after伪元素结合animation鼠标悬停动画效果

一个全屏的加载动画效果实现

12-13

这种风格的动画效果最近非常流行，因此这篇文章想给你带来一些启示。　这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap....

CSS弹跳动画效果的实现方法

01-19

由于只使用了一个div，要同时达到正方形旋转与阴影缩放的效果，这里必须使用两个伪元素（before与after）来完成，严格来说，虽然只有一个div，但是却是把这个div当作外框，让伪元素before作为旋转的正方形，让伪元素...

css动画复习以及实现心动效果

01-08

在此之前,我们必须要了解伪元素::after 和 ::before的作用,::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。在下面的例子里, :before 伪类...

css3+伪元素实现鼠标移入时下划线向两边展开的效果

01-19

将伪元素:before和:after定位到元素底部中间，设置宽度从0变成100%达到目的。实现方法： 1、首先定义一个块状元素（行内元素没有宽高）并修改样式为一个背景色为浅灰色的矩形，设置相对定位。 html代码 ...

css 动画效果设置

weixin_45615623的博客

09-19

441

before和after伪元素(详解) 之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查注意：一定要有content，否则伪元...

CSS伪元素常用效果实现

reffrselom的博客

12-23

249

伪元素：顾名思义，不是真正的dom元素，或者可以说，他是依附于某一特定dom元素的虚拟dom元素. 我们可以利用伪元素解决很多样式问题，今天就是想详细列举回顾下：清除浮动对浮动影响的父元素，添加伪元素样式（当然清除浮动也有别的办法） .box:after{ clear:both; content:'.'; display:block; width: 0; height: 0; ...

伪元素图层过渡效果

今夜几点睡

02-25

293

用两个伪元素做一个图层过渡效果给图层定义了两个伪元素分别是before，after，一个定义在左上角，一个则定义在右下角，宽高都设置0，可见度为1，后面在鼠标放入图层中宽高设置100%，这样两个角在进行动画时是以一个交锋相对形式进行过度效果，然后把可见度设置0。我们先把伪元素定位在图层中，在把伪元素设置成为块级元素，随后还要设置一个content：’ ',内容为空，在初始样式里把伪元素的宽高设置0并给它可见度1，之后再hover再把宽高设置100%，把可见度设置0，并给一个背景颜色，就可以得到两个角度

使用了 :before 等伪元素中的其中一个来做 animation 动画；在 animation 动画改变了其中的某个 rem 的值；在这样的前提下，又是使用有这个 bug 的版本浏览器，那么就

Cindy921226的博客

01-05

1524

今天看到一位大神在工作中遇到的bug,所以记录下来，说不定自己以后就遇到了呢,哈哈，站在巨人的肩膀上。参考网址：http://www.codeceo.com/article/crash-app-by-css.html @-webkit-keyframes crashChrome { 0%{ -webkit-transform: translateX(0rem);} } .

使用伪元素before和after写出来的神奇效果

Tz。

07-13

3074

大家都知道before和after能写出很多很好的效果，今天偶然看到一个觉得挺好的，就顺便写了一下，复习了一下伪元素以及和伪类的区别，domo地址：http://codepen.io/tianzi77/pen/KpeKXz伪类和伪元素看似简单，很多开发者并没有引起注意，先看看伪元素和伪类的区别吧。标准的定义： CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。伪类有：:

大量的用伪元素可以实现的奇妙效果

natalie86的专栏

03-26

3076

译自https://css-tricks.com/pseudo-element-roundup/ 大量的用伪元素可以实现的奇妙效果用伪元素:before，:after你可以做出很多神奇的页面效果。对于页面上的所有元素，你得到了页面其他任何的一个html元素可以做到的效果外又添了额外的两个。它们解开了很多有趣的设计可能性但却并没有对你的语义标记产生负面影响。这里有大量的由这

伪类制作动画效果

shaddce的博客

06-09

662

创建一个div，再创建一个类，包裹住img的里面的图片。 2. 之后就是样式了，用类选择器选择到之前创建的类，在标明到他的img，可以调整下图片，设置他的宽高，接下来就是他的动画过度，先给他动画延伸，0.6秒，后面加个ease(速度从慢到快) 3. 接下来就是他的伪类了，选择器还是之前上面的，不过后面加多一个hover（css版的鼠标移入），样式里可以写你想要的效果，我给他宽和高个位3...

脚本化，伪元素，css3—transform transition

FreMePst的博客

10-15

831

div.style.width/heigth/borderRadius…edg 1.可读可写，改变css样式 2.写入的值必须是字符串格式 3.组合单词变成小驼峰书写 -&amp;amp;amp;amp;gt;div.style &amp;amp;amp;amp;lt;-CSSStyleDeclaration {alignContent: &amp;amp;amp;quot;&amp;amp;amp;quot;, alignItems: &a

鼠标hover 改变元素大小动画效果

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交