css3特性简要概括
---恢复内容开始---
css3新增核心知识
背景和边框
文本效果
2d/3d转换
过渡和动画
多列布局
弹性盒模型
媒体查询
增强选择器 css3浏览器兼容性 css3在线工具
css3generator
http://css3generator.com/
https://www.colorzilla.com/gradient-editor/
https://css-tricks.com/examples/ButtonMaker/ border-radius:15px 25px 35px 45px; 左上角,右上角,右下角,左下角 css3阴影:
box-shadow:h-shadow v-shadow blur color 设置背景图片:
background-image(允许设置多个背景图片)
clip
origin
size background-image:url(shixun.png),url(bg.png);
position:right top,left top
repeat:no-repeat,repeat
origin
文本: text-shadow
word-wrap:换行 break-word 强制换行
text-overflow :设置文本内容溢出时控制规则
word-break
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis css3 选择器
https://www.caniuse.com/
新增选择器:
属性选择器 [^:开头 $结尾 ~其中有一个]
伪类选择器:first-child nth-child(1) first-of-type 匹配同类型中的第一个同级兄弟元素E
伪元素选择器::: 已经不局限使用样式选择器,对内容进行操作 E::before 配合content使用
E::after 配合content使用
E::first-letter 第一个字母
E::first-line 设置元素第一行的样式
E::selection 设置元素被选中的样式 2019/7/17
css3 过渡:将元素从一种状态转变为另一种状态(简单的动画效果) transition-property 设置过渡属性(效果)
transition-duration 设置过渡效果持续时间(n ms内完成)
transition-timing-function 设置过渡效果时间曲线
transition-delay 设置过渡效果开始时间(延迟) transition:property duration timing-function delay
transition:width 2s linear 1 css3动画 利用@keyframes 创建高级动画效果
@keyframes 设置动画效果
animation 执行动画动作(简写形式)
animation-name 设置@keyframes动画的名称
animation-duration 设置动画完成一个周期所花费的毫秒 2019/7/18 css3 2d转换
transform 转换方法名称 transform:rotate(9deg);
-webkit-transform:rotate(9deg);
..... transform:scale(2,0.5) 缩放
transfrom:translate(200px,50px);移动 //第一个参数left,二top
transform:skew(20deg,20deg);//第一个参数围绕x,第二个围绕y轴 css3 3d 转换 rotatex()
rotateY() scalex()
scaley() css3 媒体查询介绍---实现自适应布局 背景:针对不同的访问设备呈现不同的布局效果 在css3中利用媒体查询技术可以实现页面的“自适应布局” 响应式布局|| 自适应布局 响应式布局:
一套布局适应不同设备
自适应布局:
根据分辨率的不同,界面有会调整 查询实现的方法:
@media
第一种方式
@media 类型 and (条件1) and (条件2) {
...css样式定义
} @media screen and (min-width:375px) and (max-width:980px) {
body { }
} 第二种:@importt 导入制定css /*当屏幕可视窗口尺寸 <=980 px 像素时导入default.css文件*/
@import url("default.css") screen and (max-width:980px); 第三种:在link标签中导入指定css default.css
index.html
<link href="default.css" media="screen and (max-width:980px)"/>
1.过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:200px;
height:100px;
background: #ccc;
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:1s;
} div:hover {
width:500px;
} </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>
2.动画:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:200px;
height:100px;
background: #ccc;
animation-name: animation-1;
animation-duration: 2s;
animation-iteration-count: infinite; /*定义动画播放的次数*/
animation-direction: alternate;
animation-play-state: running;
} @keyframes animation-1 {
from {
background:yellow;
} to {
background:blue;
}
} </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>
3.用media做的自适应布局
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>
<header>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
</header>
<article>
<section>内容1</section>
<section>内容2</section>
<section>内容3</section>
</article>
<footer class="footer">
底部
</footer>
</div>
</body>
</html>
css:
* {
margin: 0;
padding: 0;
} div {
width:1200px;
text-align: center;
line-height: 50px;
font-size: 30px;
margin: 0 auto;
color:#fff;
} header {
background: red;
height:50px;
} header ul {
width:100%
} header ul>li {
width:20%;
float: left;
list-style: none;
font-size:none;
border-right:4px solid #fff;
box-sizing: border-box;
} article {
width:100%;
height:300px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff; }
section:first-child {
width:20%;
height:300px;
border-right:5px solid #fff;
background:red;
float:left;
box-sizing: border-box;
} section:nth-child(2){
width:60%;
height:300px;
border-right:5px solid #fff;
background:green;
float:left;
box-sizing: border-box;
} section:last-child {
width:20%;
height:300px;
background:blue;
float:left;
box-sizing: border-box;
} footer {
width:100%;
background: pink;
} @media screen and (max-width:980px){
section:last-child {
display:none;
} section:first-child {
width:40%;
box-sizing: border-box;
} section:nth-child(2){
width:60%;
box-sizing: border-box;
border:none;
}
} @media screen and (max-width:640px) {
header,
footer {
display: none;
}
section:first-child,
section:nth-child(2),
section:last-child {
width: 100%;
display: block;
float:none;
border:none;
} }
1.结果
1.屏幕大于980px
2.大于640px 小于980px
3.小于640px:
---恢复内容结束---
css3特性简要概括的更多相关文章
- html5特性简要概括
1.html5主要的设计目的: 互联网语义化,以便更好地被人类和机器阅读 更好的在移动设备上支持web应用 https://www.w3.org/TR/html5 新增内容: 新的语义标签 <h ...
- [转]JavaScript快速检测浏览器对CSS3特性的支持
转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...
- ExtJS的4.1新特性简要介绍
ExtJS的4.1新特性简要介绍 一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...
- 现在就能投入使用的12个高端大气上档次的CSS3特性
原文:http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/ 原文中有demo展示及下载. 翻译开始 ...
- 20个非常绚丽的 CSS3 特性应用演示
这篇文章收集了20个非常绚丽的 CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 ...
- 利用CSS3特性巧妙实现漂亮的DIV箭头
DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...
- CSS3特性修改(自定义)浏览器默认滚动条
前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成 ...
- Risc-V简要概括
1.Risc-V硬件平台术语 一个RiscV硬件平台可以包含一个或多个RiscV兼容的核心.其它非RiscV兼容的核心.固定功能的加速器.各种物理存储器结构.I/O设备以及允许这些部件相互连通的互联结 ...
- 字符输出流Writer简要概括
偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...
随机推荐
- linux kill进程没有立刻停止
前些天在执行restart脚本的时候遇到了一个奇怪的问题:1.第一次执行进程不见了,启动失败2.第二次重启进程成功,但是在kill的时候提示进程不存在需要重启两次进程才能成功 查看日志文件:第一次重启 ...
- PHP--修改数据库表前缀
<?php // error_reporting(0); //设置好相关信息 $dbserver='localhost';//连接的服务器一般为localhost $dbname='jfpay' ...
- 为什么前两年大热的VR创业突然冷了?
不得不说,如果不是<头号玩家>在国内的热映,人们似乎都要忘记VR这个行业了.<头号玩家>中那些带有极强真实色彩的游戏,其实就是VR进化的目标,甚至是巅峰!而里面的角色佩戴的设备 ...
- R语言的xtabs函数
今天在做一个列联表独立性检验的时候,总是无法处理好要求的数据类型,偶然的机会,看到了xtabs()函数,感觉很适合用来做列联表,适合将一列数据转换成列联表. shifou <- c(" ...
- Jmeter之正则表达式提取
一.正则表达式提取器: 1.比如需要提取如下响应文本中的 “<title> 孤舟点点 - 博客园找找看</title>” 里面的 “孤舟点点 - 博客园找找看”: 2.设置正则 ...
- SpringBoot 处理 POST Json 传参枚举
在 Spring 框架中对枚举类型的序列化/反序列化是有限制的. 假设如下面这样在某些情况下就不能正常工作: 123456789 public enum PayChannelEnum implemen ...
- diary20180428
17:05:59 今天早晨去了图书馆.学习了一把vscode.试图在河边看电脑,总有小虫不让我专心. 23:27:34 看纯黑直播打战神,有点感触. 动漫或游戏,角色觉醒,实力大增,小时候(甚至现在) ...
- 远程终端协议 TELNET
远程终端协议 TELNET 1.1.概述 TELNET 是一个简单的远程终端协议,也是因特网的正式标准. 用户用 TELNET 就可在其所在地通过 TCP 连接的23端口,使用主机名或 IP 地址登录 ...
- USB小白学习之路(1) Cypress固件架构解析
Cypress固件架构彻底解析及USB枚举 1. RAM的区别 56pin或者100pin的cy7c68013A,只有内部RAM,不支持外部RAM 128pin的cy7c68013A在pin脚EA=0 ...
- 第二章 表与指针Pro SQL Server Internal (Dmitri Korotkev)
聚集索引 聚集索引就是表中数据的物理顺序,它是按照聚集索引分类的.表只能定义一个聚集索引. 如果你要在一个有数据的堆表中创建一个聚集索引,如2-5所示,第一步要做的就是SQL服务器创建另一个根据聚集索 ...