Mr.Captain东：跳动的心（CSS3）

最新推荐文章于 2023-03-01 12:23:35 发布
最新推荐文章于 2023-03-01 12:23:35 发布
阅读量507 收藏 5
点赞数 3
分类专栏： 总结 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47271997/article/details/109708053
版权

CSS3新特性

利用CSS3新特性制作，具有跳动效果的心

使用软件：

1、 HBulider
2、 火狐浏览器

使用知识点

CSS3新特性：

1.border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性，简单来说就是倒圆角函数。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.Transform属性应用于元素的2D或3D转换。这个属性允许你将元
素旋转，缩放，移动，倾斜等。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.通过 @keyframes 规则，您能够创建动画。创建动画的原理是，
将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多
次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过
关键词 “from” 和 “to”，等价于 0% 和 100%.0% 是动画的开始时
间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该
始终定义 0% 和 100% 选择器。

在这里插入图片描述
在这里插入图片描述

4.box-shadow 属性向框添加一个或多个阴影。
在这里插入图片描述

在这里插入图片描述

总结

三个颜色相同的正方形，两个倒圆角，一个旋转45度，调整好位置，堆叠成一个心形。CSS3新特性@keyframes属性，再加一点阴影，即可。

在这里插入图片描述
源码链接：https://pan.baidu.com/s/1wTTTGhitSK4R3nNYryLGQQ
提取码：5908

