svg标签的CSS3动画特效 - 经典特效2

最新推荐文章于 2023-02-01 14:28:52 发布

草巾冒小子

最新推荐文章于 2023-02-01 14:28:52 发布

阅读量693

点赞数

分类专栏： CSS 3 img图片处理

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/82255421

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

img图片处理

42 篇文章 2 订阅

订阅专栏

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 ” 的全部内容。

草巾冒小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg标签的CSS3动画特效 - 经典特效2

svg标签的CSS3动画特效 - 图片上下滚动，会减速效果图截图：（类似于：上下往复 - 拉锯式运动） css代码如下：&amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt;img { vertical-align: middle;border: 0;}p{margin: 0 0 10px;}.landingProductBg { widt...
复制链接

扫一扫