源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] 6种非常炫酷的CSS3按钮边框动画特效

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-3-16 10:39:06 | 显示全部楼层 |阅读模式
这篇文章主要介绍了一款效果非常炫酷的CSS3按钮边框动画特效,按钮的边框会以不同的方式进行各种动画,感兴趣的小伙伴们可以参考一下

这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。

在线预览    源码下载

使用方法 

HTML结构

该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作。各种效果非标设置不同的class。例如第一种效果的class为draw。

XML/HTML Code复制内容到剪贴板
  1. <button class="draw">draw</button>          

CSS样式

在CSS样式中,首先为按钮设置一些基本样式,去掉原生按钮的样式。

CSS Code复制内容到剪贴板
  1. button {   
  2.   background: none;   
  3.   border: 0;   
  4.   box-sizing: border-box;   
  5.   box-shadow: inset 0 0 0 2px #f45e61;   
  6.   color: #f45e61;   
  7.   font-size: inherit;   
  8.   font-weight: 700;   
  9.   margin: 1em;   
  10.   padding: 1em 2em;   
  11.   text-align: center;   
  12.   text-transform: capitalize;   
  13.   position: relative;   
  14.   vertical-align: middle;   
  15. }   
  16. button::before, button::after {   
  17.   box-sizing: border-box;   
  18.   content: '';   
  19.   position: absolute;   
  20.   width: 100%;   
  21.   height: 100%;   
  22. }               
  23.   

以上是第一种线条动画效果的制作方法。其它效果的CSS代码请参考下载文件。

本文就为大家介绍到这,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/w2bc/p/4922347.html

回复

使用道具 举报

14

主题

1万

回帖

75

积分

注册会员

Rank: 2

积分
75
发表于 2022-11-7 04:05:03 | 显示全部楼层
借款金额看了就立刻
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2023-5-15 23:25:53 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2023-6-24 04:10:33 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-1 15:13:26 | 显示全部楼层
很好,谢谢分享
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2023-9-9 18:21:54 | 显示全部楼层
给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-1-30 08:22:47 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2024-3-21 06:54:51 | 显示全部楼层
不错的源码论坛
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2024-4-16 03:45:14 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-5-7 15:44:38 | 显示全部楼层
还有什么好东西没
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-29 02:56 , Processed in 0.159410 second(s), 44 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表