HTML5:七天学会基础动画网页13

看完前面很多人可能还不是很明白0%-100%那到底是怎么回事,到底该怎么用,这里我们做一个普遍的练习——心跳动画

想让心❤跳起来,我们先分析一波,这个心怎么写,我们先写一个正方形,再令一个圆形前移:

54c90a839ab0452c99fb15614f1fc99b.png

 再来一个圆向上移一下

8f4543e7d6f848fba3d2c53a28457b19.png

 最后再整体转一下,换成统一颜色就OK了

2ea59716642d4106963a1c7cd7483c22.png

 废话不多说,直接来看代码:

 <title>心跳动画</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 200px;

           height: 200px;

            background-color:red;

            margin: 0 auto;

            margin-top: 200px;

            position: relative;

            transform: rotate(45deg);

            animation: name 2s infinite alternate;

        }

        /* 因为before元素与after元素是行内元素不能设置宽高要进行脱标 */

        /* 用圆角制作两个圆,再移动到正方形的两边 */

        .box::before{

            content: '';

            width: 200px;

            height: 200px;

            background-color: red;

            position:absolute;

            border-radius: 50%;

            transform: translate(-100px,0px);

        }

        .box::after{

            content: '';

            width: 200px;

            height: 200px;

            background-color: red;

            position:absolute;

            border-radius: 50%;

            transform: translate(0px,-100px);

        }

        @keyframes name{

            from{}

            10%{transform: rotate(30deg) scale(1.5);}

            20%{transform: rotate(60deg) scale(2);}

            30%{transform: rotate(30deg) scale(.8);} 

            40%{transform: rotate(-30deg) scale(1.5);}

            50%{transform: rotate(-60deg) scale(2);}

            60%{transform: rotate(-90deg) scale(2.5);}

            70%{transform: rotate(-30deg) scale(1.5);}

            80%{transform: rotate(30deg) scale(.8);}

            90%{transform: rotate(60deg) scale(1.5);}

            to{transform: rotate(90deg) scale(2.5);}

        }

    </style>

</head>

<body>

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

</body>

5cff3d6e48214c2c8bda64d4f10756e1.png

 然后我们就可以看到这个心❤跳起来了

如果想让它跳的更激动,这里缩放旋转我都是随便写的,我们可以让0%-100%间设置更多,旋转缩放设置更夸张些,动画完成的时间设置再短一些

d56e40f6fc1145d39a31789fe7e31970.png

 这个动画基础也快结束了,后面可以直接来上手写一些网页带大家看一下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/743323.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯历年真题 省赛 Java b组 2016年第七届

一、题目 分小组 9名运动员参加比赛&#xff0c;需要分3组进行预赛。 有哪些分组的方案呢&#xff1f; 我们标记运动员为 A,B,C,... I 下面的程序列出了所有的分组方法。 该程序的正常输出为&#xff1a; ABC DEF GHI ABC DEG FHI ABC DEH FGI ABC DEI FGH ABC DFG EHI ABC…

Linux中YUM仓库的配置

Linux软件包的管理 YUM仓库是什么YUM的常用命令修改YUM源其实CentOS7已经对YUM做了优化 YUM仓库是什么 之前传统RPM的管理方式 可以简单理解为写Java的时候不用Maven管理 jar包都要自己手动去导入 去下载 但是配置好YUM仓库 就放佛在用Maven管理Java项目 基于RPM包管理 能够从…

Python导入类说一说

要在Python中导入一个类&#xff0c;需要使用import关键字。 详细去看下面的代码 1、多例类 class Restaurant:餐馆类def __init__(self,restaurant_name,cuisine_type):#类的属性self.restaurant_name restaurant_nameself.cuisine_type cuisine_type# self.stregth_leve…

2024软件测试应该学什么?“我“怎么从功能转入自动化测试?

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、软件测试应该学…

TypeScript编译选项

编译单个文件&#xff1a;终端 tsc 文件名 自动编译单个文件&#xff1a;终端 tsc 文件名 -w 编译整个项目&#xff1a;tsc 前提是得有ts的配置文件tsconfig.json 自动编译整个项目&#xff1a;tsc --w tsconfig.json默认文件内容&#xff1a; tsconfig.json是ts编译器的配…

代码随想录算法训练营第16天

104.二叉树的最大深度 &#xff08;优先掌握递归&#xff09; 思路&#xff1a; 注意&#xff1a; 传入参数&#xff1a;depth, root 终止条件&#xff1a;if(root nullptr) return 0; 单层递归逻辑&#xff1a; 左右中int left getmax(depth1, root->left);int right …

代码随想录算法训练营Day45 ||leetCode 70. 爬楼梯 (进阶)|| 322. 零钱兑换 || 279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 本质上和leetcode377一样 #include <iostream> #include <vector> using namespace std; int main() {int n, m;while (cin >> n >> m) {vector<int> dp(n 1, 0);dp[0] 1;for (int i 1; i < n; i…

【MySQL 系列】MySQL 索引篇

在 MySQL 中&#xff0c;索引是一种帮助存储引擎快速获取数据的数据结构&#xff0c;形象的说就是索引是数据的目录。它一般是以包含索引键值和一个指向索引键值对应数据记录物理地址的指针的节点的集合的清单的形式存在。通过使用索引&#xff0c; MySQL 可以在不需要扫描整个…