Mr.Captain东
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Captain Toad: Treasure Tracker Wallpapers-crx插件
04-05
语言:English 蟾蜍 船长蟾蜍的粉丝：宝藏跟踪器，我们向您展示了与这个非常热门的游戏相关的新延伸，我们希望为您提供完美。它配备了这场比赛的随机高品质壁纸。每当打开新的选项卡页面时，壁纸会打开。...
captain:头盔3控制器
04-29
Captain是基于该提案的Helm v3 Controller的第一个实现。 该项目基于作为 v3核心代码。 由于尚未正式发布（目前为Alpha阶段），因此进行了一些修改以帮助在fork上实现此控制器： （一旦发布Helm库，将不推荐使用）...
运用CSS3实现跳动的心效果
weixin_44551863的博客
02-21 1094
学了css3也有一段时间了，也可以做一些自己想做的东西，今天就做一颗跳到的心，首先当然要写写好html的样式如图一所示，在一个大的div里套三个小的div和一个p标签。 图一 接下来是css的样式如图二所示，首先要为最外层的div设置一个相对定位，宽高各300px，外边距上下200，左右自动，使其整体居中，再使这个div旋转45度，再给里面的三个小div设置绝对定位，红色背景宽高各200px，给其...
Css3 会跳动的心
weixin_44543312的博客
02-09 1650
开发工具与关键技术：DW scale()缩放 作者：梁茵茵 撰写时间：2019年2月9日 先做一个简单的
css实现跳动的心效果
JackieDYH的博客
03-16 969
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
如何用纯 CSS 为你的情人节创建一颗跳动的心
xunmaw001的博客
02-02 257
我们称之为情人节的浪漫之日是以一位基督教殉道者的名字命名的，其历史可以追溯到公元 5 世纪，但起源于罗马节日牧神节。但是通过一些几何、数学和一些基本的 CSS 规则，您可以将您的浏览器变成您的创意画布！heart您可以很容易地注意到，我们通过使用主类和两个带有 ::before和 ::after伪元素的圆圈来定义正方形及其定位。当我们使用关键帧规则时，我们可以将时间段划分为更小的部分，并通过将其拆分为多个步骤来创建转换/动画（每个步骤对应于时间段完成的百分比）。最后我们必须将动画分配给我们的心脏。
CSS3学习笔记（2）—左右跳动的红心
weixin_30522095的博客
10-06 145
还在为无法表达内心澎湃的心情而着急吗？还在为制作跳动的心而烦恼吗？哈哈,今天我就把代码全部奉上，为你们追妹子添点贡献，下面来看最终的动态效果（事先说明一下：我用的截屏gif制作软件是绿色版的，所以gif动态图心的抖动效果会有点慢而且卡卡的，但是实际效果很棒,不信你可以粘贴代码看看呗） 下面把心的png图也贴出来，感兴趣的可以右键另存为试试. 其实上面的动画类似于我们小时候荡...
6_key_test.zip_captain3kb_fpga_verilog
09-24
标题中的“6_key_test.zip_captain3kb_fpga_verilog”揭示了这是一个与FPGA（Field-Programmable Gate Array）相关的项目，其中包含了Verilog编程语言的测试文件。"Captain3kb"可能是项目、硬件平台或者特定模块的...
grunt-captain-hook:根据评论改掉css和js
06-21
将 css 和 Javascript 链接插入到 html 文件中 入门 这个插件需要 Grunt ~0.4.0 如果您以前没有使用过 ，请务必查看指南，因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后，您可以使用以下命令安装...
上校论坛Ⅱ PC.FORUMⅡ (Post Captain Forums)
10-13
【上校论坛Ⅱ PC.FORUMⅡ (Post Captain Forums)】是一个专门针对网络社区构建的论坛系统，它基于PCF0801+和动网DVBBS FINAL+SP1版的数据库架构，旨在提供高效且用户友好的讨论环境。这个论坛系统的核心优势在于其...
纯css3绘制跳动的心
05-24
表白专用神器， 纯css3绘制跳动的心
CSS3制作跳动心形动画代码.zip
07-04
CSS3制作跳动心形动画代码，纯CSS3制作，爱心跳动动画，心形动态图。
html跳动的心,css3跳动的心制作
weixin_28829339的博客
06-15 229
心的跳动css属性* {margin: 0;padding: 0;}body {width: 100%;/*如果要给背景加颜色或者图片必须把宽度设置为100%。*/background-color: #000;}.heart {margin: 100px auto;width: 200px;height: 200px;position: relative;animation-name: shake...
css实现跳动的心
angula
09-16 1774
先看效果图 下面让我们开始吧 先搞个div块吧 <div class="box"></div> 下面我们需要为div块做一些css，让其变成心型 .box { position: relative; width: 120px; height: 120px; background: #ff0000; margin: 200px auto; /* 盒子旋转45度 */ transform: rotat
使用css制作跳动的心
my466879168的博客
08-05 574
利用css动画制作跳动的心 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="./moment.js"></script> &l
html5+css3制作跳动的心
m0_56116127的博客
03-01 156
【代码】html5+css3制作跳动的心。
CSS动画3----- 跳动的心
pig_is_duck的博客
06-04 592
一、绘制心形 讲解 所谓心形，就是一个正方形，加两个直径等于正方形的圆组成的 然后再旋转45°，把边框去掉就获得一个爱心了 代码 <div class="heart"></div> .heart { /* 为一个正方形 */ position: relative; width: 200px; height: 200px; background-color: #e74c3c; transform: rotat
CSS3实现跳动的心
weixin_57156748的博客
12-09 394
这里面主要用到了伪类选择器和CSS3的动画效果，重CSS3实现
css3实现跳动红心
zhy的博客
07-12 1404
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt; *
根据以下要求编写一个python程序1. Description Ship of Fools is a simple classic dice game. It is played with five standard 6-faced dice by two or more players. - The goal of the game is to gather a 6, a 5 and a 4 (ship, captain and crew) in the mentioned order. - The sum of the two remaining dice (cargo) is preferred as high as possible. The player with the highest cargo score wins the round. Example: - In the first round turn, if a player rolls 6 4 3 3 1 (note we five dice at the beginning), the player can bank the 6 (ship), but the rest needs to be re-rolled since there is no 5. - In the second round turn, if the player rolls 6 5 4 4 (four dice, since the 6 from last turn is banked), the player can bank the 5 (captain) and the 4 (crew). The player has three choices for the remaining 6 and 4. The player can bank both and score 10 points, or re-roll one or two of the dice and hope for a higher score. - In the second round turn, if the player instead rolled 4 4 3 1, all dice needs to be re-rolled since there is no 5.程序需要包含一下几个类.The division of responsibility between the different classes is as follows. - Die: Responsible for handling randomly generated integer values between 1 and 6. - DiceCup: Handles five objects (dice) of class Die. Has the ability to bank and release dice individually. Can also roll dice that are not banked. - ShipOfFoolsGame: Responsible for the game logic and has the ability to play a round of the game resulting in a score. Also has a property that tells what accumulated score results in a winning state, for example 21. - Player: Responsible for the score of the individual player. Has the ability, given a game logic, play a round of a game. The gained score is accumulated in the attribute score. - PlayRoom: Responsible for handling a number of players and a game. Every round the room lets each player play, and afterwards check if any player has reached the winning score.
最新发布
06-02
ship, captain, crew = False, False, False while not (ship and captain and crew): dice_cup.roll() values = dice_cup.get_unbanked_values() if 6 in values and not ship: dice_cup.bank(values.index(6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值