今天来制作一个简单的心跳效果，不需要很多代码，添加一个盒子，充分利用CSS展现就可以啦。 2.然后给它先变成一颗心 3.最后设置一下动画animation，这里要说一下animation必须和@keyframes一起用哦，因为动画没有动画帧还怎么动吖，就像你用筷子用两根一样，肯定不用一根对叭。 我们让它水平垂直两倍缩放 然后我们看一下效果 谢谢大家的阅读，Nicole后面会继续不定时给大家一些好看有趣的案例哦，有问题的话我们可以一起交流鸭~
1.首先我们在页面添加一个可视化的盒子<body> <div class="heart"></div> </body> .heart{ position:relative; width:100px; height:100px; margin:100px; } .heart:after, .heart:before{ position:absolute; width:60px; height:100%; background-color:#ff6666; content:""; border-radius:50% 50% 0 0; } .heart:before{ left:0; transform:rotate(-52deg); } .heart:after{ right:0; transform:rotate(49deg); } animation:scale 1s linear infinite; /*名称 1s 匀速 无限循环*/ @keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }
哈哈，有点丑，不喜欢的伙伴可以自己再去改一改外貌，毕竟个人审美有限哈哈哈，第一次写博客有点不知道怎么表达，反正过程都在这里啦，下面源代码送上~<!doctype html> <html> <head> <meta charset="UTF-8"> <title>心跳效果</title> <style> *{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;} .heart{ position:relative; width:100px; height:100px; margin:100px; animation:scale 1s linear infinite; /*名称 1s 匀速 无限循环*/ } @keyframes scale{ /*必须和animation一起用 动画帧*/ 50%{transform:scale(2)} } .heart:after, .heart:before{ position:absolute; width:60px; height:100%; background-color:#ff6666; content:""; border-radius:50% 50% 0 0; } .heart:before{ left:0; transform:rotate(-52deg); } .heart:after{ right:0; transform:rotate(49deg); } </style> </head> <!-- 可视化区域--> <body> <div class="heart"></div> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
356