css3直线运动_css3动画--边框线条动画
网上看到一个css3动画,
最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示
再用clip截取一半,形成半折角。
同理左下角建一个div,向左、向下平移8px,设border-left,border-bottom值,用clip截取形成
html,body{margin:0;padding:0;background:#101010;
}.cont{width:500px;margin:150px auto;
}.bb{position:relative;width:200px;height:200px;background:#666666;border:1px solid #5EF75E;
}.bb:before{content:" ";display:block;position:absolute;width:200px;height:200px;top:-10px;right:-10px;border-top:2px solid #00FF00;border-right:2px solid #00FF00;z-index:10;box-sizing:border-box;clip:rect(0px,200px,100px,100px);
}.bb:after{content:" ";display:block;position:absolute;width:200px;height:200px;left:-10px;bottom:-10px;border-left:2px solid #00FF00;border-bottom:2px solid #00FF00;z-index:10;box-sizing:border-box;clip:rect(100px,100px,200px,0px);
}
View Code
然而着手写动画CSS的时候发现问题,线条逆时针旋转,右上角的线条不能平滑过渡到左下角。
然后看了一下人家写的代码,才发现里面两个DIV其实是比最初DIV大的,而且样式一样!!!
再仔细看看动画发现,其实就是两条一样长的线条在运动,只是一条比另一条块半圈
所以设置动画的时候只要一个延迟1/2时间开始就可以了
Dooooo....敲完代码
.bb{position:relative;width:200px;height:200px;background:#666666;border:1px solid #5EF75E;
}.bb:before,.bb:after{content:" ";display:block;position:absolute;width:220px;height:220px;top:-10px;left:-10px;border:2px solid #00FF00;z-index:10;box-sizing:border-box;-webkit-animation:clipAni 4s infinite linear;
}.bb:before{-webkit-animation-delay:2s;
}@keyframes clipAni{0%,100%{
clip:rect(0px,220px,220px,217px);
}25%{clip:rect(0px,220px,3px,0px);
}50%{clip:rect(0px,3px,220px,0px);
}75%{clip:rect(217px,220px,220px,0px);
}}
运行一看,前2s不对,DIV4周都有边框,2s后开始正常。想想确实是,div:before设置了边框动画延迟2s,前2s保持原有状态。
但是要进入页面就开始动画,且两个动画有时间错开,怎么办?
哈哈,想起动画delay负数的妙用
css:
html,body{margin:0;padding:0;background:#101010;
}.cont{width:500px;margin:50px auto;
}.bb{position:relative;width:200px;height:200px;background:#666666;border:1px solid #5EF75E;
}.bb:before,.bb:after{content:" ";display:block;position:absolute;width:220px;height:220px;top:-10px;left:-10px;border:2px solid #00FF00;z-index:10;box-sizing:border-box;-webkit-animation:clipAni 4s infinite linear;
}.bb:before{-webkit-animation-delay:-2s;
}@keyframes clipAni{0%,100%{
clip:rect(0px,220px,220px,217px);
}25%{clip:rect(0px,220px,3px,0px);
}50%{clip:rect(0px,3px,220px,0px);
}75%{clip:rect(217px,220px,220px,0px);
}}
View Code
成功~!
css3直线运动_css3动画--边框线条动画相关推荐
- css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"><div class=&q ...
- css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
- html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
- css3宽度变大动画_SVG线条动画
什么是线条动画 通常来说,对于web前端来实现动画效果,不外乎通过下面几种方案: CSS动画:利用css3的样式效果可以将dom元素做出动画的效果来. Canvas动画:利用Canvas提供的API, ...
- 怎樣制作线段动画_线条动画视频制作 如何制作线条运动图?线条动态图制作...
上周广东终于成功入秋,但是为什么,此刻小编感觉到很热嘞~广东这个天气真的是一年四季随机循环的啊~哈哈.好啦,不说废话,来看看今天的教程方案吧!线条动画大家知道是什么意思嘛?就是画面中有线条在运动的动画 ...
- CSS3实现边框线条动画特效
<div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...
- css实现画面转场以及边框线条动画
效果预览 在实现转场效果之前,需要先了解css的clip-path属性,该属性就是实现转场的核心属性,clip-path属性可以使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏.也就是 ...
- css3直线运动_CSS3中如何使元素曲线运动
定义和用法:32313133353236313431303231363533e4b893e5b19e31333363383334 transform 属性向元素应用 2D 或 3D 转换.该属性允许我 ...
- HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
最新文章
- qt mysql数据库连接池_qt中使用数据库连接池
- 洛谷 - P1361 小M的作物(最大流最小割)
- 给 asp.net core 写个中间件来记录接口耗时
- 用Hamcrest验证DateTime和日期
- 【快速入门Linux】3_Linux命令—终端命令格式、命令帮助信息、bash标准输入输出
- 人生路上对我影响最大的三位老师浅谈师生关系
- url-pattern主要有四种匹配方式
- 把文档所有的字体都缩小一号_美观且专业的macOS字体管理工具
- Entity Framework 延伸系列目录
- fla 优化思路 flash cs6
- android关机铃声代码,android系统添加关机铃声
- 分享200个App移动端模板
- 读 《我为什么要逃离北上广了?》有感
- 惠普电脑u盘重装系统步骤_惠普电脑u盘重装系统xp教程
- 你要的技术干货我都总结好了
- Unity - Timeline 之Creating a Timeline Asset and Timeline instance(创建Timeline Asset和Timeline 实例)
- 全球机场与航空公司准点率数据报告,为五一小长假做足准备
- 我的程序员转行过程,聊聊程序员的职业出路在哪里?
- Window10主硬盘更换及系统重装
- Android【1】:一文教你使用Camille+夜神模拟器实现安卓应用隐私合规辅助检测
热门文章
- jQuery实现悬浮窗口
- 计算机运行加减乘除哪个最慢,计算机算加减乘除的时间对比
- 如何根据笔记本CPU选取合适内存条总结
- 深度学习模型训练推理——基础环境搭建推荐博文查阅顺序【基础安装—认真帮大家整理了】——【专栏博文推荐学习顺序】
- 有什么办法可以预防网页被劫持
- 本体(Ontology)综述
- Hive中的map join、left semi join和sort merge bucket join
- 2005年5月23日星期一
- 生鲜在B2C电商模式下存在问题,O2O模式解决生鲜电商物流配送难题
- 程序员拒绝春节带电脑回家被开除;小米国行不再支持安装Google框架;Excel具备图灵完备性,成第一大编程语言 | 架构视点...