图片动画效果(非gif)

在MUJI to Go站点看到了一个不错的动画效果,于是便试着做了一个。

主要使用(长图)+ js:点击打开链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在MapboxGL中加载并添加高亮动画效果GIF图片,可以使用以下步骤: 1. 首先,确保已经引入了MapboxGL库和相关的依赖文件。 2. 创建一个HTML元素(例如div),用于容纳地图和动画效果。 ```html <div id="map"></div> ``` 3. 在JavaScript中,使用MapboxGL创建地图实例,并将其添加到指定的HTML元素中。 ```javascript mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], zoom: zoomLevel }); ``` 确保将YOUR_MAPBOX_ACCESS_TOKEN替换为您自己的Mapbox访问令牌,并将lng、lat和zoomLevel替换为地图的初始中心点和缩放级别。 4. 创建一个图层,并向地图添加一个GIF图片作为标记。 ```javascript var marker = new mapboxgl.Marker({ element: createMarkerElement() }) .setLngLat([lng, lat]) .addTo(map); ``` 在createMarkerElement函数中,您可以创建一个包含GIF图片的HTML元素,并为其添加所需的样式。 5. 创建一个CSS动画效果,用于高亮标记。您可以使用@keyframes规则来定义动画。 ```css @keyframes highlight { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } ``` 6. 使用JavaScript,为标记元素添加动画类。 ```javascript marker.getElement().classList.add('highlight-animation'); ``` 请确保将'highlight-animation'替换为您在CSS中定义的动画类名称。 这样,您就可以在MapboxGL中加载并添加高亮动画效果GIF图片了。记得根据您的需求,调整地图的样式、标记的位置和动画效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值