css3 - css做动画效果
问题描述
把红色框内做成那种来回动画效果怎么做啊？
问题解答
回答1：<!DOCTYPE html><html><head><style> p{ width:100px; height:100px; background:red; position:relative; animation:mymove 1s infinite; -moz-animation:mymove 1s infinite; /* Firefox */ -webkit-animation:mymove 1s infinite; /* Safari and Chrome */ -o-animation:mymove 1s infinite; /* Opera */ animation-direction: alternate;}@keyframes mymove{ from {left:0px;} to {left:200px;}}@-moz-keyframes mymove /* Firefox */{ from {left:0px;} to {left:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{ from {left:0px;} to {left:200px;}}@-o-keyframes mymove /* Opera */{ from {left:0px;} to {left:200px;}}</style></head><body><p></p></body></html>
运行一下上面的代码，改于w3school。
链接为：http://www.w3school.com.cn/cs...
回答2：给你个链接 自己对着改参数
回答3：给那个三角图片 摆好位置后， 用类去控制动作。
比如
.move { -webkit-animation-name:’example’; // other code} @-webkit-keyframes ’example’ { 0% {-webkit-transform: translateX(0); } 50% { -webkit-transform: translateX(100px); } 100% { -webkit-transform: translateX(0); } } // 补充说明： -webkit-animation-name:’xxx’;/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式* 回答4：
css3的动画效果主要是通过过渡来实现的，用animate来定义一个补间动画，浏览器会自动根据设置的时间来进行渲染。楼上两位大神的代码已经做得很完善了，具体效果题主可以自己根据需要修改
相关文章：
1. javascript - 移动端一个小效果2. javascript - vue引入样式的问题3. javascript - 怎么实现让 div 里面的 img 元素 中心居中, 如下示例图4. javascript - nodejs调用qiniu的第三方资源抓取，返回401 bad token，为什么5. python - 关于beautifulsoup获取文档内容6. php - mysql 模糊搜索问题7. Mac环境下QT编译MySQL驱动屡次失败？如何？8. 微信开放平台 - ios APP能不能打开微信然后通过微信跳转到指定的URL？9. php - 微信开发验证服务器有效性10. javascript - vue+iview upload传参失败 跨域问题后台已经解决 仍然报403，这是怎么回事啊？
![dockerfile - [docker build image失败- npm install]](http://www.haobala.com/attached/image/news/202311/1028105a80.png)
网公网安备