html显示线条流动效果,css3实现线条流动效果
1实现原理:
通过animation中的clip实现对div的不断切割
首先要弄懂clip的含义,四个参数分别是上右下左,以上和左为标准。
clip使用的前提是元素绝对定位。
本来想实现这样效果看起来是需要3个div,但是根据前人的经验,使用box-shadow和伪元素来完成。
至于为什么要delay -4秒,是将两个动画不同时,这样才能显示出两条边。
(此外这里面的margin没有看懂是怎么计算出来的..,调试器里面无值,但是却能控制)
地图
.bb, .bb::before, .bb::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.bb {
width: 200px;
height: 200px;
margin: auto;
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.bb::before, .bb::after {
content: '';
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
.bb::before {
animation-delay: -4s;
}
@keyframes clipMe {
0%, 100% {
clip: rect(0px, 220.0px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220.0px, 0px);
}
50% {
clip: rect(218.0px, 220.0px, 220.0px, 0px);
}
75% {
clip: rect(0px, 220.0px, 220.0px, 218.0px);
}
}
html显示线条流动效果,css3实现线条流动效果相关推荐
- html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
- css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试 用户名 密码 css源码: /* entire container, keeps perspective */ .flip-c ...
- html文字加描边效果,CSS3实现文字描边效果
以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式. CSS3实现文字描边效果,这里主要用到text-sha ...
- css中间镂空,css3如何实现遮罩层镂空效果 css3遮罩层镂空效果的多种实现方法
css3如何实现遮罩层镂空效果?本篇文章小编给大家分享一下css3遮罩层镂空效果的多种实现方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 先看看效果 [ 方法一:截图模 ...
- html中背景条纹效果,css3 条纹背景滚动效果
今天在一个网站上看到这样一个效果,我一开始以为一个背景gif图片,为了验证我的想法,我打开firebug 一查看,原来不是gif.是用css3完成的.于是我就在查看css3的api帮助下尝试着 写一写 ...
- html如何实现立体效果,CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
- css加载更多动画效果,css3实现loading动画效果
通过css3动画实现三种loading加载动画 效果1:通过css3的border-radius与transform的rotate()实现 效果2:通过css3动画animation的animatio ...
- html实现信封效果,CSS3 带简单动画效果的信封
CSS 语言: CSSSCSS 确定 @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700); bo ...
- html文字翻牌效果,css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面 然后通过有过渡(trans ...
最新文章
- GLSL学习笔记 - 6.2 Vertex Shader
- 中国电信的新媒体营销尝试
- TLS 改变密码标准协议(Change Cipher Spec Protocol) 就是加密传输中每隔一段时间必须改变其加解密参数的协议...
- Bzoj 3680 吊打xxx【[模拟退火】
- JSTL笔记—c标签
- *ctf box题解
- android 判断手机计步_干货:电脑控制手机 一定不能错过的神器
- 650服务器raid配置_DELL R730服务器配置RAID及安装服务器系统
- 帝国网站管理系统(ECMS)电影模块在IE下不能使用的解决办法
- [HNOI2013] 切糕
- Spring学习Ioc
- go reflection
- 【DP之家】Ubuntu简介
- 计算机基础知识还有那些,关于电脑基础知识有哪些
- html如何让文字变斜体,CSS中如何让文字变成斜体
- 华为安全 HCIP722笔记
- rrpp协议如何修改_RRPP单环
- 祭奠被消亡的CSDN文章
- JAVA 时间和日期的API
- 解忧杂货店—你的问题,我来解答
热门文章
- informatica中元数据管理
- 用python做采集时相对路径转换成绝对路径
- “街坊”×××数字平台,昔日的思想,曾经的努力
- 选择软路由的七大理由
- 余宏德:Sun所有的核心技术都是开放的
- python使用ddt找不到方法_python使用ddt过程中遇到的问题及解决方案【推荐】
- activiti7流程设计器_变频空调器通信电路
- oracle11g创建表空间大文件,oracle11g创建表空间 sql语法
- 中文整合包_案例 | 美研市场营销和整合营销专业1620Fall 580+申请实例(含MS+PHD)...
- vscode运行python文件_vscode怎么运行python文件