css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮

想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用css3创建一个旋转,旋转,可变色按钮。

这是一个演示旋转的css3按钮。让我们先从html:

复制代码代码如下:

旋转按钮

和现在的css:

复制代码代码如下:

.button

{

background:#aaa;

color:#555;

font-weight:bold;

font-size:15px;

padding:10px 15px;

border:none;

margin:50px;

cursor:pointer;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;

-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;

-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

-webkit-border-radius:5px;

border-radius:5px;

box-shadow:0 0 2px rgba(0,0,0,0.5);

text-shadow:0 0 5px rgba(255,255,255,0.5);

display:inline-block; /*它是重要为按钮旋转*/

}

这里的关键代码转换属性,它可以定义通过宽度、高度、背景、颜色、透明度等。在这个例子中,属性是改变每一秒,根据过渡时间属性。

transition: opacity 2s ease-out, background 1s linear, width 1s, height 1s, font-size 1s;

接下来,使用这段代码来触发纺丝效果通过盘旋元素;

复制代码代码如下:

.button:hover

{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

background:#99a411;

font-size:30px;

color:#fff;

}

转换元件旋转360度的按钮,一个完整的圆。其余的代码更改颜色和字体大小。

玩得高兴这一个。也许你可以使它有用的一些有趣的节日按钮。也许你甚至可以升级它旋转一个按钮,更改从一个到另一个图像。谁知道呢?可能性是无穷无尽的

css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮相关推荐

点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作
点击按钮创建一个表格 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
用 Lunchbox 在 vue3 中创建一个旋转的 3D 地球竟是如此简单
⭐️ 本文首发自前端修罗场(点击加入),是一个由资深开发者独立运行的专业技术社区,我专注 Web 技术.Web3.区块链.答疑解惑.面试辅导以及职业发展.现在加入,私聊我即可获取一次免费的模拟 ...
java添加多个按钮_java – 如何为多个JButton创建一个ActionListe...
我正在使用MVC创建一个基本的计算器.到目前为止,我正在调整一个教程,它只将两个用户输入的值相加. 目前我添加到视图中的每个按钮都有自己的监听器,这没关系.但是,根据教程的控制器每个按钮只有一个Act ...
OpenGL学习笔记：使用深度缓冲(Depth Buffer)创建一个旋转的立方体
如果不使用深度缓冲,创建的立方体的某些本应被遮挡住的面被绘制在了这个立方体其他面之上.OpenGL是一个三角形一个三角形地来绘制你的立方体的,所以即便之前那里有东西它也会覆盖之前的像素.因为这个原因, ...
element中根据条件判断按钮是否禁用_从零动手封装一个通用的vue按钮组件
我们在使用目前最主流的前端框架vue在开发过程中,组件是一个非常重要的组成部分,可以这么说,所有的vue应用,都是由一个一个的小组件拼装而成的. 正是由于vue组件如此重要,所以vue的生态中,也非常 ...
python添加一个球_在Python中创建一个旋转球体
我已经做了这个代码,在一个球形的方式应用球谐函数,因为我正在尝试建立恒星脉动模式的模型.理想情况下,我希望能够有一个可以旋转的图像,可以保存为gif图像.我已经找到了一些代码示例,但是这些示例似乎都不 ...
java怎么添加到按钮组_如何在Java中创建一个带有连接按钮的ButtonGroup？
我目前正在尝试创建一组切换按钮,这些按钮类似于Eclipse的格式化程序首选项中使用的按钮: 目前我已通过以下方式尝试此操作: public class Exercise extends JFrame ...
Vue中用Three.js创建一个3D会议室（三）拖动与旋转
第三章文章目录拖动 DragControls 旋转获取鼠标选中的3D模型添加旋转按钮以及旋转方法小贴士虽然现在基本的模型都创建出来了,但是我们3D会议室的主要目的是可以自己摆放会议室中的物 ...
xul 创建一个按钮
MDN Mozilla 产品与私有技术 Mozilla 私有技术 XUL Toolbars 添加工具栏按钮 (定制工具栏) 添加工具栏按钮 (定制工具栏) 在本文章中创建一个 overlay 在工具 ...

css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮

css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮相关推荐

最新文章

热门文章

css旋转按钮制作,css3 旋转按钮 使用CSS3创建一个旋转可变色按钮

css旋转按钮制作,css3 旋转按钮 使用CSS3创建一个旋转可变色按钮相关推荐

最新文章

热门文章

css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮

css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮相关推荐