<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单而惊人的CSS3边框过渡效果</title>
<style class="csscreations">body {
padding: 100px 20px;
}
a {
background-image: url(data:image/gif;base64,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);
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
display: inline-block; width: 100px; height: 100px;
border-width: 50px;
border-color: rgba(0,0,0,0);
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover {
border-width: 0;
border-color: rgba(0, 0, 0, 0.5);
}
.one{border-style: solid;}
.two{border-style: dashed;}
.three{border-style: dotted;}
.yon {border: 50px solid rgba(0, 0, 0, 0.7);}
.goo {border: 50px dashed rgba(0, 0, 0, 0.7);}
.rok {border: 50px dotted rgba(0, 0, 0, 0.7);}
.ryk {border: 50px double rgba(0, 0, 0, 0.7);}
.yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}
.goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}
.rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}
.ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}
.x7, .x8, .x9 {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.x7 {border: 50px solid rgba(0, 0, 0, 0.7);}
.x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}
.x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}
.x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}
.x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}
.x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}</style></head>
<body>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
<a href="#" class="three"></a>
<br />
<a href="#" class="yon"></a>
<a href="#" class="goo"></a>
<a href="#" class="rok"></a>
<a href="#" class="ryk"></a>
<br />
<a href="#" class="x7"></a>
<a href="#" class="x8"></a>
<a href="#" class="x9"></a></body>
</html><script></script>
<style>
<!--.Controls{position:absolute;z-index:9999;right:30px;top:10px;width:80px;height:30px;line-height:30px;background-color:#eee;opacity:0.5;font-size:10px;text-align:center;}
.Controls a{text-decoration:none;margin:10px 5px;}-->
.GoEdit{opacity: 0; position: fixed; top: -1px; right: -1px; padding: 5px 10px; background-color: rgb(204, 204, 204); color: rgb(51, 51, 51); text-shadow: rgb(255, 255, 255) 0px 1px 1px; border-top-right-radius: 5px; border: 1px solid rgb(153, 153, 153); text-decoration:
none; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue', Arial, Helvetica; -webkit-transition: opacity 100ms ease-out; background-position: initial initial; background-repeat:
initial initial; }
</style>
<script type="text/javascript" src="/tools/jsbin/edit.js"></script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2b9232a7b0ced15280772333a4ec7c3a' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- Generated by OSCTools.NET (Tue Jul 24 23:23:19 CST 2012) 4ms -->
分享到:
相关推荐
4.8 CSS的过滤器属性(上)(下)New 第五章、Javascript 5.1 Javascript概念、特点和作用 New 5.2 Javascript的格式和常量 New 5.3 变量 New 5.4 表达式和运算符(上)(下) New 5.5 语句(上)(下) New 5.6 ...
很棒的设计 面向数字设计师的不断增长/变化的工具、...CSS 边框半径 CSS 剪辑路径制作工具 CSS 颜色名称 CSS过滤实验室 CSS 值 网格/结构 960网格发生器 网格计算器 响应式网格系统 图标和实体 应用程序图标模板 Cop
HTML5漂亮的立体表格特效,CSS3制作的圆角立体边框表格效果(通过css3设置圆角绘边框)。没有使用图片,但阴影效果很漂亮,看上去过滤很平滑,不过在打开网页的时候,似乎渲染的时间比较长。
Ant Design 基于Ant Design 设计语言,我们提供了开箱即用的高质量 React 和 Angular ...修复 Tabs 组件下边框与其他边框叠加的样式问题 修复 Dropdown.Button down 图标尺寸问题 TypeScript 修复 Breadcrumb.Item me
css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第15周 上节内容答疑 上节内容回顾 CSS内容补充之position CSS内容补充之overflow CSS内容之...
CSS滤镜效果即将标准化。 常规JavaScript太慢了,无法完成ASS所需的精美渲染。 当然,让浏览器呈现文本比解析JS中的字体,计算每个呈现字符的尺寸和边距,以及将单个轮廓和阴影像素涂抹到画布上要快。 但是,CSS...
拖放以重新排序列表中的项目截屏链接我的过程内置CSS自定义属性弹性盒移动优先的工作流程 -JS库我学到的是使用CSS变量: : root { --dark-grayish-blue : hsl ( 236 , 9 % , 61 % );}. wrapper { background-color :...
│ │ ├20css边框以及其他常用样式.avi │ │ ├21css之float样式.avi │ │ ├22css之float实现作业实例.avi │ │ ├23css之display样式.avi │ │ ├24css之内外边距.avi │ │ ├25本周作业以及思路.avi │ │ ...
glassmorphism的代码:复制此代码并将其替换为容器CSS中的背景图片 背景:rgba(246,246,246,0.15); box-shadow:0 8px 32px 0 rgba(31,38,135,0.37); 背景过滤器:blur(4.5px); -webkit-backdrop-...
295 10.6 向标题文字应用样式 297 10.7 缩进多个段落的第一行 297 10.8 创建带有悬挂缩进的段落 298 10.9 创建带有边框的提取引用 299 10.10 创建带有图片的提取引用 301 10.11 向列表项应用列表属性 302 10.12 只对...
[FIX]仍然无法找出明信片vimgpc上的错误边框尺寸 [FIX,WIP]将帖子列表抽象为一个vue组件 在主页上使用此帖子,所有帖子 考虑在此处添加过滤器/排序功能,并将其与主题页面一起使用 [FIX]修复丑陋CSS [功能]设置...
01 css的文本属性与边框属性 02 css的列表属性与display属性 03 css的内外边距 04 css的内外边距补充 05 css的float属性 06 css的清除浮动 07 css的定位 08 css的margin定位 第40章 01 抽屉作业之head区域(导航条...
支持通配符和正则表达式-(可选)仅显示链接中的图像-通过单击图像选择要下载的图像-使用专用按钮下载或在新标签页中打开单个图像-自定义图像的显示宽度,列,边框大小和颜色-隐藏过滤器,不需要的按钮和通知按下...
12、搜索过滤 16 13、注意 16 14、WCM高级搜索参数 16 ADVANCED WCM/WEBSPHERE PORTAL SEARCH INTEGRATION 17 Introduction 17 How to search WCM content using this metadata 18 Specific example 21 15、高级参数...
这会根据用户指定的过滤条件执行随机食物位置搜索 您是否曾经饿着肚子,却无法决定在哪里吃饭? 然后,美食轮盘适合您。 美食轮盘为用户提供了一种有趣的方式,可以根据各种简单的参数来决定在哪里用餐。 用户选择了...
CSS :star: :clapper_board: :star: :artist_palette: :artist_palette: :star: :star: :star: :star: :star: :clapper_board: 媒体查询 弹性盒 :star: :star: :star: —— :star: 网格 引导程序 JavaScript :star: ...
实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例183 通过下拉列表选择头像 ...
自定义弹出式窗口边框 2.14节. 处理focusIn和focusOut事件 第三章容器(65) 3.1 节使用布局管理器布置子组件 3.2 节通过百分比方式配置容器的布局和尺寸 3.3节. 以不同的坐标系统跟踪鼠标位置 3.4 节在容器中动态...