新手入门还没有正式发点啥东西，都是在装潢博客这个家了，到现在为止还是没有装修好。。熟悉了这边的发布规范之后会持续在这里记录，给自己留下学习的脚印~

这正式的第一篇随笔写个使用css3的动画效果。

总感觉电影里特工那种酷炫的应用界面很舒服，开始尝试用css3做一个，所以这是系列篇，名字就叫做 '我要做特工' 。之前没怎么深入过css3，就从这里开始吧，毕竟指望别人提供近似项目化的需求还给时间学习的机会不是很现实，自己动手丰衣足食嘛~

先看一下效果：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS3</title>

<style>

div{

    width:10px;

    height:2px;

    background:red;

}

div:hover{/*这里绑定一个选择器，把cssSplit绑定到div:hover*/

    /*animation:cssSplit 5s infinite；*/

    /*animation-direction:alternate；*//*播放后反向播放一遍*/

    animation:cssSplit 5s alternate;

    animation-fill-mode:forwards;/*播放后停止在最后一帧*/

    }

@keyframes cssSplit /* Firefox -moz-没加，csshack自己做呗*/

{

    0% {background:red;width:10px;height:2px;}

    10% {background:yellow;width:500px;height:2px;}

    30% {background:yellow;width:500px;height:200px;}

    100% {background:yellow;width:500px;height:200px;}

}

</style>

</head>

<body>

<div></div>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

</body>

</html>

Ps:布局和着色应该还会重新规制吧。。发一下试试，错位的感觉很强烈啊。。

-----

Ps:果然是着色还是得一次成功啊，不会自己重新绘制。。插个代码改了三次格式也是没谁了。。。

>>我要做特工系列 之 CSS 3_animation_向右滑出后下滑并停止的更多相关文章

  1. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  2. CSS选择器从右向左的匹配规则

    CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...

  3. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  4. 【03】emmet系列之CSS语法

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写   单位: 有几个常用值别 ...

  5. 每日一译系列-模块化css怎么玩(译文)

    原文链接:How Css Modules Work 原文作者是Preact的作者 这是一篇关于如何使用Css Modules的快速介绍,使用到的工具是Webpack吊炸的css-loader 首先,我 ...

  6. css3笔记系列-3.css中的各种选择器详解，不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  7. js判断手指的上滑，下滑，左滑，右滑，事件监听

    原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...

  8. jquery左划出现删除按钮，右滑隐藏

    jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...

  9. Taro UI开发小程序实现左滑喜欢右滑不喜欢效果

    前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...

随机推荐

  1. P4088 [USACO18FEB]Slingshot 线段树+扫描线

    \(\color{#0066ff}{ 题目描述 }\) Farmer John最讨厌的农活是运输牛粪.为了精简这个过程,他产生了一个新奇的想法:与其使用拖拉机拖着装满牛粪的大车从一个地点到另一个地点, ...

  2. DP【洛谷P3089】 [USACO13NOV]POGO的牛Pogo-Cow

    [洛谷P3089] [USACO13NOV]POGO的牛Pogo-Cow FJ给奶牛贝西的脚安装上了弹簧,使它可以在农场里快速地跳跃,但是它还没有学会如何降低速度. FJ觉得让贝西在一条直线的一维线路 ...

  3. freemarker常用标签解释三

    1 date,time,datetime 日期,时间,时间日期 <#assign test1 = "10/25/1995"?date("MM/dd/yyyy&quo ...

  4. H5切换至后台页面

    先说重点,试了很多种方法,这个真实有效 var reLoadLeftTime = false ;//监听浏览器当前页面是否被激活的事件var hiddenProperty = 'hidden' in ...

  5. Ubuntu系统升级遇到问题记录

    The upgrade needs a total of 99.7 M free space on disk '/boot'. Please free at least an additional 5 ...

  6. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_对象的相等性和同一性

    [重写Equals注意的事项] 1. Equals 必须是自反的:--x.Equals(x)肯定为 true 2. Equals 必须是对称的:--x.Equals(y)肯定返回与y.Equals(x ...

  7. 75th LeetCode Weekly Contest All Paths From Source to Target

    Given a directed, acyclic graph of N nodes.  Find all possible paths from node 0 to node N-1, and re ...

  8. centos7初始优化

    第1章 优化 1.1 修改yum源 epel源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Cen ...

  9. 汉诺塔问题hdu 2065——找规律

    这类题目就是纸上模拟,找规律. 问题描述:在一块铜板上有三根杆,目的是将最左边杆上的盘全部移到右边的杆上,条件是不允许直接从最左(右)边移到最右(左)边(每次移动一定是移到中间杆或从中间移出),也不允 ...

  10. SQL智能提示插件——SQLPrompt

    1.安装SQLPrompt,直接点击下一步即可,然后打开SQL Server 在菜单栏找到SQLPrompt选项注册该软件 2.先断开网络,然后运行注册机,将注册吗复制到序列号的地方,将两个勾选的复选 ...