CSS3心形效果代码

利用css3实现了心形效果,并且还能够跳动。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端开发学习q群:767273102   技术分享,欢迎基础小伙伴</title>
<style type="text/css">
 #myheart {
  position: relative;
  width: 150px;
  height: 220px;
}
#myheart:before,#myheart:after {
  position: absolute;
  left: 100px;
  background: red;
  height: 160px;
  width: 100px;
  content: "";
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#myheart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
@keyframes heart {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.myheart {
  position: absolute;
  top: 40%;
  left: 40%;
  animation: heart 1.5s linear infinite;
}
</style>
</head>
<body>
  <div class="myheart">
    <div id="myheart"></div>
  </div>
</body>
</html>

原文地址:https://blog.51cto.com/14458119/2427446

时间: 2024-10-09 18:42:56

CSS3心形效果代码的相关文章

心形动画

<!doctype html><html><head><meta charset="utf-8"><title>心形动画代码</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>body { background:black;}.heart

CSS3实现的字符串逐字高亮效果代码实例

CSS3实现的字符串逐字高亮效果代码实例:本章节分享一段代码实例,它实现了字符串逐字高亮效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title>

CSS3实现的菱形效果代码实例

CSS3实现的菱形效果代码实例:本章节分享一段代码实例,它使用CSS3实现了菱形效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <

纯css3艺术文字样式效果代码

效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>

css3实现的动态月食效果代码实例

css3实现的动态月食效果代码实例:本章节分享一段代码实例,它利用CSS3实现了动态的月食效果.动画其实比较简单简短,需要的朋友可以自行做一下分析,这里就不多介绍了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

css3代码实现的鼠标悬浮按钮效果代码实例

css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前,鼠标悬浮于按钮之上,无非是设置按钮的大小.字体颜色或者背景图片等简单的项目,但是css3的出现,可以让设置变得丰富多彩,下面就是一个css3实现的此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

css3实现的绘制图形图案效果代码实例

css3实现的绘制图形图案效果代码实例:如果使用css2实现绘制图形图案几乎是不可能的,或者说费好大的劲也只能够得到非常简单的图案,css3的出现将绘制复杂的图形这个目标成为可能,下面就是一个相关的代码实例,有这方面需要的朋友可以参考一下它的实现方式.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

CSS3实现的鼠标悬浮开门关门效果代码实例

CSS3实现的鼠标悬浮开门关门效果代码实例:本章节分享一段代码实例,它利用CSS3模拟实现了简单的开门关门效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落<