简单CSS3动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
font-size:12px;
margin:0;padding:0;
}
#box{
width:300px;
height: 300px;
margin:100px auto;
border:1px solid #ccc;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.inner-box{
width:60px;
height: 30px;
margin:100px auto;
border:1px solid #ccc;
transition: all 0.3s;
-webkit-transition: all 0.3s;
} @-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from{transform:rotate(0deg);}
to {transform:rotate(360deg);}
} #box:hover{
border-radius: 50%;
background:#007aff;
box-shadow: 5px 10px 10px rgba(0,0,0,.3); -webkit-animation: myfirst 3s;
-webkit-animation-iteration-count:3;
-webkit-animation-direction:alternate; }
</style>
</head> <body>
<div id="box">
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
</body>
</html>
简单CSS3动画的更多相关文章
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
- css3动画简单应用
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...
- css3动画简单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- 提交cookie登录
# coding:utf-8import requests # 先打开登录首页,获取部分cookieurl = "https://passport.cnblogs.com/user/sign ...
- 教你管理SQL实例系列(1-15)
全系列转自:51CTO ->jimshu http://jimshu.blog.51cto.com 目录及原本连接如下: 教你管理SQL实例(1)数据库实例 教你管理SQL实例(2)服务启动帐户 ...
- app开发学习需要经历哪些流程
app开发学习需要经历哪些流程?如何零基础入门app开发?以下是知乎热心开发者的经验总结,对学习app开发有很好的参考意义 1.如果没有编程基础的,学习基础知识的过程肯定是必须的.2.有了一些基础 ...
- (转)fiddler使用简介--其一
原文地址:https://www.cnblogs.com/miantest/p/7289694.html Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行 ...
- Win8.1和office2013使用电话激活步骤
Win8.1和office2013使用电话激活步骤: 先从Win8.1贴吧的最后几个回复中找到几个密钥,最后的通常是最新的,然后输入到Win8.1中,会提示你密钥无效,如果有效你就走了狗屎运了,无效的 ...
- 解决远程桌面关闭后teamviewer不能连接的问题
使用windows远程桌面连接远程电脑,在关闭远程桌面后,windows系统会锁定,此时再用teamviewer连接会出现“无法捕捉画面”或者“拒绝连接”的问题. 解决办法:设置要连接的远程电脑上的t ...
- CodeForces - 691E Xor-sequences 【矩阵快速幂】
题目链接 http://codeforces.com/problemset/problem/691/E 题意 给出一个长度为n的序列,从其中选择k个数 组成长度为k的序列,因为(k 有可能 > ...
- Laravel 调试利器 —— Laravel Debugbar 扩展包安装及使用教程
1.简介 Laravel Debugbar 在 Laravel 5 中集成了 PHP Debug Bar ,用于显示调试及错误信息以方便开发.该扩展包包含了一个 ServiceProvider 用于注 ...
- P4271 [USACO18FEB]New Barns
题目 P4271 [USACO18FEB]New Barns 做法 这题很长见识啊!! 知识点:两棵树\((A,B)\)联通后,新树的径端点为\(A\)的径端点与\(B\)的径端点的两点 不断加边,那 ...
- Python字符串格式转换
转换类型 转换类型 说明 d, i 带符号十进制 b 无符号二进制 o 无符号八进制 u 无符号十进制 x 无符号十六进制(小写) X 无符号十六进制(大写) e 科学计数法表示的浮点数(小写) E ...