【CSS】使用css画一个跳动的小心心

使用CSS样式写一个跳动的小心心

具体代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link></head>
<body><div class="heart">
</div><script></script><style>body{display:flex;justify-content:center;padding-top:300px;}.heart{width:200px;height:200px;background:red;opacity:1;transform:rotate(45deg) scale(0.5);animation:ani 2s infinite;}@keyframes ani {25% {opacity:0.5;transform:rotate(45deg) scale(1)}50% {opacity:1;transform:rotate(45deg) scale(1.5)}75% {opacity:.5;transform:rotate(45deg) scale(.5)}100% {opacity:1;transform:rotate(45deg) scale(1)}}.heart::before{content:'';position:absolute;width:200px;height:200px;background:red;border-radius:50%;transform:translateX(-100px);}.heart::after{content:'';position:absolute;width:200px;height:200px;background:red;border-radius:50%;transform:translateY(-100px);}</style></body>
</html>

【CSS】使用css画一个跳动的小心心相关推荐

[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
如何用css动画来画一个多啦A梦
Github预览链接 : https://asdasd111112999.github.io/animation-Doraemon/index.html 预览图: 这个小demo 会实时的把CSS实现 ...
js+css实现鼠标点击时出现小心心
1.先看效果图: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
【HTML+CSS练习】画一个条件查询
HTML+CSS练习,创建条件查询相关数据使用HTML+CSS,绘制一个条件查询的状态栏搜索具体效果如下: 注:要是觉得文章写得不错,记得留个赞哦! HTML代码如下: <!DOCTYPE ...
java旋转太极图_如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
使用css的box-shadow画一个月亮形状的图形
首先创建一个圆,然后设置它的box-shadow值.最后将圆的背景色编程transparent就行 <style>.center {position: absolute;margin: a ...
用Python画一个跳动的心
前情提要:用Python绘制动态变化的曲线复杂曲线轨迹演示源代码:爱心源码-通过Python画一颗跳动的心有一些复杂的曲线,实则有着非常简单的表达式,比如网上流传甚广的这个 f ( x ) = ...
用ps画一个Gif的小房子（1）
效果如图: 制作方法: 1.新建200*200的画布:复制一块小房子图片 2.点击窗口-时间轴-勾选帧动画 3.如图所示(我这边是一帧对应一个图层) 4.新建图层-这边要新建24个图层,每个图层对应不 ...

【CSS】使用css画一个跳动的小心心

【CSS】使用css画一个跳动的小心心相关推荐

最新文章

热门文章