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 相关文章推荐
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP新手上路(十二)
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PDO::prepare讲解
2019/01/29 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
护士自荐信
2013/10/25 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
Python开发五子棋小游戏
2022/05/02 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle