如何在CSS中为图片位置设置动画？

debugcn 发表于 Dev

基帕迪断裂

代码关闭了，我想添加图像，以便移动5张图像。出于某些原因，我尝试在此处放置我的代码，原因是它不允许我发布。我只写第一个，但是写的和我相似。4. div1 {background-image：url（“ newphoto1.jpg”）; }。该图像与div1有关。它不起作用。原始代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

迈克尔·特尔7

添加`background-size:`标签以避免裁剪：

尝试将可能的代码片段添加到CSS文件中的每个元素中。设置background-size:为background-size: 100% 100%;此项可能会剪切图像，它将填满整个<div>/ box。如果您不想使图像变形，请使用background-size: cover;设置位置background-position:。

CSS片段（CSS）：

background-image: url('./newphoto1.jpg'); 
background-size: 100% 100%;

游乐场脚本（HTML / CSS）：

下面，我在此可运行的Playground脚本中使用了一些随机测试图像：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

#div1 {animation-timing-function: linear;
    background-image: url('https://picsum.photos/200'); 
    background-size: 100% 100%;
}
#div2 {animation-timing-function: ease;
    background-image: url('https://picsum.photos/200'); 
    background-size: 100% 100%;
}
#div3 {animation-timing-function: ease-in;
    background-image: url('https://picsum.photos/200'); 
    background-size: 100% 100%;
}
#div4 {animation-timing-function: ease-out;
    background-image: url('https://picsum.photos/200'); 
    background-size: 100% 100%;
}
#div5 {animation-timing-function: ease-in-out;
    background-image: url('https://picsum.photos/200'); 
    background-size: 100% 100%;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

*请注意，将图像加载到此运动场脚本中并生效大约需要一秒钟。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何在CSS中为图片位置设置动画？

如何在CSS中为图片位置设置动画？

添加background-size:标签以避免裁剪：

CSS片段（CSS）：

游乐场脚本（HTML / CSS）：

如何在脚本中为动画设置游戏对象的位置

如何在脚本中为动画设置游戏对象的位置

如何在 CSS 中为背景图像设置动画？

如何在Excel中设置图片的位置？

如何在某个滚动位置或可见元素时为jQuery中的CSS“顶部”设置动画？

如何在 Android 版 Google Maps API 中为地图片段设置动画

如何在Word 2010中设置图片的位置

如何在html / css中为两个div设置动画以进行半圆过渡？

如何使用CSS在Javafx中为文本设置动画？

如何在渲染中为React组件设置动画？

如何在Unity中为刚体对象设置动画

如何在Bootstrap 3中为进度栏设置动画？

如何在Android中按顺序为TextViews设置动画？

如何在jQuery中为高度自动设置动画？

如何在Bootstrap 4中为进度栏设置动画？

如何在ObjectiveC中为浮动的UIView设置动画

如何在目标C中为绘制的线设置动画？

如何在QML中为多个对象设置动画

如何在SwiftUI中为视图之间的过渡设置动画？

如何在SwiftUI中为navigationBarHidden设置动画？

如何在iOS中为暗模式更改设置动画？

如何在Rust中为终端设置动画

如何在jQuery中为高度自动设置动画？

如何在android中简单地为视图设置动画

如何在markerOptions中为图标设置动画？[GoogleMaps API]

如何在 Matplotlib 中为函数设置动画

如何在点击事件中为 .text 更改设置动画？

如何在 BingMaps 中为 setView 的调用设置动画？

如何在反应中为 func comp 设置动画？

添加`background-size:`标签以避免裁剪：