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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 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
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
destoon各类调用汇总
2014/06/20 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
vue.js路由跳转详解
2017/08/28 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python实现爬虫下载美女图片
2015/07/14 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
军训自我鉴定100字
2014/02/13 职场文书
捐书活动总结
2014/05/04 职场文书
幼儿发展评估方案
2014/06/11 职场文书
连锁超市项目计划书
2014/09/15 职场文书
病人慰问信范文
2015/02/15 职场文书