CSS3实现PS中的蚁行线动画以及画布的马赛克背景图
2024-09-05 16:52:53
话不多说,先看例子,外链
效果截图如下:
蚁行线
马赛克背景
代码:
蚁行线代码如下:
/*
<!-- HTML代码 -->
<div class="ant"></div>
*/
/* 蚁行线动画 */
.ant {
width: 200px;
height: 200px;
margin: 40px auto;
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, black 0, black, 25%, transparent 0, transparent 50%) 0% 0%;
background-size: 6px 6px;
background-position: 0% 0%;
animation: ants 10s linear infinite;
}
@keyframes ants {
to {
background-position: 100% 100%;
}
}
马赛克代码:
/*
<!-- HTML代码 -->
<div class="mosaic"></div>
*/ /* 马赛克背景 */
.mosaic {
height: 285px;
width: 495px;
margin: 40px auto;
box-shadow: 1px 1px 8px grey;
position: relative;
overflow: hidden;
}
.mosaic:after {
--lineStart: 4%;
--lineEnd: 96%;
--bgStart: 25%;
--bgEnd: 75%;
--color: #ddd;
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
transform: rotate(45deg);
background-size: 15px 15px;
background-image:
/* 前两个渐变是为了防止 rotate 之后的分割线 */
linear-gradient( 0deg, var(--color) var(--lineStart), transparent var(--lineStart), transparent var(--lineEnd), var(--color) var(--lineEnd) ),
linear-gradient( -90deg, var(--color) var(--lineStart), transparent var(--lineStart), transparent var(--lineEnd), var(--color) var(--lineEnd) ),
linear-gradient( 45deg, var(--color) var(--bgStart), transparent var(--bgStart), transparent var(--bgEnd), var(--color) var(--bgEnd) ),
linear-gradient( -45deg, var(--color) var(--bgStart), transparent var(--bgStart), transparent var(--bgEnd), var(--color) var(--bgEnd) );
}
代码主要运用css3中的线性渐变属性linear-gradient,相关文章可以查看MDN
最新文章
- qt 定时器
- linux 无交互添加用户设置密码
- 如何书写高质量的jQuery代码
- 浏览器何时发送一个Option请求
- poj 1006 中国剩余定理解同余方程
- Windows手动搭建PHP运行环境
- IOS常用CGRect的交错,边缘,中心的检测
- ssh公钥自动登陆
- python生成html文件浏览器中文显示乱码问题
- 如何制定AxureRP设计体系
- Number-guessing Game
- javascript设计模式——适配器模式
- iptables配置管理
- python 类的属性__slots__ (了解一点点)
- maven下载及安装
- 未能加载文件或程序集“SuperMap.Data.dll”
- QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
- javafx基于使用fxml布局的tableview数据绑定用法
- springmvc与ajax交互常见问题
- 用Jetty 9.1运行Java WebSockets微服务