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

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. 用Markdown写博客快速入门

    Markdown,简单来说,就是一种可以方便转换为HTML的带标记符号纯文本. 它是对我等键盘党的福音:我不用再费劲挪动鼠标去按加粗.设置段落了,用键盘输入所有文本,一气呵成. 最重要的是,cnblo ...

  2. ES6 WeakMap Map 区别

    WeakMap与Map的区别 1.WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名. 2.WeakMap的键名所指向的对象,不计入垃圾回收机制. 示例: const wm ...

  3. js实现页面元素随着内容的滚动而滚动

      CreateTime--2017年9月4日16:55:06 Author:Marydon js实现页面元素随着内容的滚动而滚动 分析: CSS样式,使用绝对定位确定好页面元素在屏幕的位置(如:正中 ...

  4. Codeforces 276E(树状数组)

    题意:一棵树有n个节点,1是根节点,根节点的子节点是单链,然后如今有两种操作0 v x d表示距离节点v为d的节点权值都加x,操作1 v问v节点的权值,初始节点权值都是0. 题解:看了别人的题解才会的 ...

  5. Nutch的发展历程(转)

    2002年8月由Doug Cutting发起,托管于Sourceforge,之后发布了0.4.0.5.0.6三个版本 2004年9月Oregon State University(俄勒冈州立大学)采用 ...

  6. .NET面试题（二）

    基础方面: 1.简单的描述一下C# 中重写,重载,隐藏的概念 C#中重写(overide)是子类继承父类后,对父类中的方法进行行为改写. 重载是指方法名相同,参数不同 重写和隐藏的定义: 重写:基类方 ...

  7. 任务调度Cron表达式及Quartz代码详解

    在线Cron表达式生成器 http://cron.qqe2.com/ cron表达式详解 http://www.cnblogs.com/linjiqin/archive/2013/07/08/3178 ...

  8. Java并发编程（七）：线程安全策略

    Java多线程——不可变对象 Java多线程——线程封闭 java线程不安全类与写法 Java线程安全同步容器 Java里的并发容器与安全共享策略总结

  9. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  10. oracle 查询前30条数据

     select * from (select a.*,rownum as rn from tetm_ad_type  a) b where b.rn<30 --表名不能用as 字段取别名,直 ...