css 浮动动画效果_css浮动动画

 箭头从上向下浮动

<div class="top">
    <img src="img/1x/hyyy-ban.jpg" alt="" class="w100">
    <div class="container ">
        <div class="title">技术支持</div>
        <div class="icon">
            <i class="iconfont icon-xiajiantou"></i>
        </div>
    </div>
</div>

 css代码

.top{
    .container {
        position: absolute;
        top: 25%;
        left: 0;
 
        .icon{
            width: 3.3125rem;
            height: 3.3125rem;
            line-height: 3.3125rem;
            .bgc;
            border-radius: 50%;
            text-align: center;
            overflow: hidden;
 
            .icon-xiajiantou{
                font-size: 1.375rem;
                .cb;
                display: inline-block;
                animation: xiagun 4s linear infinite;
            }
 
            @keyframes xiagun {
                0% {
                  transform: translateY(-1.5rem);
                }
                100% {
                  transform: translateY(2.5rem);
                }
            }
        }
    }
} 

 实现效果

地图上定位图标上下浮动 

html代码

<div class="mt60 ta pr">
                <img src="https://cloud-assets-brwq.oss-cn-heyuan.aliyuncs.com/kunpeng0808/uploads/20220818/a7f393dcceaad2db00792b002fb07a12.svg"
                    alt="" />
                <!-- <div class="hover">以北京、上海、广州、成都、武汉、西<br>安、济南、杭州个城市为核心点覆盖全国</div> -->
                <div class="hover">
                    <div class="dian dian1">
                        <div>北京</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                    <div class="dian dian2">
                        <div>济南</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                    <div class="dian dian3">
                        <div>上海</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                    <div class="dian dian4">
                        <div>杭州</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                    <div class="dian dian5">
                        <div>西安</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                    <div class="dian dian6">
                        <div>武汉</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                    <div class="dian dian7">
                        <div>广州</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                    <div class="dian dian8">
                        <div>成都</div>
                        <p>
                            <i class="iconfont icon-daohangdizhi"></i>
                        </p>
                    </div>
                </div>
            </div>

 css代码 

.list_service_two .pr{
  positon: relative;
}
.list_service_two .hover {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.25rem;
  line-height: 1.125rem;
  text-align: justify;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
}
 
.list_service_two .hover .dian{
  position: absolute;
  text-align: center;
  font-size: .875rem;
}
 
.list_service_two .hover .dian .iconfont{
  color: #80BF2E;
  font-size: .875rem;
  display: inline-block;
  animation: xiagun 1s linear infinite alternate;
}
 
@keyframes xiagun {
  0% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}