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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
详解CSS玩转图片Base64编码
May 25 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
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python psutil模块使用方法解析
2019/08/01 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
农民致富事迹材料
2014/01/23 职场文书
《颐和园》教学反思
2014/02/26 职场文书
酒店管理求职信范文
2014/04/06 职场文书
中学生演讲稿
2014/04/26 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
书法社团活动总结
2015/05/07 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
nginx共享内存的机制详解
2022/03/21 Servers