CSS3效果:自定义“W”形运行轨迹实例


Posted in HTML / CSS onMarch 29, 2017

整理文档,搜刮出一个CSS3效果:“W”形运行轨迹实例的代码,稍微整理精简一下做下分享。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        #div{
            width:900px;
            height:400px;
            border:2px solid black;
            margin: 100px auto;
        }
        #span{
            float:left;
            display: block;
            font-size: 100px;
            width: 100px;
            height: 100px;
            line-height: 80px;
            text-align: center;
            border-radius: 50%;
            background: radial-gradient(blue,green);
            animation: move 4s ease 0s infinite alternate;
        }
        @keyframes move {
            0%{
                transform: translate(0px,0px);
            }
            25%{
                transform: translate(200px,300px);
            }
            50%{
                transform: translate(400px,0px);
            }
            75%{
                transform: translate(600px,300px);
            }
            100%{
                transform: translate(800px,0px);
            }
        }

    </style>
</head>
<body>
<div id="div">
    <span id="span">w</span>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 #HTML / CSS
CSS3制作hover下划线动画
Mar 27 #HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 #HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 #HTML / CSS
CSS3实现头像旋转效果
Mar 13 #HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 #HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
PHP中比较时间大小实例
2014/08/21 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python生成器表达式和列表解析
2016/03/10 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
python 如何停止一个死循环的线程
2020/11/24 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
服务之星获奖感言
2014/01/21 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
自查自纠工作总结
2014/10/15 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android