当前位置: 首页 > news >正文

css3+js 画出爱心特效

要使用CSS3和JavaScript绘制爱心特效,可以使用CSS3的动画和过渡效果来创建爱心的形状,并使用JavaScript来控制动画的触发和交互。以下是一个简单的示例代码:

HTML:

<div class="heart"></div>
<button onclick="toggleAnimation()">Toggle Animation</button>

CSS:

.heart {width: 100px;height: 100px;position: relative;transform: rotate(-45deg);background: red;margin:100px
}.heart::before,
.heart::after {content: "";width: 100px;height: 100px;background: red;border-radius: 50%;position: absolute;
}.heart::before {top: -50px;left: 0;
}.heart::after {top: 0;left: 50px;
}@keyframes heartbeat {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}
}.heart.animate {animation: heartbeat 1s infinite;
}

JavaScript:

function toggleAnimation() {const heart = document.querySelector('.heart');heart.classList.toggle('animate');
}

在上述示例中,我们首先在HTML中创建一个包含爱心形状的<div>元素,并添加一个按钮来切换动画效果。然后,在CSS中,我们使用::before::after伪元素来创建爱心的两个半圆形,并使用transform属性来旋转和定位它们,从而形成完整的爱心形状。我们还定义了一个名为heartbeat的关键帧动画,用于实现心跳效果。最后,在JavaScript中,我们定义了一个toggleAnimation函数,用于在点击按钮时添加或移除animate类,从而触发或停止动画效果。

您可以将上述代码复制到一个HTML文件中,并在浏览器中运行以查看爱心特效。点击按钮可以切换动画的启用和禁用状态。

请注意,这只是一个简单的示例,您可以根据需要进行更多的样式和交互调整

完整示例

这里是完整的示例代码:

<!DOCTYPE html>
<html>
<head><title>Heart Animation</title><style>.heart {width: 100px;height: 100px;position: relative;transform: rotate(-45deg);background: red;margin:100px}.heart::before,.heart::after {content: "";width: 100px;height: 100px;background: red;border-radius: 50%;position: absolute;}.heart::before {top: -50px;left: 0;}.heart::after {top: 0;left: 50px;}@keyframes heartbeat {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}}.heart.animate {animation: heartbeat 1s infinite;}</style>
</head>
<body><div class="heart"></div><button onclick="toggleAnimation()">Toggle Animation</button><script>function toggleAnimation() {const heart = document.querySelector('.heart');heart.classList.toggle('animate');}</script>
</body>
</html>

将上述代码复制到一个HTML文件中,并在浏览器中打开该文件,您将看到一个带有爱心形状和切换动画的按钮。点击按钮可以切换动画的启用和禁用状态。

另外一种实现方法

是因为clip-path属性在某些浏览器中不支持SVG路径。为了解决这个问题,我们可以使用另一种方法来实现爱心效果。以下是一个使用CSS和JavaScript的示例:

<!DOCTYPE html>
<html>
<head><title>Heart Animation</title><style>.heart {width: 100px;height: 100px;position: relative;animation: heartbeat 1s infinite;}.heart::before,.heart::after {content: '';position: absolute;top: 0;width: 52px;height: 80px;border-radius: 50px 50px 0 0;background: red;}.heart::before {left: 50px;transform: rotate(-45deg);transform-origin: 0 100%;}.heart::after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}@keyframes heartbeat {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}}</style>
</head>
<body><div class="heart"></div>
</body>
</html>

在上面的代码中,我们使用CSS的::before::after伪元素来创建爱心的形状。通过调整伪元素的位置、大小和旋转角度,我们可以组合它们以形成爱心的形状。

将上述代码复制到一个HTML文件中,并在浏览器中打开该文件,您将看到一个使用CSS和JavaScript来实现爱心效果的动画。

http://www.lryc.cn/news/129417.html

相关文章:

  • 蔚来李斌卖手机:安卓系统,苹果售价,一年一发
  • 0008__浏览器层面缓存 Etag If-None-Match等详解
  • Idea 快捷键整理
  • 管理类联考——逻辑——真题篇——按知识分类——汇总篇——一、形式逻辑——假言——第一节 充分条件
  • LSTM模型
  • 抢红包小程序
  • UVA 10006 埃氏筛法+快速幂
  • C++--红黑树
  • Unity 找不到 Navigation 组件的解决
  • 【js】时间和时间戳转换、日期格式化
  • glog体验第一天(0)glog介绍和安装
  • Android 13像Settings一样获取SIM卡信息
  • Can‘t find end of central directory : is this a zip file ? at XMLHttpRequest
  • 基于SpringBoot+Thymeleaf仓库管理系统
  • ubuntu20.04磁盘满了 /dev/mapper/ubuntu--vg-ubuntu--lv 占用 100%
  • 【制作npm包4】api-extractor 学习
  • 神经网络基础-神经网络补充概念-52-正则化网络的激活函数
  • 代码随想录训练营day56| 583. 两个字符串的删除操作 72. 编辑距离
  • 神经网络基础-神经网络补充概念-55-为什么是ML策略
  • C++初阶语法——内部类
  • Java基础(十四)面向对象编程 OOP 多态
  • 【Android】解决Lint found fatal errors while assembling a release target
  • CF1195E OpenStreetMap 题解
  • 微信营销系统如何使用效果会更好
  • Linux开机启动程序添加root权限
  • 安卓13解决链接问题
  • ​《乡村振兴战略下传统村落文化旅游设计 》在2023年畅销榜排名465位
  • 实现一个自动保存高CPU占用现场的简易工具
  • 易服客工作室:如何在WordPress网站中举办虚拟活动
  • Java IO流(一)IO基础