<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 制作小黄人吃豆豆的关键是 头部 ：可以将头部分为上下两部分，然后将旋转中心调整为上边的中心位置，然后利用旋转，以及关键帧 */
.box{
width: 500px
height: 200px
/* background-color: red */
margin: 100px auto
position: relative
overflow: hidden
}
body{
background-color: #0094ff
}
@keyframes mymove {
from {
left: 0px
}
to{
left: 100px
}
}
.child{
position: absolute
left: -11px
}
.child:nth-child(1){
width: 200px
height: 100px
transform: rotate(-23deg)
border-top-left-radius:100px
background-color: yellow
border-top-right-radius:100px
animation: myrotate 1s infinite linear
}
@keyframes myrotate{
0%{
transform: rotate(-25deg)
}
50%{
transform: rotate(0deg)
}
100%{
transform: rotate(-25deg)
}
}
.child:nth-child(2){
width: 200px
height: 100px
transform: rotate(20deg)
border-bottom-left-radius:100px
background-color: yellow
border-bottom-right-radius:100px
animation: myrotate2 1s linear infinite
top: 100px
}
@keyframes myrotate2{
0%{
transform: rotate(25deg)
}
50%{
transform: rotate(0deg)
}
100%{
transform: rotate(25deg)
}
}
/* 眼睛 */
.eyes{
display: inline-block
width: 30px
height: 30px
border-radius: 50%
background-color: #000
position: absolute
top: 35px
left: calc(21% - 15px)
}
ul{
list-style: none
position: absolute
width: 700px
top: 73px
left: 0px
animation: move 10s infinite linear
}
@keyframes move{
from{
left: 0
}
to{
left: -329px
}
}
ul li{
float: left
width: 30px
height: 30px
background-color: yellow
margin-left: 20px
border-radius: 50%
/* opacity: 0 */
}
ul li:nth-child(1){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 11.4s
}
ul li:nth-child(2){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 9.1s
}
ul li:nth-child(3){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 7.8s
}
ul li:nth-child(4){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 6.5s
}
ul li:nth-child(5){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 5.2s
}
ul li:nth-child(6){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 3.9s
}
ul li:nth-child(7){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 2.6s
}
ul li:nth-child(8){
/* opacity: 0 */
animation: tab linear 5 2s
animation-duration: 1.3s
}
/* @keyframes tab{
0%{
opacity: 0
}
50%{
opacity: 1
}
100%{
opacity: 0
}
} */
</style>
</head>
<body>
<div class="box">
<div class="child">
</div>
<div class="child">
</div>
<span class="eyes">
</span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>左划出现删除按钮，右滑隐藏</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 设定每一行的宽度=屏幕宽度+按钮宽度
$(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width())
// 设定常规信息区域宽度=屏幕宽度
$(".line-normal-wrapper").width($(".line-wrapper").width())
// 设定文字部分宽度（为了实现文字过长时在末尾显示...）
$(".line-normal-msg").width($(".line-normal-wrapper").width() - 280)
// 获取所有行，对每一行设置监听
var lines = $(".line-normal-wrapper")
var len = lines.length
var lastX, lastXForMobile
// 用于记录被按下的对象
var pressedObj
// 用于记录按下的点
var start
// 网页在移动端运行时的监听
for (var i = 0i <len++i) {
lines[i].addEventListener('touchstart', function(e){
lastXForMobile = e.changedTouches[0].pageX
pressedObj = this// 记录被按下的对象
// 记录开始按下时的点
var touches = event.touches[0]
start = {
x: touches.pageX, // 横坐标
y: touches.pageY // 纵坐标
}
})
lines[i].addEventListener('touchmove',function(e){
// 计算划动过程中x和y的变化量
var touches = event.touches[0]
delta = {
x: touches.pageX - start.x,
y: touches.pageY - start.y
}
// 横向位移大于纵向位移，阻止纵向滚动
if (Math.abs(delta.x) >Math.abs(delta.y)) {
event.preventDefault()
}
})
lines[i].addEventListener('touchend', function(e){
var diffX = e.changedTouches[0].pageX - lastXForMobile
if (diffX <-150) {
$(pressedObj).animate({marginLeft:"-132px"}, 500)// 左滑
} else if (diffX >150) {
$(pressedObj).animate({marginLeft:"0"}, 500)// 右滑
}
})
}
// 网页在PC浏览器中运行时的监听
for (var i = 0i <len++i) {
$(lines[i]).bind('mousedown', function(e){
lastX = e.clientX
pressedObj = this// 记录被按下的对象
//alert(pressedObj+'--'+lines[0])
})
$(lines[i]).bind('mouseup', function(e){
var diffX = e.clientX - lastX
if (diffX <-150) {
$(pressedObj).animate({marginLeft:"-132px"}, 500)// 左滑
} else if (diffX >150) {
$(pressedObj).animate({marginLeft:"0"}, 500)// 右滑
}
})
}
})
</script>
<style type="text/css">
* { margin: 0padding: 0}
.line-wrapper { width: 100%height: 144pxoverflow: hiddenfont-size: 28pxborder-bottom: 1px solid #aaa}
.line-scroll-wrapper { white-space: nowrapheight: 144pxclear: both}
.line-btn-delete { float: leftwidth: 132pxheight: 144px}
.line-btn-delete button { width: 100%height: 100%background: redborder: nonefont-size: 24pxfont-family: 'Microsoft Yahei'color: #fff}
.line-normal-wrapper { display: inline-blockline-height: 100pxfloat: leftpadding-top: 10pxpadding-bottom: 10px}
.line-normal-icon-wrapper { float: rightwidth: 120pxheight: 120pxmargin-right: 12px}
.line-normal-icon-wrapper img { width: 120pxheight: 120px}
.line-normal-avatar-wrapper { width: 100pxheight: 124pxfloat: leftmargin-left: 12px}
.line-normal-avatar-wrapper img { width: 92pxheight: 92pxborder-radius: 60px}
.line-normal-left-wrapper { float: leftoverflow: hidden}
.line-normal-info-wrapper { float: leftmargin-left: 10px}
.line-normal-user-name { height: 28pxline-height: 28pxcolor: #4e4e4emargin-top: 7px}
.line-normal-msg { height: 28pxline-height: 28pxoverflow:hiddentext-overflow:ellipsiscolor: #4e4e4emargin-top: 11px}
.line-normal-time { height: 28pxline-height: 28pxcolor: #999margin-top: 11px}
</style>
</head>
<body>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="1.jpg" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="5.jpeg"/></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="2.jpeg" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">乔巴</div>
<div class="line-normal-msg">你看不到我哦</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="6.jpg"/></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="3.jpg" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">贱行贱远</div>
<div class="line-normal-msg">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="7.jpg"/></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="4.jpg" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">小黄人</div>
<div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="8.jpg"/></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
</body>
</html>
CSS3 animation 属性1、IE10 开始支持的。
2、针对版本低的现代游览器最好使用前缀（-webkit-，-moz-，-o-）。
3、IE9 可以用JS的 setTimeOut 等函数来解决动画。
4、IE6，7，8 游览器推荐用jQuery动画，当然旋转等高级动画是不行的，因为rotate属性是IE9开始支持的。
5、不支持css3的游览器上不要勉强用，网页执行效率极差。
推荐一个网页
caniuse.com
这网页里可以查看css的属性能支持哪些游览器和版本。
