css3+js 画出爱心特效

这篇具有很好参考价值的文章主要介绍了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来实现爱心效果的动画。文章来源地址https://www.toymoban.com/news/detail-657742.html

到了这里,关于css3+js 画出爱心特效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3制作3D爱心动画

    1、什么是CSS     css,即层叠样式表的简称,是一种标记语言,有浏览器解释执行用来使页面变得更美观。 2、选择器     css3中新增了一些选择器,如下: 3、新样式 边框   css3 新增了三个边框属性,分别是: border-radius :创建圆角边框 box-shadow :为元素添加阴影 border-imag

    2024年02月05日
    浏览(53)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(70)
  • 前端:运用html+css+js模仿京东上商品图片区域放大特效

    1. 前言 最近在网页端浏览京东上的商品时,觉得上面的那张gif图片上实现的特效不错,于是自己打算使用html+css+js技术来实现一下上述特效效果,我的实效果如下: 2. 前端界面 主要使用到浮动、绝对定位、相对定位等知识,不了解这部分知识点的读者可以先去了解了解,再

    2024年02月16日
    浏览(56)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • [HTML]Web前端开发技术9(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(75)
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 网页标题:三列自适应宽度 网页标题:多行三列自适应宽度 一级水平导航菜单:采用“无序列表+超

    2024年01月16日
    浏览(75)
  • 前端:运用html+css+js模仿百度热搜电影榜鼠标移入特效

    1. 实现原理 百度热搜上电影榜鼠标移入特效如上图所示。个人觉得上述特效实现原理为使用相对定位、绝对定位实现的(鼠标移入和没有移入时,元素布局有一些不同而已)。至于鼠标移入时,出现延迟效果,则是在css上设置transition(用于设置过渡效果的)实现的。我的实现效果

    2024年02月15日
    浏览(67)
  • [HTML]Web前端开发技术5.2(HTML5、CSS3、JavaScript )CSS基础,decoration,selector,properties,Cascading——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS基础 CSS继承与层叠 使用CSS控制Web页面 CSS选择器类型 CSS选择器声明 课后练习 应用CSS链接外部样式

    2024年02月05日
    浏览(73)
  • web前端大作业_Html5+CSS3+JS原生项目_京东商城首页 详细代码

    index.html css index.css js index.js 效果图如下:            

    2024年02月11日
    浏览(62)
  • CSS3模拟小仓鼠一直奔跑的动画特效

    最近在丽泽桥的花鸟虫鱼市场看见 小仓鼠一直在奔跑 ,觉得它好累啊,但是却又乐此不疲的在跑着,就像我们这些打工族一样。之前见过有人把手机放在小仓鼠的滚轮上记步数,也是挺聪明的。今天就通过 CSS3 来实现一只一直奔跑着的小仓鼠。   目录 1. 实现思路 2.  圆圈的

    2023年04月09日
    浏览(91)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包