css3动画、边框、投影知识
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Robot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="robot">
<div class="piston"><!--外框-->
<div class="block"><!--字母框-->
A
<div class="arm"></div><!--摆杆-->
</div>
<div class="rotator"><!--低圈--> </div>
</div> <div class="piston"><!--外框-->
<div class="block"><!--字母框-->
A
<div class="arm"></div><!--摆杆-->
</div>
<div class="rotator"><!--低圈--> </div>
</div> <div class="piston"><!--外框-->
<div class="block"><!--字母框-->
A
<div class="arm"></div><!--摆杆-->
</div>
<div class="rotator"><!--低圈--> </div>
</div> <div class="piston"><!--外框-->
<div class="block"><!--字母框-->
A
<div class="arm"></div><!--摆杆-->
</div>
<div class="rotator"><!--低圈--> </div>
</div> <div class="piston"><!--外框-->
<div class="block"><!--字母框-->
A
<div class="arm"></div><!--摆杆-->
</div>
<div class="rotator"><!--低圈--> </div>
</div>
</div>
</body>
</html>
css
/*定义动画*/
/*上下摆动*/
@-webkit-keyframes topbottom{
0% { margin-top:; }
50% { margin-top: 80px; }
100% { margin-top:; }
}
@keyframes topbottom{
0% { margin-top:; }
50% { margin-top: 80px; }
100% { margin-top:; }
}
/*左右摇摆*/
@-webkit-keyframes rightleft {
0% { -webkit-transform: rotate(0); }
25% { -webkit-transform: rotate(-18deg); }
50% { -webkit-transform: rotate(0); }
75% { -webkit-transform: rotate(18deg); }
100% { -webkit-transform: rotate(0); }
}
@keyframes rightleft {
0% { -webkit-transform: rotate(0); }
25% { -webkit-transform: rotate(-18deg); }
50% { -webkit-transform: rotate(0); }
75% { -webkit-transform: rotate(18deg); }
100% { -webkit-transform: rotate(0); }
}
*{
margin:;
padding:;
list-style: none;
}
img{
border:none;
}
body{
text-align: center;
margin: 60px 0 0;
background:linear-gradient(to bottom, #333, tomato);
/*渐变 上到下*/
}
html{
height: 100%;
}
#robot{
position: absolute;
width: 540px;
height: 250px;
margin: auto;
left:;
top:;
bottom:;
right:;
color: #444;
font-weight:;
text-shadow:0 -1px 1px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.4);
/*投影*/
font-family: 'Oswald', sans-serif;
}
.piston{
float: left;
margin-right: 10px;
position: relative;
width: 100px;
height: 250px;
background: rgba(0,0,0,0.1);
border-radius: 10px 10px 50px 50px;
box-shadow: 0 -4px 0 rgba(0,0,0,0.2), 0 4px 0 rgba(255,255,255,0.2);
}
.piston:last-child{
margin:;
}
.block{
position: relative;
width: 100px;
height: 60px;
line-height: 60px;
background: #555;
border-radius: 10px;
animation:topbottom 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
/*cubic-bezier动画方式(曲线)*/
-webkit-animation:topbottom 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2), inset 0 4px 0 rgba(255,255,255,0.2)
}
.piston:nth-child(1) .block { -webkit-animation-delay: 0s; animation-delay: 0s; }
.piston:nth-child(2) .block { -webkit-animation-delay: .1s; animation-delay: .1s; }
.piston:nth-child(3) .block { -webkit-animation-delay: .2s; animation-delay: .2s; }
.piston:nth-child(4) .block { -webkit-animation-delay: .3s; animation-delay: .3s; }
.piston:nth-child(5) .block { -webkit-animation-delay: .4s; animation-delay: .4s; }
.arm{
position: absolute;
top:50%; left:50%;
margin: -10px 0 0 -10px;
width: 20px;
height: 150px;
background: #555;
border-radius: 10px;
box-shadow: inset 0 -22px 0 rgba(0,0,0,.2);
z-index: -110;
-webkit-transform-origin: center 10px;
-webkit-animation: arm 1.2s linear infinite;
-webkit-animation-delay: inherit;
transform-origin: center 10px;
animation: rightleft 1.2s linear infinite;
animation-delay: inherit;
}
.arm:before,.arm:after{
content:"";
position: absolute;
left:;
right:;
height: 16px;
width: 16px;
border-radius: 50%;
margin: 2px;
background:#eee;
}
.arm:before{
top:;
}
.arm:after{
bottom:;
}
.rotator{
position: absolute;
bottom:;
width: 100px;
height: 100px;
border:20px solid rgba(0,0,0,0.1);
box-sizing:border-box;
z-index: -110;
border-radius: 50%;
}
css3动画、边框、投影知识的更多相关文章
- 鼠标悬停显示CSS3动画边框
效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: <!DOCTYPE html> <html xmlns="ht ...
- css3动画--超级基础知识
这么乱的笔记....供自己阅读!
- CSS3动画详解(结合实例)
一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
- CSS3动画基本的转换和过渡
理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...
- CSS3动画那么强，requestAnimationFrame还有毛线用？
一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...
- CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄
CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- Openstack搭建（流水账）
Openstack管理三大资源:1.网络资源2.计算资源3.存储资源 Keystone 做服务注册 Glance 提供镜像服务 Nova 提供计算服务 Nova scheduler决策虚拟主机创建在哪 ...
- vue.js 一（基础环境搭建）
之前由于看了React的东西,写了两篇React的脚手架搭建,一是给自己记一点可用的东西,免得每次都去找,毕竟搭建环境在项目相对固定的时期不是经常要干的事情,一段时间不用就会忘记了. 前端的js框架还 ...
- Darwin's Letter【达尔文的信】
Darwin's Letter A letter written by Charles Darwin in 1875 has been returned to the Smithsonian Inst ...
- visual studio cl -d1reportSingleClassLayout查看内存f分布
C:\Users\Administrator\Desktop\cppsrc>cl -d1reportSingleClassLayoutTeacher virtual.cpp 用于 x86 的 M ...
- Android 简历+面试题 汇总
1.教你写简历 1.1.你真的会写简历吗? 1.2.80%以上简历都是不合格的 1.3.推荐两个技术简历模板 1.4.关于程序员求职简历 1.5.程序员简历模板列表 2.面试题 2.1.国内一线互联网 ...
- 数据库sql中distinct用法注意事项
在写sql中去重复等操作,需要用到distinct. 在使用distinct的时候要注意,尤其是在有行列转换的时候.要把sql运行出来看看是不是与你想要的结果一样. 通过自己试验,distinct有从 ...
- Fragment 和 Activity 之间通信
在 Activity 中获取 Fragment 实例: FragmentManager 提供了一个类似于 findViewById 的方法,专门用于从布局文件中获取 Fragment 实例: //通过 ...
- Hyper-v Server 2012 R2增强会话模式
从Windows Server 2012 R2开始,通过使用Hyper-v增强会话模式Hyper-v中的虚拟机允许重定向虚拟机连接会话中的本地资源.这是因为Windows Server 2012 及早 ...
- 我给女朋友讲编程总结建议篇，怎么学习html和css
总共写了11篇博客了,7篇讲html的,4篇讲网络的.不敢说写的多么好吧,最起码的是我迈出了写作的第一步,写作的过程中了解了一些其他的知识,比如SEO.几种重定向等,由于个人能力和见识有限,写出来的东 ...
- IOS开发学习笔记021-练习2
只是简单练习一下,主要是学习里面的思想,处理问题的方法. 不过还有一个问题没想到解决方法. 那就是动态生成的按钮如何绑定按钮事件,请哪位大神指点一下啊.(知道怎么办了,原来是方法addTarget) ...