CSS3-3
关于背景
一. 渐变&径向渐变(background-image: -webkit-linear-gradient() && background-image: -webkit-radial-gradient())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: orange; /* 不用浏览器前缀
chrome : -webkit-
Firefox : -moz-;
IE : -ms-;
opera : -o-;
*/ /* 1 基本用法*/ /*旋转角度，竖直开始；加前缀，水平开始*/
/*background-image: -webkit-linear-gradient(rgba(255,0,0,.2), yellow, blue 30%, green 100%);
background-image: -o-linear-gradient(rgba(255,0,0,.2), yellow, blue, green);
background-image: linear-gradient(rgba(255,0,0,.2), yellow , blue 30%, green 30%);*/
/*控制颜色渐变的方向 to right -- 从左向右
to top -- 从下到上
to left -- 从右到左
to bottom --- 从上到下（默认值） */ /*0deg = to top -- 从下到上*/
/*基于0度顺时针旋转45deg*/
/*基于0度逆时针旋转45deg*/ /*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/ /* 2 径向渐变 : 由圆点向外延伸*/
background-image: -webkit-radial-gradient(100px 100px,blue,white,red,black,purple,navy,green,yellow);
}
</style>
</head>
<body> <div class="box"></div> <script type="text/javascript">
</script>
</body>
</html>
二. 渐变&径向渐变()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 508px;
height: 300px;
border: 10px solid #000;
padding: 100px;
background: url("C:\\Users\\Public\\Pictures\\Sample Pictures\\jjy.jpg") ;
/* 默认：background-clip: padding-box; */
/*
background-clip: content-box;
border-box 背景被裁剪到边框盒。 测试
padding-box 背景被裁剪到内边距框。 测试
content-box 背景被裁剪到内容框。
*/
background-clip: content-box;
/* background-origin: padding-box|border-box|content-box;
padding-box 背景图像相对于内边距框来定位。（默认）
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
*/
background-origin: content-box; /*
background-size: length|percentage|cover|contain;
length 设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。(原图) contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域(保证不变形)
*/
/*background-size: 100px;*/
/*background-size: 600px auto; */
/*background-size: 100%;*/
background-size: cover;
/*background-size: contain;*//*这个等价于background-size: 100%;*/ /*
多背景：一个盒子可以携带多个背景。
*/
/*
background: url() repeat-y,
url() no-repeat,
url();
background-size: auto auto,
600px 600px,
auto auto;
*/
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
三.过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*
1.过渡：表示元素从状态1 到 状态2 变化不是瞬间的，而是动画。可以用css3 的 transition属性制作。css3前，是通过js的定时器(setInterval)实现。transition是浏览器内核c++实现的，因此效率极高。不过可能存在兼容问题。 2.基本语法
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间.
transition-timing-function 规定过渡效果的时间曲线。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
transition-delay 规定过渡效果何时开始. transition: "过渡的属性名称 all表示所有" "过渡所需时间" "过渡时间曲线" "过渡开始时间";
*/
div{
width: 500px;
height: 500px;
background: yellowgreen;
transition: all 2s linear;
}
div:hover{
background: red;
}
/*
3.哪些属性不能用过渡？渐变色、float；几乎都可以用过渡属性。
对比：JQ的animate函数对 background-color，background-position不支持，css3支持。
*/
/*
4.什么是否出发过渡？
任何的css变化都会触发过渡。
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3-3的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
随机推荐
- BIOS备忘录之SPI(fingerprint)设备
Reset和INT信号使用的是GPIO功能,需要显式的使用(INT信号使用了GPIO的int number,RST信号使用了GPIO的absolute number): 问题举例 漏电导致功能异常:在 ...
- P1450 [HAOI2008]硬币购物（完全背包+容斥）
P1450 [HAOI2008]硬币购物 暴力做法:每次询问跑一遍多重背包. 考虑正解 其实每次跑多重背包都有一部分是被重复算的,浪费了大量时间 考虑先做一遍完全背包 算出$f[i]$表示买价值$i$ ...
- PHP遍历二叉树
遍历二叉树,这个相对比较复杂. 二叉树的便利,主要有两种,一种是广度优先遍历,一种是深度优先遍历. 什么是广度优先遍历?就是根节点进入,水平一行一行的便利. 什么是深度优先遍历呢?就是根节点进入,然后 ...
- [c/c++] programming之路（26）、结构体
一.初始化字符串 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...
- time模块和os模块,json模块
import time # def month(n): # time.local() # struct_time=time.strptime("%Y-%m-1","%Y- ...
- 安装linux14.04
一.制作Ubuntu启动盘 1.将空的优盘格式化当做启动盘,下载UltralSO并安装,安装成功后打开,点击工具栏中的第二个打开镜像文件工具(或通过文件-打开的方式打开),选择下载好的Ubuntu镜像 ...
- [IoC容器Unity]第二回：Lifetime Managers生命周期
1.引言 Unity的生命周期是注册的类型对象的生命周期,而Unity默认情况下会自动帮我们维护好这些对象的生命周期,我们也可以显示配置对象的生命周期,Unity将按照配置自动管理,非常方便,下面就介 ...
- eclipse报错：Multiple annotations found at this line: - String cannot be resolved to a type解决方法实测
Multiple annotations found at this line:- String cannot be resolved to a type- The method getContext ...
- Java中的各种bean对应的意义(VO,PO,BO,QO, DAO,POJO,DTO)
VO(value object) 值对象 通常用于业务层之间的数据传递,用 new 关键字创建,由 GC 回收的,和 PO 一样也是仅仅包含数据而已.但应是抽象出的业务对象 , 可以和表对应 , 也可 ...
- “妄”眼欲穿-CSS之flex布局和边框阴影
妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...