『scrapy爬虫』03. 爬取多个页面(详细注释步骤)

目录 1. 分析网页试着拿到多个页面的url2. 抓取250个电影3. start_requests的使用4. 代码规范导库的优化关于重写最终修改后的代码 总结 欢迎关注 『scrapy爬虫』 专栏&#xff0c;持续更新中 欢迎关注 『scrapy爬虫』 专栏&#xff0c;持续更新中 1. 分析网页试着拿到多个页面…

关于tcp协议

目录 前言&#xff1a; 一、TCP协议的基本概念&#xff1a; 二、TCP协议的主要特点&#xff1a; 2.1面向连接&#xff1a; 2.2可靠传输&#xff1a; 2.3基于字节流&#xff1a; 三、TCP连接的建立与终止&#xff1a; 3.1连接建立&#xff1a; 3.1.1SYN&#xff1a; 3…

全排列 递归

#全排列 递归写法 def permute(nums,l,r):if lr: #如果lr 说明指剩下最后一个元素了 返回当前列表print(.join(nums)) #字符串连接else:for i in range(l,r1): #进入循环#交换i l 两个元素位置nums[l],nums[i]nums[i],nums[l]#递归 调用permute(nums,l1,r) #l1 表示下一个元素…

js中“==” 和“===”的区别

在JavaScript中&#xff0c; 和 是两种比较操作符&#xff0c;它们的区别在于它们进行比较时对数据类型的处理方式不同。 “”&#xff08;相等&#xff09;操作符&#xff1a; “” 操作符在比较两个值时会进行类型转换&#xff0c;如果两个值的数据类型不同&#xff0c;它会…

MyBatis3源码深度解析(十一)MyBatis常用工具类(四)ObjectFactoryProxyFactory

文章目录 前言3.6 ObjectFactory3.7 ProxyFactory3.8 小结 前言 本节研究ObjectFactory和ProxyFactory的基本用法&#xff0c;因为它们在MyBatis的源码中比较常见。这里不深究ObjectFactory和ProxyFactory的源码&#xff0c;而是放到后续章节再展开。 3.6 ObjectFactory Obj…

朴素贝叶斯 | 多分类问题

目录 一. 贝叶斯公式的推导二. 朴素贝叶斯1. 离散的朴素贝叶斯朴素贝叶斯导入示例 离散的朴素贝叶斯训练 2. 连续的朴素贝叶斯3. 伯努利朴素贝叶斯4. 多项式朴素贝叶斯4.1 Laplace平滑4.2 Lidstone平滑 三. 概率图模型1. 贝叶斯网络(Bayesian Network)1.1 全连接贝叶斯网络1.2 …

中国城市统计年鉴、中国县域统计年鉴、中国财政统计年鉴、中国税务统计年鉴、中国科技统计年鉴、中国卫生统计年鉴​

统计年鉴是指以统计图表和分析说明为主&#xff0c;通过高度密集的统计数据来全面、系统、连续地记录年度经济、社会等各方面发展情况的大型工具书来获取统计数据资料。 统计年鉴是进行各项经济、社会研究的必要前提。而借助于统计年鉴&#xff0c;则是研究者常用的途径。目前国…

redis在微服务领域的贡献,字节跳动只面试两轮

dubbo.registry.addressredis://127.0.0.1:6379 注册上来的数据是这样&#xff0c;类型是hash /dubbo/ s e r v i c e / {service}/ service/{category} 如 /dubbo/com.newboo.sample.api.DemoService/consumers /dubbo/com.newboo.sample.api.DemoService/providers has…

软件设计师14--死锁资源数计算

软件设计师14--死锁资源数计算 考点1&#xff1a;进程管理 - 死锁问题例题&#xff1a; 考点1&#xff1a;进程管理 - 死锁问题 所谓死锁&#xff0c;是指两个以上的进程相互要求对方已经占有的资源导致无法继续运行下去的现象。 死锁四大条件&#xff1a; 互斥保持和等待不…

Prompt Learning:人工智能的新篇章

开篇&#xff1a;AI的进化之旅 想象一下&#xff0c;你正在和一位智能助手对话&#xff0c;它不仅理解你的问题&#xff0c;还能提出引导性的问题帮助你更深入地思考。这正是prompt learning的魔力所在——它让机器学习模型变得更加智能和互动。在这篇博客中&#xff0c;我们将…

安装MySQL8.0及以上版本操作步骤

关于mysql安装过程中命令mysqld --initialize --console出错的解答 C:\mysql-8.3.0-winx64\bin>mysqld --initialize --usermysql --console 2024-03-12T11:21:23.201387Z 0 [System] [MY-015017] [Server] MySQL Server Initialization - start. 2024-03-12T11:21:23.2068…

【05】消失的数字

hellohello~这里是土土数据结构学习笔记&#x1f973;&#x1f973; &#x1f4a5;个人主页&#xff1a;大耳朵土土垚的博客 &#x1f4a5;所属专栏&#xff1a;C语言函数实现 感谢大家的观看与支持&#x1f339;&#x1f339;&#x1f339; 有问题可以写在评论区或者私信我哦…