正文
按钮css3生成器 css给按钮设置背景图片
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css3怎么做出按下按钮就会有爆炸的效果
修改相关的参数，可以达到爆炸效果
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titletwitterLove/title
/head
body
canvas width="100" height="100" style="border: 1px black solid"
必须要把style写在内联，不然会变成椭圆。而且width与height要单独写出来
注意：1，每画一个图形都要提起笔。不然会连在一起
2，arc的(centerX[圆心横坐标，以父节点的右上角为坐标原点，向左向下建立坐标轴],centerY,r[半径],
startAngle[起始点的角度。起始以（1，0）表示0，（0，1）表示3/2*PI计算。当设置为逆时针的时候画出来是起点到终点之间的扇形出去中心三角],
endAngle,anticlockwise（是否逆时针）)
3，画图的时候要计算好坐标
4，最好以角度值百分比计算。流式布局更能适应各种大小的缩放
5，注意提取公共函数
6，要划分步骤
7，注意上一幅图与下一幅图的关系。用clearRect来清除
/canvas
script
var canvas=(document.getElementsByTagName("canvas"))[0];//获取绘图区域，是一个正方形区域
var ctx=canvas.getContext("2d");//获取画笔
//必须写在外面，公共的
var centerX=(canvas.width)*0.5;
var centerY=(canvas.height)*0.5;//获取中心,是一个正方形
//获得一个爱心
function love(color,centerX,centerY,size){
ctx.beginPath();
//上半部
var smallRadius=Math.round(centerX/size);//小圆的半径
var smallMoveLen=smallRadius*Math.sqrt(3)/2;
ctx.fillStyle=color||"red";
ctx.arc(centerX-smallMoveLen,centerY,smallRadius,Math.PI*7/4,Math.PI,true);
ctx.arc(centerX+smallMoveLen,centerY,smallRadius,0,Math.PI*5/4,true);
//下半部
var bigRadius=smallRadius*2.73;
ctx.arc(centerX+smallMoveLen,centerY,bigRadius,Math.PI,Math.PI*0.6,true);
ctx.arc(centerX-smallMoveLen,centerY,bigRadius,Math.PI*0.4,0,true);
ctx.fill();
ctx.closePath();
}
love("grey",centerX,centerY,8);//默认灰色
//注册监听
canvas.addEventListener("click",function () {
if(ctx.fillStyle=="#808080"){//表示为灰色
// alert("点赞");
//1，爱心消失//清除画板内容
ctx.clearRect(0,0,centerX*2,centerY*2);
//动态图
var bigRadius=centerX/2;
var midRadius=centerX/5;
var smallRadius=centerX/10;
//2，小圆,圆心都是中心位置
setTimeout(function () {
ctx.beginPath();
ctx.fillStyle="#FF6BDB";
ctx.arc(centerX,centerY,smallRadius,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();//必须要提笔。不然和前面一只笔相当于没提起来
},100);
//3，中圆
setTimeout(function () {
ctx.beginPath();
ctx.fillStyle="#9FD5FF";
ctx.arc(centerX,centerY,midRadius,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
},200);
//4，大圆
setTimeout(function () {
ctx.beginPath();
ctx.fillStyle="#FF84A6";
ctx.arc(centerX,centerY,bigRadius,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
},300);
//5，小爱心
setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2);
ctx.beginPath();
ctx.fillStyle="#FF84A6";
ctx.arc(centerX,centerY,bigRadius,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle="#ffffff";
ctx.arc(centerX,centerY,midRadius*2,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
love("purple",centerX,centerY,16);
ctx.closePath();
},400);
//6，四周小圆
setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2);
var e=bigRadius/(Math.sqrt(2));
var centerXArr=[centerX-bigRadius,centerX-e,centerX,centerX+e,centerX+bigRadius,centerX+e,centerX,centerX-e];
var centerYArr=[centerY,centerY-e,centerY-bigRadius,centerY-e,centerY,centerY+e,centerY+bigRadius,centerY+e];
for(var i=0;i8;i++){
ctx.beginPath();
ctx.fillStyle="blue";
ctx.arc(centerXArr[i],centerYArr[i],smallRadius/4,0,2*Math.PI,false);
ctx.fill();
ctx.closePath();
}
ctx.fillStyle="#ff0000";
love("ff0000",centerX,centerY,8);//red
},500);
//7，红色大爱心
setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2);
ctx.beginPath();
love("ff0000",centerX,centerY,8);
ctx.closePath();
},600);
}
else if(ctx.fillStyle=="#ff0000"){//表示为红色
// alert("取消赞");
ctx.fillStyle="#ff0000";
love("#808080",centerX,centerY,8);
}
},false);
/script
/body
/html
相关问答
Q1: 网页设计常用的软件
几个网页设计工作中经常会用的在线工具，能够大大的提供工作效率!
ProCSSor
ProCSSor是一个很不错的CSS代码美化工具，它可以轻松的把代码转换成很美观的格式。
jsFiddle
JsFiddle有多种用途，其中一个用法就是可以在线编辑HTML,CSS和JavaScript片段，而且代码可以分享，还可以嵌入到你的博客中等等。
FrameBox
FrameBox是一个非常好用的用于在线分享线框图（wireframes）的工具。
Spritebox
Spritebox是一个所见即所得的工具，帮助Web设计者迅速而轻松地从一张精灵图片（CSSSpritImage）创建CSS类和ID选择符样式。这里涉及到一项技术叫CSSSprites，在国内很多人叫CSS精灵，它是的基本原理是使用CSS的背景系列属性的组合进行背景图片的精确定位。
CSS3Generator
这是一个简单的跨浏览器CSS3样式生成器，可以生成你想要的任何值。
SuperConversionButton
这个工具可以帮助你瞬间生成一个美观的试用（Tryitnow）按钮。
wordmark.it
这个工具之前曾介绍过，可以帮助你直观的查看当前电脑上安装了哪些字体。
Q2: 为什么在一些css3渐变代码生成器里,webkit渐变的私有写法要写两种？
旧版↓
-webkit-gradient(linear, 0 0, 0 100%, from(color), to(color))
新版↓
-webkit-linear-gradient(top，color，color)
标准↓
linear-gradient(to bottom, rgba(255, 255, 100, 1), rgba(255, 220, 0, 1))
旧版的好像只有webkit内核的浏览器支持过一段时间
新版的几乎是所有现代浏览器都支持，但是要带-webkit-, -moz-, -ms-之类的前缀
标准版是所有浏览器最新版都支持，不用前缀的
最好是所有都写以兼容更多浏览器
Q3: 纯CSS3三角形按钮，带描边及投影，可以实现吗？
div class="arrow-up"
!--顶角向上的三角形--
/div
style type="text/css"
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}
/style
效果如下图：
要实现不同方向的三角形，调整四条边的 border 样式属性就行了
Q4: 网页设计师非常有用的几个在线工具
时间戳转换
功能简介：Unix时间戳和北京时间互转、获取时间戳方法
地址：
代码对比/归并
功能简介：在线检测/比较两个文件文本的不同
地址：
LESS编译器
功能简介：将LESS代码编译成CSS代码，方便前端人员使用
地址：
crontab表达式
功能简介：根据crontab表达式计算未来N次的执行时间
地址：
代码格式化
功能简介：可以对SQL、XML、JSON代码进行格式化和美化
地址：
编码转换
功能简介：URL解码、Native转UTF-8、Native转ASCII
地址：
网页调色板
功能简介：网页颜色选择器、颜色代码查询、RGB颜色值参考
地址：
正则表达式
功能简介：正则表达式匹配和替换、多种常用正则表达式
地址：
答题
功能简介：学霸，快来做题，提升一下你的技能吧
地址：
Markdown
功能简介：将web上的文本转换成HTML文档
地址：
UBB编译器
功能简介：UBB是一种网页中的替代HTML代码的安全代码
地址：
进制转换
功能简介：2~36进制之间任意进制转换，支持浮点型
地址：
CSV转HTML
功能简介：将CSV数据转换为HTML的表格,并展示在页面上
地址：
HTML特殊符号
功能简介：HTML特殊字符编码大全
地址：
XML转JSON
功能简介：XML和JSON的内容和输出互相转换
地址：
HTML转JS
功能简介：HTML和JS的内容和输出互相转换
地址：
js/css压缩
功能简介：在线压缩Javascript和CSS代码
地址：
网页常用字体
功能简介：总结了各种常见的网页字体的显示效果
地址：
Cron生成器
功能简介：可以在线生成任务调度Quartz的Cron表达式
地址：
JSON格式化
功能简介：Json解析、验证、格式化、压缩、以及Json与XML相互转换
地址：
SQL格式化
功能简介：sql在线美化、格式化、脚本压缩
地址：
端口扫描
功能简介：扫描常用或指定的端口，查看端口是否开放
地址：
Base64编码解码
功能简介：将字符base64编码加密,或者将base64加密的字符还原
地址：
MD5加密
功能简介：生成32位和16位的大写和小写的密文
地址：
摩斯电码
功能简介：在线摩斯电码加密解密
地址：
IP查询
功能简介：查询IP或域名的地理位置和宽带供应商、查看本机IP
地址：
文字加密解密
功能简介：支持AES、DES、RC4、Rabbit 等多种算法
地址：
HTTP状态查询
功能简介：检测网页返回的HTTP状态码
地址：
生成htpasswd
功能简介：生成htpasswd
地址：
favicon图标制作
功能简介：将上传图像剪切并生成ico格式的图标
地址：
传图识字
功能简介：可以将一段含有英文文字的照片免费转化成文字
地址：
gif图制作
功能简介：一键生成gif动态图、闪图和搞笑表情包
地址：
生成二维码
功能简介：可以设置图像格式、容错率、大小、颜色及LOGO
地址：
图片转pdf
功能简介：在线免费将多张图片转成pdf文档，一键生成pdf文档
地址：
人脸识别
功能简介：在线人脸识别，自动识别人脸批量裁剪出头像图片
地址：
DIY卡通头像
功能简介：免费的动漫人物制作工具，可以随心定制男女卡通头像
地址：
传图识色
功能简介：可以识别出光标所在处图片的颜色，并提取出图片的主色调
地址：
手绘图片
功能简介：可以自动生成手绘风格照片，还可以改变照片的模糊度
地址：
图片转Base64
功能简介：图片和Base64编码互转
地址：
衣服尺码计算
功能简介：输入你的身高体重，即可计算出你需要的衣服尺寸
地址：
身份证信息查询
功能简介：输入身份证号，查询归属地、性别和出生年月
地址：
科学计算器
功能简介：开方(√)、圆周率(π)、倒数(1/x)、正弦(Sin)
地址：
大小写转换
功能简介：可以实现人民币数字大写转换和英文大小写转换
地址：
日期间隔计算
功能简介：一款可以计算两个日期之间的天数的工具
地址：
汉字转拼音
功能简介：可以将汉字转化为带声调的拼音
地址：
文字去重
功能简介：该工具可得到无重复数据的文字
地址：
单位换算器
功能简介：长度、面积、重量、温度等单位一键对等转换
地址：
中文简繁转换
功能简介：将输入的一段文字转换为简体或繁体
地址：
阴阳历转换
功能简介：支持农历公历互查，公历和农历互相转换
地址：
邮编区号查询
功能简介：输入省份、城市、区号或邮编查询该地区号
地址：
字数统计
功能简介：快速计算文章中汉字、标点、英文和数字的个数
地址：
Q5: 想给按钮左右切换加个动画效果怎么写css3
看你是如何实现的
一般来说，增加动画可以使用：animation ,想要过渡的话使用transition.
transition: 参考
animation:参考
W3school资料还是很好的。
按钮css3生成器的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css给按钮设置背景图片、按钮css3生成器的信息别忘了在本站进行查找喔。
