经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
css3 transition过渡效果 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/16 10:08:09　　对本文有异议

css3过渡使用场景分析：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             background-color: cornflowerblue;
  31.             transition:1s;
  32.         }
  33.         div:hover {
  34.             border-radius:50%;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <main>
  40.         <div></div>
  41.     </main>
  42. </body>
  43. </html>

 

属性中间值对过渡的影响：

没有中间值的属性无法实现过渡动画效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             background-color: cornflowerblue;
  31.             transition:1s;
  32.             border:10px solid pink;
  33.         }
  34.         div:hover {
  35.             border-radius:50%;
  36.             width:400px;
  37.             height:400px;
  38.             border:20px dotted lightblue;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <main>
  44.         <div></div>
  45.     </main>
  46. </body>
  47. </html>

 

定制css过渡效果属性：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             background-color: cornflowerblue;
  31.             border:10px solid white;
  32.             /* 过渡属性 */
  33.             transition-property:background,width,height,border-radius;
  34.             transition-property:all;
  35.             /* 过渡持续时间 */
  36.             transition-duration:2s;
  37.             margin-bottom:50px;
  38.         }
  39.         main:hover div{
  40.             background-color: pink;
  41.             border-radius:50%;
  42.             width:400px;
  43.             height:400px;
  44.         }
  45.         div:nth-child(1){
  46.             transition-property:all;
  47.         }
  48.         div:nth-child(2){
  49.             transition-property:none;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <main>
  55.         <div></div>
  56.         <div></div>
  57.     </main>
  58. </body>
  59. </html>

 

transitionend动画API接口：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             position:relative;
  31.         }
  32.         div::before{
  33.             position:absolute;
  34.             width:200px;
  35.             height:200px;
  36.             background-color: cornflowerblue;
  37.             border-radius:10%;
  38.             content:'cyy';
  39.             display:flex;
  40.             justify-content: center;
  41.             align-items: center;
  42.             color:white;
  43.             font-size:2em;
  44.             transition:2s;
  45.             cursor:pointer;
  46.         }
  47.         div:hover::before{
  48.             transform:rotate(360deg);
  49.         }
  50.         div::after{
  51.             position:absolute;
  52.             width:200px;
  53.             bottom:-55px;
  54.             content:'cyy is cute~';
  55.             color:white;
  56.             font-size:1.2em;
  57.             text-align:center;
  58.             transition:2s;
  59.             cursor:pointer;
  60.             transform:translateX(-999px);
  61.         }
  62.         div.move::after{
  63.             transform:translateX(0);
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <main>
  69.         <div></div>
  70.     </main>
  71.  
  72.     <script>
  73.         document.querySelector('div').addEventListener('transitionend',function(e){
  74.             console.log(e)
  75.             document.querySelector('div').className = 'move';
  76.         })
  77.     </script>
  78. </body>
  79. </html>

transition-duration 过渡时间使用技巧：

过渡时间与过渡属性一一配对，当过渡时间数量少于过渡属性时，会循环回到最初的过渡时间

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             background-color: cornflowerblue;
  31.             transition-property:background,width,height;
  32.             /* 过渡属性height会选择过渡时间1s */
  33.             transition-duration:1s,2s;
  34.         }
  35.         div:hover {
  36.             width:400px;
  37.             height:400px;
  38.             background-color: pink;
  39.             border-radius:50%;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <main>
  45.         <div></div>
  46.     </main>
  47. </body>
  48. </html>

 

不同状态过渡时间效果控制：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             background-color: cornflowerblue;
  31.             transition-property:background,width,height;
  32.             /* 过渡属性height会选择过渡时间1s */
  33.             transition-duration:1s,2s;
  34.         }
  35.         div:hover {
  36.             width:400px;
  37.             height:400px;
  38.             background-color: pink;
  39.             border-radius:50%;
  40.             transition-property:background;
  41.             /* 过渡属性height会选择过渡时间1s */
  42.             transition-duration:1s;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <main>
  48.         <div></div>
  49.     </main>
  50. </body>
  51. </html>

 

transition-timing-function 控制运行轨迹：

贝塞尔曲线工具网：https://cubic-bezier.com/#.11,.75,.92,.57

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             background-color: cornflowerblue;
  31.             transition-duration:3s;
  32.             transition-timing-function:cubic-bezier(.15,.79,.72,-0.09);
  33.         }
  34.         div:hover {
  35.             width:400px;
  36.             height:400px;
  37.             background-color: pink;
  38.             border-radius:50%;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <main>
  44.         <div></div>
  45.     </main>
  46. </body>
  47. </html>

 

 

 

steps步进帧动画控制效果：

steps() 设置间隔参数，可以实现分步过渡

第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.         }
  27.         div{
  28.             width:200px;
  29.             height:200px;
  30.             background-color: cornflowerblue;
  31.             transition-duration:1s;
  32.             
  33.             transition-timing-function:steps(3,end);
  34.             transition-timing-function:steps(1,end);
  35.             transition-timing-function:steps(1,start);
  36.             transition-timing-function:step-start;
  37.             transition-timing-function:step-end;
  38.             transition-timing-function:steps(3,start);
  39.         }
  40.         div:hover {
  41.             width:400px;
  42.             height:400px;
  43.             background-color: pink;
  44.             border-radius:50%;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <main>
  50.         <div></div>
  51.     </main>
  52. </body>
  53. </html>

 

使用steps步进过渡制作时钟：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:400px;
  26.             background:white;
  27.             border-radius:50%;
  28.             position:relative;
  29.         }
  30.         main::before{
  31.             content:'';
  32.             width:20px;
  33.             height:20px;
  34.             background-color: black;
  35.             border-radius:50%;
  36.             position:absolute;
  37.             left:50%;
  38.             top:50%;
  39.             transform:translate(-50%,-50%);
  40.         }
  41.         main::after{
  42.             content:'';
  43.             width:2px;
  44.             height:50%;
  45.             background-color: black;
  46.             border-radius:50%;
  47.             position:absolute;
  48.             left:50%;
  49.             top:0;
  50.             transform:translateX(-50%);
  51.             transition:60s;
  52.             transform-origin:bottom;
  53.             transition-timing-function:steps(60,start);
  54.         }
  55.         main:hover::after{
  56.             transform:translateX(-50%) rotate(360deg);
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <main>
  62.         
  63.     </main>
  64. </body>
  65. </html>

 

step-end与step-start使用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         ul{
  24.             width:400px;
  25.             height:300px;
  26.             display:flex;
  27.             position:relative;
  28.             list-style:none;
  29.         }
  30.         li{
  31.             flex:1;
  32.             border:1px solid #ddd;
  33.             text-align:center;
  34.         }
  35.         ul::before{
  36.             content:'start';
  37.             width:200px;
  38.             height:100px;
  39.             background:orange;
  40.             position:absolute;
  41.             top:0;
  42.             left:0;
  43.             transition-duration:1s;
  44.             font-size:2em;
  45.             color:white;
  46.             transition-timing-function:step-start;
  47.             z-index:2;
  48.         }
  49.         ul::after{
  50.             content:'end';
  51.             width:200px;
  52.             height:100px;
  53.             background:purple;
  54.             position:absolute;
  55.             bottom:0;
  56.             left:0;
  57.             transition-duration:1s;
  58.             font-size:2em;
  59.             color:white;
  60.             transition-timing-function:step-end;
  61.             z-index:2;
  62.         }
  63.         ul:hover::before,ul:hover::after{
  64.             transform:translateX(200px);
  65.         }
  66.  
  67.     </style>
  68. </head>
  69. <body>
  70.     <main>
  71.         <ul>
  72.             <li></li>
  73.             <li></li>
  74.         </ul>
  75.     </main>
  76. </body>
  77. </html>

 

纯css图片切换效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:200px;
  26.             overflow:hidden;
  27.         }
  28.         main:hover section{
  29.             transform:translateX(-50%);
  30.         }
  31.         section{
  32.             width:800px;
  33.             height:200px;
  34.             display:flex;
  35.             transition:1s;
  36.             transition-timing-function:step-start;
  37.         }
  38.         div{
  39.             width:400px;
  40.             height:200px;
  41.             overflow:hidden;
  42.         }
  43.         img{
  44.             width:100%;
  45.             height:100%;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <main>
  51.         <section>
  52.             <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2329224269,1458878414&fm=26&gp=0.jpg" alt=""></div>
  53.             <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605093891148&di=5a12000e61c98e16a488d9570ce09b4d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D4042660312%2C2429876079%26fm%3D214%26gp%3D0.jpg" alt=""></div>
  54.         </section>
  55.     </main>
  56. </body>
  57. </html>

 

transition-delay 延迟过渡使用：

多用于下拉导航显示，鼠标移入一定时间后再显示；鼠标移入立刻移出则不显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         main{
  24.             width:400px;
  25.             height:200px;
  26.             overflow:hidden;
  27.         }
  28.         main:hover section{
  29.             transform:translateX(-50%);
  30.         }
  31.         section{
  32.             width:800px;
  33.             height:200px;
  34.             display:flex;
  35.             transition:1s;
  36.             transition-delay:1s;
  37.         }
  38.         div{
  39.             width:400px;
  40.             height:200px;
  41.             overflow:hidden;
  42.         }
  43.         img{
  44.             width:100%;
  45.             height:100%;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <main>
  51.         <section>
  52.             <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2329224269,1458878414&fm=26&gp=0.jpg" alt=""></div>
  53.             <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605093891148&di=5a12000e61c98e16a488d9570ce09b4d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D4042660312%2C2429876079%26fm%3D214%26gp%3D0.jpg" alt=""></div>
  54.         </section>
  55.     </main>
  56. </body>
  57. </html>

 

transition 组合设置全部过渡规则：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             background-color: #474747;
  22.         }
  23.         div{
  24.             width:200px;
  25.             height:200px;
  26.             background:lightblue;
  28.             transition:border-radius linear 1s,background ease 1s 1s;
  29.         }
  30.         body:hover div{
  31.             border-radius:50%;
  32.             background:pink;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div></div>
  38. </body>
  39. </html>

 

红心点赞案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8.     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10.     <style>
  11.         *{
  12.             margin:0;
  13.             padding:0;
  14.             box-sizing:border-box;
  15.         }
  16.         body{
  17.             width:100vw;
  18.             height:100vh;
  19.             display:flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.             background-color: #f3f3f3;
  23.         }
  24.         main{
  25.             width:50px;
  26.             height:50px;
  27.             position:relative;
  28.             border:1px solid #ddd;
  29.         }
  30.         i.fa{
  31.             font-size:50px;
  32.             color:#95a5a6;
  33.             position:absolute;
  34.             transition:1s;
  35.         }
  36.         main.heart i.fa{
  37.             transform:scale(3);
  38.             color:crimson;
  39.             opacity:0;
  40.         }
  41.         main.heart i.fa:nth-child(1){
  42.             transform:scale(1);
  43.             opacity:1;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <main onclick="heart()">
  49.         <i class="fa fa-heart" aria-hidden="true"></i>
  50.         <i class="fa fa-heart" aria-hidden="true"></i>
  51.     </main>
  52.  
  53.     <script>
  54.         function heart(){
  55.             $('main').toggleClass('heart');
  56.         }
  57.     </script>
  58. </body>
  59. </html>

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13959539.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号