html css齿轮滚动特效,纯CSS3实现的齿轮滚动动画
CSS
语言:
CSSSCSS
确定
#gearwheel-a {
height: 400px;
width: 400px;
border-radius: 50% 50%;
background: -webkit-radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), -webkit-linear-gradient(90deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-linear-gradient(0deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), -webkit-linear-gradient(67.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(45deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(22.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(0deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(337.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(315deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(292.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(270deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));
background: radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), linear-gradient(0deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), linear-gradient(90deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), linear-gradient(22.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(45deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(67.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(90deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(112.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(135deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(157.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(180deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));
position: absolute;
top: 20px;
left: 20px;
-webkit-animation: spin 10s linear infinite;
animation: spin 10s linear infinite;
}
#gearwheel-b {
height: 200px;
width: 200px;
border-radius: 50% 50%;
background: -webkit-radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), -webkit-linear-gradient(56deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-linear-gradient(326deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), -webkit-linear-gradient(11deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(326deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(281deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(236deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));
background: radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), linear-gradient(34deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), linear-gradient(124deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), linear-gradient(79deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(124deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(169deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(214deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));
position: absolute;
top: 279px;
left: 356px;
-webkit-animation: spin 5s linear infinite reverse;
animation: spin 5s linear infinite reverse;
}
#mech {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 580px;
height: 500px;
}
html {
background: SandyBrown;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
html css齿轮滚动特效,纯CSS3实现的齿轮滚动动画相关推荐
- html舞动特效,7款纯CSS3实现的炫酷动画应用
原标题:7款纯CSS3实现的炫酷动画应用 HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效.但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以 ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- 汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构 该按钮变形动画使用嵌套 的H ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
- 纯CSS3海底泡泡多角鱼动画js特效
下载地址 纯CSS3海底泡泡多角鱼动画特效是一款纯css3绘制卡通的海底水气泡和多角鱼群动画特效. dd:
- css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程 这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
- html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码 代码如下: css3代 ...
- 纯CSS3 制作交通信号灯红绿灯动画效果
纯CSS3 制作交通信号灯红绿灯动画效果 HTML: <div class="light"><div class="red"></ ...
- 纯CSS3卡通模型飞机飞行动画
下载地址 纯CSS3卡通模型飞机飞行动画是一款逼真的塞斯纳飞机天空飞行动画特效. dd:
最新文章
- Java开发字符串JSON处理
- mysql多实例安装配置_MySQL多实例安装配置
- 速卖通现在好做吗?深耕产品供应,优化售后发货才能走的更远
- 函数重载与运算符重载
- cannot find mysql.frm_mysql 问题 - Run佳的个人空间 - OSCHINA - 中文开源技术交流社区...
- Java内存模型三大特性
- 晶振对stm32 串口数据传输的影响
- LINUX的awk和sed的常用用法 正则表达式 grep egrep用法
- Atitit Elasticsearch6之elasticsearch5.x 新特性 目录 1.1. 其实,elasticsearch5.x 和 elasticsearch2.x 并不区别很大。	1
- 网络安全学习第14篇 - 游戏(仙剑奇侠传95)外挂之修改游戏资源文件(修改人物属性)
- protel dxp 2004 sp2
- 市场app应用类型分类有哪些?app应用管理
- Keras中进行模型训练时,计算每一步迭代所花费时间的方法
- win10安装wsl步骤
- 超短波视距通信极限距离计算公式
- MySQL基础架构:一条SQL“查询语句”是如何执行的
- Stub和Mock的区别
- 我在北京每月白捡一万元(转贴)
- AIOT下“智慧家庭”的入口比拼,是百花齐放还是一枝独秀?
- 无线路由器的基础配置(三)