HTML5-幽灵按钮的制作

 时间:2024-10-30 16:36:35

1、以下便是幽灵按钮的完成图,鼠标移到图标上时,图标会变大旋转360度,移到按钮上,会弹出一个绿色提示框,边框的各个方向还会有线条由短变长,移动到边框上。

HTML5-幽灵按钮的制作HTML5-幽灵按钮的制作HTML5-幽灵按钮的制作

2、打开WebStorm,新建一个Html file,为网页布局,代码如下图。

HTML5-幽灵按钮的制作

3、按钮制作的核心内容:1.transform 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
2.transition 是一个简写属性,用于设置四个过渡属性,也就是转换参数。
3.box-sizing 允许以特定的方式定义匹配某个区域的特定元素。
4.border-radius 该属性允许您为元素添加圆角边框CSS代码太长,见网盘内文件。

4、事件触发代码是用jQuery写的(需要事先下载该库),主要实现鼠标触发事件从而改变CSS的效果。代码如下:

HTML5-幽灵按钮的制作

5、整个网页中可能提示框要特别点,由一个圆角矩形和小三角组成,文字是获取的a标签的data-title属性值,详细实现参考代码。

HTML5-幽灵按钮的制作
  • css中怎么让多张图片垂直居中
  • IntelliJ IDEA2018设置文本字体大小
  • 使用IntelliJ IDEA创建你的第一个Java程序
  • JDK配置环境变量详解
  • css两张图片重叠显示
  • 热门搜索
    红豆的作用 什么是群众路线 摆地摊卖什么最火 地贫有什么症状 白酒的功效与作用 李米的猜想到底讲什么 灵芝的功效与作用 什么是ems 运动卡路里 唐代古文运动