本文目录
- 纯CSS3三角形按钮，带描边及投影，可以实现吗
- 纯css怎么做质感的按钮
- css3怎么做出按下按钮就会有爆炸的效果
- css3怎样让按钮从右上角滑动出来
- 想给按钮左右切换加个动画效果怎么写css3
- css3中的button样式怎么改
- 如何通过CSS3+JS实现安卓L按钮点击水波纹效果
纯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 样式属性就行了
纯css怎么做质感的按钮
CSS3按钮HTML代码：《div id=“container_buttons“》《p》《a href=“#“ class=“a_demo_one“》Click me!《/a》《/p》《p》《a href=“#“ class=“a_demo_one“》Come on, don’t be afraid《/a》《/p》《p》《a href=“#“ class=“a_demo_one“》You can make this as wide as you want ;)《/a》《/p》《/div》CSS3按钮CSS样式代码：.a_demo_one {background-color:#3bb3e0;padding:10px;position:relative;font-family: ’Open Sans’, sans-serif;font-size:12px;text-decoration:none;color:#fff;border: solid 1px #186f8f;background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}.a_demo_one::before {background-color:#ccd0d5;content:““;display:block;position:absolute;width:100%;height:100%;padding:8px;left:-8px;top:-8px;z-index:-1;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;}.a_demo_one:active {padding-bottom:9px;padding-left:10px;padding-right:10px;padding-top:11px;top:1px;background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,184,229)),color-stop(1, rgb(44,160,202)));}
css3怎么做出按下按钮就会有爆炸的效果
修改相关的参数，可以达到爆炸效果
《!DOCTYPE html》《html lang=“en“》《head》 《meta charset=“UTF-8“》 《title》twitterLove《/title》《/head》《body》《canvas width=“100“ height=“100“ style=“border: 1px black solid“》 必须要把style写在内联，不然会变成椭圆。而且width与height要单独写出来 注意：1，每画一个图形都要提起笔。不然会连在一起 2，arc的(centerX,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》css3怎样让按钮从右上角滑动出来
像这种需求你可以用js或者jQuery编写。
如果不想使用js或者jquery，那么用css的过渡属性代码如下：
鼠标滑入，出现效果
transition: right .7s ease;
right为过渡的属性，可以是宽高，top/lelft/right/bottom/opacity等等。只要记住transition不能过渡display就行。
.7s 为过渡所需要的时间，ease为过渡的样式，是匀速过渡还是先快后慢等等。
如果没有鼠标事件，那么就需要用到css3的动画，animation。css3的动画详情卡查看
想给按钮左右切换加个动画效果怎么写css3
看你是如何实现的一般来说，增加动画可以使用：animation ,想要过渡的话使用transition.transition: 参考
css3中的button样式怎么改
在一个id为bt1的按钮上设置样式，如下：
#bt1{
font-family:微软雅黑 ; 《!-- 字体 --》width: 60px ; 《!-- 宽度 --》height:30px ; 《!-- 高度 --》font-size:14px; 《!-- 字体大小--》color:gray; 《!--字体颜色 --》border: 1px solid red； 《!-- 边框；边框宽度、单线、边框颜色 --》margin-left: 10px; 《!-- 左边距，相应的还有右边距margin-right, 上margin-top,下 margin-buttom --》background-color:#F1F1F1; 《!--背景色；十六位颜色表示时前加#符号 transparent是透明--》box-shadow:10px 10px 10px gray; 《!-- 阴影；x轴偏移（右偏为正），y轴偏移（向下 为正），模糊度，模糊颜色 --》border-radius:10px 10px 10px 10px;《!-- 圆角；左上，右上，右下，左下--》cursor:pointer; 《!-- 鼠标经过时鼠标变成小手 --》}
如何通过CSS3+JS实现安卓L按钮点击水波纹效果
你可以获取对话框的点击事件，比如点击了确定然后你就跳转 AlertDialog.Builder builder = new Builder(CommentActivity.this); builder.setMessage(“确定要跳转吗?“); builder.setTitle(“提示“); builder.setPositiveButton(“确认“, new android.content.DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface arg0, int arg1) { // TODO Auto-generated method stub arg0.dismiss(); 这里跳转到你想要去的页面 } }); builder.setNegativeButton(“取消“, new android.content.DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }); builder.create().show(); arg0就是该listener的接口啊，通过这个参数就可以关闭对话框。 跳到想去的页面就startIntent就好了，你把那一行中文换成 Intent it = new Intent(this,UserActivity.class); startActivity(it); 当然要跳去哪个页面就你自己决定 AlertDialog.Builder builder = new Builder(CommentActivity.this); builder.setMessage(“确定要跳转吗?“); builder.setTitle(“提示“); builder.setPositiveButton(“确认“, new android.content.DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface arg0, int arg1) { // TODO Auto-generated method stub arg0.dismiss(); Intent it = new Intent(this,UserActivity.class); startActivity(it); } }); builder.setNegativeButton(“取消“, new android.content.DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }); builder.create().show();
