檬味博客 » 问答 » css动画，div设置了动画，但不希望DIV内部的文字也跟着动？

css动画，div设置了动画，但不希望DIV内部的文字也跟着动？

把文字和背景分别放到两个平级的div中，文字覆盖在背景的上面，然后只需要把动画作用到背景所在的div上，这样文字不受影响就可以保持不动了。而且，这样一来，外框与背景就不需要做反向运动，只需要背景动即可，外框保持不动，这样只需要一个动画，提高了效率： 菜鸟教程(runoob.com...
css动画，div设置了动画，但不希望DIV内部的文字也跟着动？
把文字和背景分别放到两个平级的div中，文字覆盖在背景的上面，然后只需要把动画作用到背景所在的div上，这样文字不受影响就可以保持不动了。而且，这样一来，外框与背景就不需要做反向运动，只需要背景动即可，外框保持不动，这样只需要一个动画，提高了效率：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV
{
width:100px;
height:100px;
position:relative;
}
@keyframes mymove
{
0% {}
100% {-webkit-transform:rotate(360deg);}
}
#mybak{
position:absolute;
left:0;
top:0;
width:100px;
height:100px;
background:black;
-webkit-animation:mymove 10s infinite;
}
#mynum{
position:absolute;
left:0;
top:0;
width:100px;
height:100px;
text-align:center;
color:white;
font-size:70px;
line-height:100px;
}
</style>

</head>

<body>
<div id="myDIV"><div id="mybak"></div><div id="mynum">10</div></div>

</body>

</html>2019-12-25
mengvlog 阅读 32 次 更新于 2025-09-07 17:56:19 我来答关注问题0
1 个回答檬味博客专题活动
  • 文暄生活科普 我用CSS做了100个Loading加载动画

    1. 经典款III效果描述：一个简单的圆形加载器，通过CSS动画实现旋转效果。实现思路：使用border-radius属性将元素设置为圆形。通过@keyframes定义旋转动画。使用animation属性应用动画，并设置动画的持续时间、延迟和重复次数。2. 多点款III效果描述：多个点围绕中心旋转，形成加载动画。实现思路：使用posit...

  • 深空见闻 css动画 球慢慢变大

    一、使用@keyframes动画关键帧 设置HTML元素：首先，在HTML中设置一个元素作为球，例如一个，并给它一个类名，如ball。定义CSS样式：在CSS中，为.ball元素设置初始样式，如宽度、高度、背景颜色等，使其看起来像一个球。创建动画关键帧：使用@keyframes定义一个动画，例如命名为grow。在动画中，设...

  • 翡希信息咨询 animation-delay示例

    在CSS中，animationdelay 属性用于指定动画开始之前等待的时间。在此示例中，div 元素应用了两个动画：animations2 和 animations。animations2 动画没有延迟，立即开始。animations 动画设置了 1s 的延迟，即它会在 animations2 动画开始后的1秒才开始。动画效果：animations2 动画：使 div 元素保持在初始位...

  • 漠小丽 css3动画播放后如何停止在最后的状态

    1、首先，准备好HTML前期工作以及对DIV的一个简单设置。2、然后，新建keyframes元素，命名为myFirst。3、然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。4、这时候，可以为他写上各种百分比的颜色。5、此时，就能编写Animation属性对属性值的引用。6、为了开考虑兼容性问题，可以多写几...

  • 百度网友e68692953 css3 两个动画衔接播放

    1. 将第二个的延迟时间（animation-delay） 设置成第一个的持续时间( animation-duration )2. 多个动画应用时用逗号分隔开，如下图：

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部