h5学习-css3的一些内容整理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3变形功能 transform属性</title>
<style type="text/css">
div{
width:300px;
height: 300px;
background-color:#000; }
div:hover{
/*-moz-transform: rotate(45deg); 旋转*/
/*-moz-transform: scale(2,2); 缩放，不能设置为负值，可以设置小数 0.5*/
/*-moz-transform: skew(30deg);倾斜*/
/*-moz-transform: translate(50px);移动*/
}
</style>
</head> <body>
<h1>rotate旋转</h1>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css动画功能</title>
<style type="text/css">
div{
width:200px;
height: 200px;
background-color: aqua;
-moz-transition:all 1s linear;
}
div:hover{
background-color: #e54d26;
width: 400px;
height: 400px;
} </style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 animation属性的使用</title>
<style>
div{
width: 10px;
height: 20px;
background-color: aquamarine;
}
/* 关键帧的定义*/
@-webkit-keyframes mycolor {
0%{
background-color: #D2D2D2;
}
10%{
background-color: #646464;
width: 10px;
}
20%{
background-color: aqua;
width:20px ;
}
80%{
background-color: #e54d26;
width: 80px;
}
100%{
background-color: blueviolet;
width: 100px;
}
} div:hover{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-moz-animation-iteration-count:1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
h5学习-css3的一些内容整理的更多相关文章
- H5学习的第三周
上周,我们结束了京东站的制作,本周我们开始了手机站和响应式网站的学习,并仿制了一个手机端界面和一个响应式界面,在完成这两个网站的过程中我遇到了许多问题,也了解了它们的解决方法,接下来我讲详细介绍本周我 ...
- H5学习第二周
怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...
- H5学习笔记1
H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...
- css3网格效果（整理）
css3网格效果(整理) 一.总结 一句话总结: css3网格原理是渐变(linear-gradient)绘制图形,background-size属性指定重复的小单元的大小 多个渐变(linear-g ...
- 【PyTorch】深度学习与PyTorch资料链接整理
欢迎来到我的博客! 以下链接均是日常学习,偶然得之,并加以收集整理,感兴趣的朋友可以多多访问和学习.如果以下内容对你有所帮助,不妨转载和分享.(Update on 5,November,2019) 1 ...
- H5+JS+CSS3 综合应用
慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
- 假如 Micromedia 没被收购，会不会早于 Apple 推动 H5、CSS3 的发展
看着如今大行其道的 H5.CSS3,想想当年的“网页三剑客”,不禁感慨:假如 Micromedia 没被收购,会不会早于 Apple 推动 H5.CSS3 的发展? 当时 Apple 先是询问 Ado ...
- H5学习第四周
本周.我们结束了HTML标签和css样式部分,开始了JS的学习.JS是的内容和css,html基本上没有什么联系而且它比较需要逻辑思考能力,所以要从新开始学习. 使用js的三种方式: 1.html标签 ...
随机推荐
- SDUT 3503 有两个正整数，求N!的K进制的位数
有两个正整数,求N!的K进制的位数 题目链接:action=showproblem&problemid=3503">http://sdutacm.org/sdutoj/prob ...
- 再理解HDFS的存储机制
再理解HDFS的存储机制 1. HDFS开创性地设计出一套文件存储方式.即对文件切割后分别存放: 2. HDFS将要存储的大文件进行切割,切割后存放在既定的存储块(Block)中,并通过预先设定的优化 ...
- 哨兵和docker容器
1,redis哨兵的配置 redis-6379配置文件内容如下 cat redis-6379.conf port 6379 daemonize yes logfile "6379.log&q ...
- java8--网络编程(java疯狂讲义3复习笔记)
重点复习一下网络通信和代理 java的网络通信很简单,服务器端通过ServerSocket建立监听,客户端通过Socket连接到指定服务器后,通信双方就可以通过IO流进行通信. 需要重点看的工具类:I ...
- 系统队列中的Windows错误报告
- mongo11---Access control is not enabled for the database
今天使用MongoDB时遇到了一些问题 建立数据库连接时出现了warnings 出现这个警告的原因是新版本的MongDB为了让我们创建一个安全的数据库 必须要进行验证 后来在外网找到了答案 解决方案如 ...
- 深入分析linux调度机制
一．说明 本文以linux-2.4.10 为例主要分析Linux 进程调度模块中的schedule 函数及其相关的函数.另外相关的前提知识也会说明.默认系统平台是自己的i386 架构的pc. 二．前提 ...
- assert的作用是什么
assert()宏是用于保证满足某个特定条件,用法是: assert(表达式); 如果表达式的值为假,整个程序将退出,并输出一条错误信息.如果表达式的值为真则继续执行后面的语句. 使用这个宏前需要包含 ...
- 比特币交易（Transaction）的输入与输出
比特币通过“挖矿”机制保证了不能任意造币.通过分布式网络和HashCash机制解决双重支付问题.事实上比特币系统中不存在独立的电子货币,而只存在交易单(账单),货币值是依附于交易单存在的,所以比特币中 ...
- Android沉浸式状态栏(透明状态栏)最佳实现
Android沉浸式状态栏(透明状态栏)最佳实现 在Android4.4之前,我们的应用没法改变手机的状态栏颜色,当我们打开应用时,会出现上图中左侧的画面,在屏幕的顶部有一条黑色的状态栏,和应用的风格 ...