版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35393869/article/details/82255421
svg标签的CSS3动画特效 - 图片上下滚动，会减速
相关文献：
效果图截图：
（类似于：上下往复 - 拉锯式运动）
css代码如下：
<style type="text/css">
img {
vertical-align: middle;border: 0;
}
p{margin: 0 0 10px;}
.landingProductBg {
width: 100%;
}
.landingProductBg .user-behavior {
width: 1170px;
margin: 20px auto;
display: -ms-flexbox;
display: flex;
}
.landingProductBg .user-behavior .user-behavior-image {
width: 646px;
height: 406px;
background: url(images/user_behavior_bg.png) no-repeat;
background-size: 100%;
box-shadow: 0 0 100px rgba(123,154,126,.2);
border-radius: 10px;
}
.landingProductBg .user-behavior .user-behavior-image .UserBehaviorHeader {
margin-left: 96px;
margin-top: 40px;
}
.landingProductBg .user-behavior .user-behavior-image .UserBehaviorBg {
width: 550px;
height: 320px;
overflow: hidden;
margin-left: 96px;
}
.landingProductBg .user-behavior .user-behavior-image .UserBehaviorBg img {
transform: translateY(0);
animation: autoScroll 10s infinite ease;
animation-delay: 1s;
}
.landingProductBg .user-behavior .user-behavior-people {
width: 95px;
height: 188px;
background: url(images/user_behavior_people.png) no-repeat;
background-size: 100%;
margin-top: 338px;
margin-left: -2px;
}
.landingProductBg .user-behavior .user-behavior-text {
width: 411px;
height: 406px;
margin-left: 20px;
padding-top: 100px;
}
.landingProductBg .project-detail-title {
color: #396476;
font-size: 32px;
font-weight: 500;
}
.landingProductBg .project-detail-content {
color: #396476;
font-size: 16px;
font-weight: 500;
}
@keyframes autoScroll {
50% {
transform: translateY(-370px)
}
100% {
transform: translateY(0)
}
}
</style>
注意上述动画代码！
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="landingProductBg">
<div class="user-behavior">
<div class="user-behavior-image">
<div class="UserBehaviorHeader">
<img src="images/userbehavior_btn.svg">
</div>
<div class="UserBehaviorBg">
<img src="images/userbehavior.svg">
</div>
</div>
<div class="user-behavior-people"></div>
<div class="user-behavior-text">
<p class="project-detail-title">快速复现出错场景</p>
<p class="project-detail-content">记录出错前鼠标点击、页面跳转、网络请求，控制台打印等信息，打造应用的黑匣子，带您重返"失事"现场。</p>
</div>
</div>
</div>
</body>
</html>
说明：
1. CSS封装就OK，无需JS支持。
以上就是关于“ svg标签的CSS3动画特效 - 经典特效2 ” 的全部内容。