以下内容不是原创 我是搬运工

1.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>myHeart</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.heart{
position:absolute;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -135px;
width: 300px;
height:270px;
background: transparent;
/*box-shadow: 2px 2px 5px #000;*/
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
animation: test 1s linear infinite;
}
.heart:before,
.heart:after{
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 240px;
background: rgb(255,0,0);
border-radius: 150px 150px 0 0;
transform:rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after{
left: 0;
transform:rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes test{
0%{
transform: scale(0.8,0.8);
opacity: 1;
}
25%{
transform: scale(1,1);
opacity: 0.8;
}
100%{
transform: scale(0.8,0.8);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="heart"></div>
<script>
// alert(window.navigator.userAgent);
</script>
</body>
</html>

2.

<!DOCTYPE html>
<html>
<head>
<title>Draw Heart</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html {
height: 100%;
margin: 0;
}

body {
height: 100%;
background-color:white;
}

#canvasZone {
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}

#myCanvas {
height:100%;
display: block;
/*background-color:aqua;*/
}
</style>
<script type="text/javascript">
var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。
var r = 4;
var radian;//弧度
var i;
var radianDecrement;//弧度增量
var time = 10;//每个点之间的时间间隔
var intervalId;
var num = 360;//分割为 360 个点
var startRadian = Math.PI;
var ctx;
window.onload = function () {
startAnimation();
}
function startAnimation() {
ctx = document.getElementById("myCanvas").getContext("2d");
//让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。
WINDOW_HEIGHT=document.documentElement.clientHeight-20;
WINDOW_WIDTH=document.documentElement.clientWidth-20;
ctx.width = WINDOW_WIDTH;
ctx.heigh = WINDOW_HEIGHT;
drawHeart();
}

function drawHeart() {

ctx.strokeStyle = "red";
ctx.lineWidth = 1;//设置线的宽度
radian = startRadian;//弧度设为初始弧度
radianDecrement = Math.PI / num * 2;
ctx.moveTo(getX(radian), getY(radian));//移动到初始点
i = 0;
intervalId = setInterval("printHeart()", time);
}
//x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)
function printHeart() {
radian += radianDecrement;
ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线
//arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>");
i++;
ctx.stroke();//画线
if (i >= num) {
clearInterval(intervalId);
//document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。
}
}
function getX(t) {//由弧度得到 X 坐标
return 100 + r * (16 * Math.pow(Math.sin(t), 3));
}

function getY(t) {//由弧度得到 Y 坐标
return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
}
</script>
</head>
<body>
<div id="canvasZone">
<canvas id="myCanvas"></canvas>
</div>
<div id="bs">
</div>
</body>
</html>

css3 html5画心的更多相关文章

  1. CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  2. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  3. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  4. 超酷 CSS3/HTML5 3D 飘带菜单实现教程

    今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...

  5. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  6. 8款强大的CSS3/HTML5动画及应用源码

    1.CSS3 jQuery UI控制滑杆插件 今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...

  7. [CSS3 + HTML5] Modernizr

    Modernizr is a library for detecting whether the user's browsers have certain features and based on ...

  8. CSS3/HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,不至于让用户看到一堆表单望而却步.今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外 ...

  9. CSS3&HTML5各浏览器支持情况一览表

    http://fmbip.com/ CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX ...

随机推荐

  1. 算法笔记_079:蓝桥杯练习 区间k大数查询（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正整数,表 ...

  2. pythselenium webdriver

    转自:http://www.cnblogs.com/fnng/archive/2013/06/16/3138283.html 原文档地址: http://docs.seleniumhq.org/doc ...

  3. Visual Studio 2010以及TeamFoundationServer 2010 MSDN免Key版地址分享（转载）

    以下链接转自互联网,已经下载验证SHA1码和MSDN公布的一致,跟我一样不喜欢下试用版再自己动手的同学,请使用最新版的BT工具或者迅雷下载(需要支持Magnet协议) Download Visual ...

  4. mysql general log 查看mysql 运行历史

    我们有时候须要查看mysql的运行历史,比方我们做sql优化的时候,起码要知道运行的sql是什么.框架通常会帮我们拼装sql,所以在程序中不一定能够打印出sql,这个时候就须要mysql的genera ...

  5. 记一次netty版本冲突，报java.lang.NoSuchMethodError: io.netty.util.internal.ObjectUtil.checkPositive的问题

    elasticsearch 5.6中使用TransportClient初始化抛异常 在引入elasticsearch5.6的transportclient包中,会引入netty进行通信. <!- ...

  6. 在centos 5.11上安装pylint

    上午花了两三个小时在折腾pylint的安装. 如果是普通的linux倒也简单,只用运行一个pip install pylint就行了. 可是偏偏那么巧,服务器的版本是centos 5.11 这个版本对 ...

  7. thread_CountDownLatch同步计数器

    CountDownLatch类是一个同步计数器,构造时传入int参数,该参数就是计数器的初始值,每调用一次countDown()方法,计数器减1,计数器大于0 时,await()方法会阻塞程序继续执行 ...

  8. 理解、学习与使用Java中的Optional

    从Java8 引入的一个很有趣的特性是Optional类.Optional类主要解决的问题是臭名昭著的空指针异常(NullPointerException) —— 每个 Java 程序员都非常了解的异 ...

  9. C#遍历计算机上所有的文件

    class Program { static List<string> allFileName=new List<string>(); static void Main(str ...

  10. 13个实用的Apache Rewrite重写规则

    1．去掉域名中的www标记 复制代码 代码如下: RewriteCond %{HTTP_HOST} !^jb51\.net$ [NC]RewriteRule .? http://jb51.net%{R ...