html虚线垂直居中,css-虚线边框滚动效果
常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。
基本HTML
测试测试
Easy-way
通过背景图片实现。
p得垂直居中哦,还记得如何垂直居中吗?详见另一篇博客~
.box {
width: 100px;
height: 100px;
position: relative;
background: url(https://www.zhangxinxu.com/study/image/selection.gif);
p {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
height: calc(100% - 2px);
width: calc(100% - 2px);
background-color: #fff;
}
}
repeating-linear-gradient
135度repeating线性渐变,p撑开高度,白色背景覆盖外层div渐变。
.box {
width: 100px;
height: 100px;
background: repeating-linear-gradient(
135deg,
transparent,
transparent 4px,
#000 4px,
#000 8px
);
overflow: hidden; // 新建一个BFC,解决margin在垂直方向上折叠的问题
animation: move 1s infinite linear;
p {
height: calc(100% - 2px);
margin: 1px;
background-color: #fff;
}
}
@keyframes move {
from {
background-position: -1px;
}
to {
background-position: -12px;
}
}
linear-gradient&&background
通过线性渐变以及background-size画出虚线,然后再通过background-position将其移动到四边。这种方式比较好的地方在于可以分别设置四条边的样式以及动画的方向,细心的同学应该会发现上一种方式的动画并不是顺时针或者逆时针方向的。
.box {
width: 100px;
height: 100px;
background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
background-position: 0 0, 100% 0, 0 0, 0 100%;
animation: move2 1s infinite linear;
p {
margin: 1px;
}
}
@keyframes move2 {
from {
}
to {
background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
}
}
linear-gradient&&mask
mask属性规范已经进入候选推荐规范之列,会说以后进入既定规范标准已经是板上钉钉的事情,大家可以放心学习,将来必有用处。
这里同样可以使用mask来实现相同的动画,并且可以实现虚线边框渐变色这种效果,与background不同的是mask需要在中间加上一块不透明的遮罩,不然p元素的内容会被遮盖住。
.box {
width: 100px;
height: 100px;
background: linear-gradient(0deg, #f0e, #fe0);
-webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
linear-gradient(0deg, #fff, #fff) no-repeat; // 这里不透明颜色随便写哦
-webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
-webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
overflow: hidden;
animation: move3 1s infinite linear;
p {
height: calc(100% - 2px);
margin: 1px;
background-color: #fff;
}
}
@keyframes move3 {
from {
}
to {
-webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
}
}
PS
今天有一个人来我们这边面试,五年工作经验,上来头头是道说自己参与过多少项目,独自一人架构一个什么前端项目,熟练css、js、html、vue等等等,听得我瑟瑟发抖。
然后问了个简单的如何垂直居中,答曰:用flex;再问怎么用flex,答:不太了解;问还有什么方式,答曰:transform;再问为何transform,答:不太了解。。。
等等等,问了许多基础的东西,大多不了解,更不用说vue的相关原理,diff算法之流。
最后问期望薪资,答:已有18k的offer,期望不要低于18k。
是我不了解行情了,还是现在压根就不是寒冬了,拿着微薄薪水的我求个内推~~南京或杭州地区。
个人博客求友链~
花里胡哨电子简历~有时间的话可以一看。
参考
html虚线垂直居中,css-虚线边框滚动效果相关推荐
- 使用css实现字幕滚动效果
使用css实现字幕滚动效果 最近业务需要,让电子屏上面的横幅能够自动的滚动,但是用js加requireanimation实现的话感觉有点浪费,转念想到了用css 的animation似乎也能够实现大致 ...
- html 虚线圆形,css虚线圆环 和实线圆环
css虚线圆环 和实线圆环 css虚线圆环 和实线圆环 虚线圆环 dashed为破折号 间隔 dotted为点 间隔 { border-radius:50px;width:100px;height:1 ...
- html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
- 【面试题】1014- 面试官:如何使用CSS完成视差滚动效果?
一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...
- 17.使用CSS完成视差滚动效果?
一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...
- css数字/文字滚动效果
效果: 原理 利用伪类,开始的时候给本来的内容盖住,然后执行动画. 设置宽高,宽就是单个内容(比如数字中的一位数)的宽,让内容一行一个的排成列. 动画就是让这些内容一个个的往上升,造成一种滚动效果 最 ...
- 如何让边框滚动css,css-虚线边框滚动效果
经常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,而且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考. 基本HTMLcss 测试测试 Easy-way 经 ...
- html 边框效果,css实现边框动画效果
最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果. css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图 ...
- div+css的图片滚动效果
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
最新文章
- 团队工具_「管理工具」部门有效管理的5个工具,打造高效团队
- Linux之traceroute命令使用详解—网络故障定位(三)
- 刚刚,阿里开源了一系列重磅技术炸弹!| 程序员必看
- python2与python3代码互相转化时注意事项
- 围观:各地大学教师自曝近年工资待遇,真实一手数据!
- 特斯拉CEO马斯克:将离开推特一段时间
- 申请google Map api key for android
- 能量收集matlab程序_深港微电子学院汪飞课题组在Sensors and Actuators A: Physical上发表双谐振能量采集器论文...
- 数据结构—二叉树的存储结构
- java mysql 单例模式_java 单例模式(singleton)连接 mysql 数据库
- C++箴言:多态基类中将析构函数声明为虚拟zz
- xps13 9360黑苹果
- Endnote常见错误
- 签字后被开除_我的易到经历以及老易到员工是如何被乐视派驻高管从易到开除的...
- SQL存储过程对象名无效
- 局部敏感哈希-Locality Sensitivity Hashing
- XP下IIS相关问题
- OpenFOAM多孔介质模型_DarcyForchheimer
- 【全开源+免费更新】doodoo.js快速入门教程 1
- linux挂移动硬盘命令,linux挂载命令mount及U盘、移动硬盘的挂载
热门文章
- 解决vs2019中vsvim无法使用ctrl+[的问题
- Ubuntu18.04 因断电开机报错:utmp处卡死
- 干货丨如何准确找到剪辑点?后期剪辑进阶必看
- 阿里云轻量云服务器部署java项目
- 一款开源的二维地图软件,在GMap.net基础上进行了有效的扩展,曾经产生过非常大的商业价值,里面含有升级日志,有助于再次开发
- 苹果XR设备多次“跳票” XR行业的未来将如何
- 厦门大学计算机英语考试,【图片】一战厦大计算机上岸,经验帖。慢更【考研吧】_百度贴吧...
- python两列时间间隔计算器_计算两列之间的Pandas DataFrame时间差异(以小时和分钟为单位)...
- Python批量处理表格有用吗_python批量读入图片、处理并批量输出(可用于深度学习训练集的制作)...
- Windows彩色桌面变成灰色,怎么办?