纯css实现向上箭头动画显示

最新推荐文章于 2024-01-30 11:39:28 发布

佛佛ง

最新推荐文章于 2024-01-30 11:39:28 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS学习笔记文章标签： css 动画 html

本文链接：https://blog.csdn.net/LzzMandy/article/details/119576599

CSS学习笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个全屏图片背景，配合可滑动的导航栏效果。通过`object-fit: cover`保持图片适配，并展示了如何创建一个响应式的arr-box元素和绝对定位的arr，以实现导航箭头的无缝滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图:

DOM:

<div>
    <img src="http://pics4.baidu.com/feed/3801213fb80e7bec70739c1b83cebc3e99506b81.jpeg?token=de56394c09656ca554744bf001f2d130&s=D53AA375CD88745D882B156F0300E078"/>
	 <div class="arr-box">
	  <div class="arr"></div>
	 </div>
  </div>

CSS:

<style>
  img{
		object-fit:cover;
		width:100%;
		height：100%;
  }
  .arr-box{
	position:relative;
	height: 100px;
	width :100%;
  }
  .arr{
		height: 100%;
		width :52px;
		background: url('./images/up.png') center center no-repeat;
		background-size: 52px 52px;
		position:absolute;
		left: 48%;
		<!-- animation:movetip 1s infinite; -->
	}
	@keyframes movetip
	{
		from {top:0px;}
		to {top:-10px;}
	}
  </style>