`
Fonkie
  • 浏览: 67730 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

【CSS3】动画线框

    博客分类:
  • CSS
CSS 
阅读更多
<div class="box">动画选框</div>

.box{
  width:300px;
  height:100px;
  border:1px dotted #fff;
  border-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAP////8A/wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgABACwAAAAACAAIAAACDwwuGckJzR4UaEp423InFAAh+QQFCgABACwAAAAACAAIAAACD4wEGcuMvR6cC4hpaU0nFAAh+QQJCgABACwAAAAACAAIAAACEAwiYhvd56KKaErqYDwnrQIAOw==) 1 repeat;
}

示例:
http://codepen.io/puterjam/pen/gGLBj
  • 大小: 867 Bytes
分享到:
评论

相关推荐

    CSS3+SVG绘制外滩建筑群线框轮廓图效果源码.zip

    在本项目中,"CSS3+SVG绘制外滩建筑群线框轮廓图效果源码.zip" 是一个包含利用现代Web技术来实现动态图形展示的资源。这个压缩包可能包含了HTML、CSS和SVG文件,用于创建一个逼真的外滩建筑群线框图。以下是关于CSS3...

    纯CSS3六边形加载动画特效.zip

    【纯CSS3六边形加载动画特效】是一种利用现代浏览器对CSS3特性的支持,创建出的富有视觉吸引力和交互性的加载指示器。这个特效不仅仅局限于传统的圆形或方形,而是采用了更为独特的六边形设计,增加了用户体验的趣味...

    纯CSS3黑白线框按钮动画特效.zip

    【标题】"纯CSS3黑白线框按钮动画特效"是一个基于CSS3技术的网页设计资源,主要用于创建具有视觉吸引力的线框式按钮,并且带有动态效果。这种特效可以使用户界面更加生动,提升用户体验。 【描述】提到的"纯CSS3...

    css3悬停按钮发光遮罩动画特效

    CSS3作为现代网页设计的重要工具,提供了丰富的样式和动画功能,使得我们可以创建出各种吸引人的交互效果,比如这款紫色线框按钮的发光和扫光动画。 首先,我们从基础开始。CSS3中的`:hover`伪类是实现按钮悬停效果...

    CSS3简易线条按钮动画代码.zip

    【CSS3简易线条按钮动画代码】是一个利用CSS3特性实现的创新性按钮设计,它为网页的交互元素增添了视觉吸引力。这种按钮设计尤其适用于那些希望提升用户体验和网站风格的开发者。在描述中提到,当鼠标经过按钮时,...

    使用html5+css3创建优雅的网站

    3. **制作线框图**:线框图用于定义网站的基本结构和布局,确保内容的逻辑性和易用性。 4. **设计像素级原型**:使用图像编辑软件(如Photoshop)设计网站的视觉效果,创建高保真度的原型。 5. **编码实现**:将设计...

    css3实现响应式win8 metro风格页面扁平化设计又一次卷土重来

    - 动态效果:通过CSS3的动画和过渡,为界面添加流畅的交互体验。 - 测试与优化:在多种设备和浏览器上测试,确保兼容性和性能。 4. 性能优化: - 延迟加载:对于大型页面,可以使用懒加载技术,只加载视口内的...

    CSS3黑色线框按钮动画特效

    4. **关键帧动画**(@keyframes):如果需要更复杂的动画效果,如填充色的渐变或者动态形状变化,可以使用CSS3的`@keyframes`规则来定义动画的各个阶段,然后用`animation`属性将这个动画应用到元素上。 5. **响应...

    鼠标悬停div边框动画 jquery 6个动画类型

    利用CSS的`transform`属性和jQuery的`.toggleClass()`,可以在鼠标悬停时让边框进行放大或缩小的动画,增加视觉冲击力。 4. **旋转边框** 类似于缩放效果,结合CSS的`transform: rotate()`和jQuery,可以使边框...

    基于html5+css3模拟学院网页的源码设计仅-供参考.zip

    CSS3则提供了丰富的样式设计功能,如动画、过渡、选择器等,使得网页设计更加灵活和美观。此源码仅供学习和参考,不应用于商业项目。 【描述解析】 描述中提到"html css网页制作成品",意味着这个压缩包包含了一个...

    钢铁化工企业css3网页模板是一款大气精美风格工业类网站模板下载。.rar

    标题中的“钢铁化工企业css3网页模板”表明这是一个专为钢铁和化工企业设计的网站模板,利用了CSS3技术来实现其美观和功能性的结合。CSS3是层叠样式表的第三版,它引入了许多新的特性和改进,使得网页设计更为丰富和...

    CSS3紫色发光按钮悬停特效特效代码

    CSS3的`@keyframes`规则定义了一个动画的过程,由多个关键帧组成,每个关键帧代表了动画的某个阶段。在紫色发光按钮的悬停特效中,可能使用了`@keyframes`来定义从无发光到发光的过程,然后通过`animation`属性将这...

    css3文字菜单鼠标悬停变色特效

    本文将详细解析"css3文字菜单鼠标悬停变色特效"这一主题,探讨如何利用CSS3实现动态的文字菜单效果,以及如何在鼠标悬停时产生颜色变换和线框滑动动画。 首先,我们要理解文字菜单的基本构成。文字菜单通常由一系列...

    html5 canvas网状波浪线条背景动画特效

    同时,可能还会有一些辅助的CSS样式来增强整体的视觉效果,如背景颜色、过渡动画等。 总的来说,这个项目融合了HTML5 Canvas的2D绘图能力、Three.js的3D建模和动画技术,以及CSS的样式控制,创造出一种富有动态感和...

    移动开发css文档

    边框属性定义了元素周围的线框。 - **border-bottom**:定义底部边框。 - **border-bottom-color**:设置底部边框的颜色。 - **border-bottom-style**:定义底部边框的样式。 - **border-bottom-width**:设置...

    CSS3紫色发光按钮悬停特效

    本教程将详细讲解如何利用CSS3实现“紫色发光按钮悬停特效”,该特效包括一个紫色的线框按钮,当鼠标悬停时,按钮会呈现出发光遮罩动画效果。 首先,我们需要创建HTML结构,定义一个`&lt;button&gt;`元素,这是按钮的基本...

    Canvas边框粒子加载动画特效.zip

    3. **线框加载**:线框加载是指一种显示进度的方式,通常表现为一条逐步填满的边框,用户可以看到加载过程。在这里,粒子动画模拟了线框的填充过程,使得加载过程更加吸引人。 4. **JavaScript**:特效的实现离不开...

    Pearl-Hacks-2021:线框的htmlcss骨架

    7. **CSS动画和过渡**:可能包含了一些简单的动画效果,如元素淡入淡出、滑动等,以增加交互性。 在【压缩包子文件的文件名称列表】"Pearl-Hacks-2021-main"中,可以推测主要代码和资源文件都位于这个目录下,包括...

    The CSS Pocket Guide

    #### 五、CSS过渡与动画 - **过渡(Transition)**:平滑地改变一个或多个属性值,在一段时间内完成。主要属性有`transition-property`、`transition-duration`、`transition-timing-function`等。 - **动画...

Global site tag (gtag.js) - Google Analytics