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

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. CSS之word-break : break-all

    CSS之word-break : break-all 强制英文单词断行 div{     word-break:break-all; } 强制不换行 div{     white-space:nowr ...

  2. Apache Spark(转)

    来自:维基百科,自由的百科全书 Apache Spark是一个开源簇运算框架,最初是由加州大学柏克莱分校AMPLab所开发.相对于Hadoop的MapReduce会在运行完工作后将中介数据存放到磁盘中 ...

  3. jBoss修改端口号

    http://blog.csdn.net/ghost_t/article/details/5708991 jBoss版本: jboss-5.1.0.GA jboss-6.0.0.Final     j ...

  4. 利用 meta 标签重定向

      页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒),把这句话加到指定网页的<head></head>里一般也用在实时性很强的应用 ...

  5. ajax 参数data问题 data中的 参数名 参数值为string 提交到后台后，会自动转换参数名相同的 类型 和 js字符串拼接

    latlng"14.6005238,100.43635419999998"Cusid"accb5c1b-6aef-4f3b-a4eb-d60ea1ca5f54" ...

  6. 安装inkscape for mac注意事项

    今天为了安装inkscape for mac,搞了一下午.按以前的方法,先安最新的XQuartz,再安最新的inkscape,在运行inkscape前先打开XQuartz.但是发现不行了,inksca ...

  7. zookeeper（六）：Zookeeper客户端Curator的API使用详解

    简介 Curator是Netflix公司开源的一套zookeeper客户端框架,解决了很多Zookeeper客户端非常底层的细节开发工作,包括连接重连.反复注册Watcher和NodeExistsEx ...

  8. loongson官方PMON使用

    目录 [隐藏]  1 PMON使用介绍 1.1 进入PMON控制界面 1.2 Pmon的图形界面 1.3 Pmon的基本命令 1.3.1 Boot and Load 启动与加载内核 1.3.2 MyC ...

  9. VS编译duilib项目时候的错误解决方法整理

    @1:找不到Riched20.lib 用everything等软件搜索下磁盘.找到所在的文件夹加入到vs的库文件夹就可以.我得是C:\Program Files (x86)\Microsoft SDK ...

  10. Jmeter常用操作

    一,Jmeter-http 接口脚本添加cookie 实例:学生金币充值接口  该接口有权限验证,需要admin 用户才可以操作,需要添加cookie cookie 中key 为登录的用户名,valu ...