前端图片跳动效果

素颜马尾好姑娘i 2022-04-12 13:23 159阅读 0赞

最近做企业站，想加个图片跳动的特效，这里记录一下，直接上代码  
html代码

<div class="xl-box"> </div>

css代码

/*图片跳动效果*/
          .xl-box::before{
              content: '';
              background-image: url(../image/dailyprofit5.png); opacity: .2; border-radius: 50%;/*放上自己图片路径即可*/
              position: absolute;
              top: 67px;
              left: 0;
              animation: shadow .9s linear infinite;
          }
          .xl-box::after{
              border-radius: 5px;
              background-image: url(../image/dailyprofit5.png);;/*同上，也可跳动前后图片不同，看个人需求*/
              animation: rotate .9s linear infinite;
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 500px;
              height: 350px;
          }
      @keyframes shadow {
          0%, 100% {transform: scaleX(1);}
          50% {transform: scaleX(1.2);}
      }
    
      @keyframes rotate {
          0% {
          transform: translateY(0) ;
        }
          25% {
              transform: translateY(10px);
          }
          50% {
              transform: translateY(20px) scale(1.1, 0.9);
             
          }
          75% {
              ransform: translateY(10px) ;
          }
          100% {
              transform: translateY(0) ;
          }
      }
    /*end*/

参考链接 [http://www.jiangweishan.com/article/CSS3JSDJFSDJF.html][http_www.jiangweishan.com_article_CSS3JSDJFSDJF.html]

[http_www.jiangweishan.com_article_CSS3JSDJFSDJF.html]: http://www.jiangweishan.com/article/CSS3JSDJFSDJF.html

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关字节跳动前端用什么框架

字节跳动前端用什么框架,字节跳动期权换购是什么意思？字节跳动前端用的框架都是脚本框架比较多一点的。 ![字节跳动前端面试题][u_1990668124_5633516

古城微笑少年丶/ 2023年09月23日 18:39/ 0 赞/ 119 阅读

相关【求职】字节跳动前端

浏览器缓存事件循环输入url到页面现实过程 transition和animation性能比较（应该问的是复合图层相关） promise实现原理

野性酷女/ 2023年02月19日 01:26/ 0 赞/ 34 阅读

相关 js 十分钟实现字符跳动效果。

转自：[http://www.pinlue.com/article/2019/07/3114/219421886153.html][http_www.pinlue.com_ar

傷城~/ 2022年12月11日 04:21/ 0 赞/ 117 阅读

相关入门前端-CSS使用before、after以及 transform实现心形跳动效果

效果图 ![在这里插入图片描述][0babc7101d03412bb3f4b6690e701fd1.png] 分析通过`::before和::after`以及`

分手后的思念是犯贱/ 2022年09月04日 05:55/ 0 赞/ 241 阅读

相关鼠标响应文字跳动效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家昨天看到[html5tricks][]上的一篇文章《[jQuery鼠标滑过文字跳动动画插件][jQuery]》

╰+哭是因爲堅強的太久メ/ 2022年08月27日 10:49/ 0 赞/ 186 阅读

相关图片切换效果!

学了一段时间tween算法,也学习了一些好的代码,也写了一些例子,不过都是模仿的, 但这个绝对是原创, HOHO <style type="text/css"> .s

忘是亡心i/ 2022年08月06日 05:17/ 0 赞/ 247 阅读

相关前端图片跳动效果

最近做企业站，想加个图片跳动的特效，这里记录一下，直接上代码 html代码 <div class="xl-box"> </div> css代码 /图片

素颜马尾好姑娘i/ 2022年04月12日 13:23/ 0 赞/ 160 阅读

相关箭头跳动动画效果和圆盘动画效果

手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现两个交互体验：箭头跳动动画效果，就是箭头一直有一个往下的动画，吸引用户下拉操作；

柔情只为你懂/ 2022年02月22日 14:52/ 0 赞/ 402 阅读

相关图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/T

ゝ一纸荒年。/ 2021年10月08日 05:30/ 0 赞/ 485 阅读

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 582 阅读