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不透明度实例讲解
Apr 26 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
基于python实现微信模板消息
2015/12/21 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python操作qml对象过程详解
2019/09/26 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python实现密码薄文件读写操作
2019/12/16 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
初中高效课堂实施方案
2014/02/26 职场文书
创先争优活动承诺书
2014/08/30 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript