CSS3新增属性2
阴影
box-shadow:水平偏移 垂直偏移; 偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;
背景
background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment
CSS3变换
transform
translatex()
translatey()
translate(x, y)
rotate() 角度 deg
skewx() 角度deg
skewy()
skew(x, y)
transform-origin 变换的原点。 对translate没有意义。 对rotate影响大
过渡效果
哪些CSS属性可以过渡
长度 (padding margin width height left/top/right/bottom border-width background-position ...)
颜色
变换
纯数字 (opacity、z-index)
触发过渡
伪类触发 :hover :focus ....
媒体查询 @media
JS
相关属性
transition-property 指定要过渡的属性 用,隔开。默认是 all
transition-duration 过渡持续时间
transition-timing-function 过渡线性效果 默认 ease
transition-delay 过渡延迟
transition:property timing-function duration delay
CSS3动画
关键帧
@keyframes 动画名字 {
0% {
}
20% {
}
40% {
}
100% {
}
}
相关CSS属性
animation-name 指定动画的名字
animation-duration 动画的执行时间
animation-timing-function 执行效果速度
animation-delay 延迟
animation-iteration-count 循环 次数 infinite(无限)
animation-direction: alternate (正向 反向 交替)\ reverse(反向)
animation-play-state: running / paused
animation 复合属性
CSS3新增属性2的更多相关文章
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- css3新增属性-background背景
css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- 第七篇、CSS3新增属性
<!-- 1.透明度 opacity(设置不透明度):0.2: --rgba --background-color:rgba(255,0,0,0.8); 2.块阴影和圆角阴影 --box-sha ...
- CSS3 新增属性
1Css3概述 从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题. 从前端技术的角度可以把互联网的发展分为三个阶段:第一阶段是web1.0以内容为主的网络 前端主流技术是H ...
- 深入了解——CSS3新增属性
CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...
随机推荐
- HTML5 Canvas时间效果
Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...
- socket编程中write、read和send、recv之间的区别~转载
socket编程中write.read和send.recv之间的区别 http://blog.csdn.net/petershina/article/details/7946615 一旦,我们建立 ...
- ThinkSnS v4后台任意文件下载漏洞
漏洞文件: /apps/admin/Lib/Action/UpgradeAction.class.php 主要问题还是出现在了180行直接将远程获取到的图片直接保存. 文中可见并没有做任何的对$dow ...
- Win7(64bit)搭建SVN
开始: 第一步:下载SVN客户端程序TortoiseSVN并安装(不习惯英文操作界面的顺便在最底下下载一个语言包),下载地址tortoiseSVN下载(由于系统是64位的,我下载的是TortoiseS ...
- 最简单的基于FFMPEG的图像编码器(YUV编码为JPEG)(转)
原文转自 https://blog.csdn.net/leixiaohua1020/article/details/25346147/ 伴随着毕业论文的完成,这两天终于腾出了空闲,又有时间搞搞FFMP ...
- 【Python学习笔记】使用Python计算皮尔逊相关系数
源代码不记得是哪里获取的了,侵删.此处博客仅作为自己笔记学习. def multipl(a,b): sumofab=0.0 for i in range(len(a)): temp=a[i]*b[i] ...
- 详见github
本栏博客不再专门更新,详见:https://github.com/dxscjx123/LeetCode
- python基础===tkinter学习链接
http://effbot.org/tkinterbook/tkinter-classes.htm
- 【bzoj4530】大融合(LCT的子树维护)
LCT维护子树并没有想象中的那么难,在这里只是复习下. (其他的维护子树的题目,可见:“共价大爷游长沙”) 只要记录下虚边连接的信息就好了. #include<bits/stdc++.h> ...
- [LabVIEW架构]ActorFramework(一)
前言 小黑结婚回来第二周了,每天忙于程序设计,时间比较紧张,所以文章一直没出来,也算憋大招了. 近期小黑将与大家一起认识一下ActorFramework,既是对自己一段时间写AF程序的总结,也是梳理, ...