CSS3特殊效果

CSS3,html5:各种属性,有酷炫的效果

兼容性问题:政府大多数政府机构都是用的IE6.7,所以很多时候要兼容IE6.7,IE连PNG格式都不支持

margin:本身有兼容性问题,在其他地方可能有问题
padding:内边距还好一些

APP端只有一个兼容性问题,屏幕,
要自适应屏幕
两种方法:(腾讯的autoSize,js)
(metaholder.js 连rem都可以不用,用px都可以)

手机端只有屏幕兼容性问题,所以常用CSS3,html5

CSS3扩展:浏览器有兼容性问题,有些可以在浏览器加使用前缀:
-webkit- 谷歌和苹果
-o- 欧朋
-moz- 火狐
-ms- IE9

CSS3的标准写法都要加上前缀,直接写5条,加上本身的那一条,因为不加上很多浏览器就是有兼容性问题

各种CSS3属性:

1、点击图片的hover效果:
图片蒙版:现在不常用,遮盖效果
图片翻转:
div{
width: 168px;
height: 81px;
border: 1px solid red;
overflow: hidden;
transition: all 1.5s linear;
}
img{
transition: all 1.5s linear;
}
div:hover{
transform: rotateY(180deg);
}
div:hover img{
transform: rotateY(180deg);
}
}

图片放大:

2、边框圆角:-moz-border-radius:25px; /* Old Firefox */

3、边框阴影:box-shadow: 10px 10px 5px #888888;水平阴影,垂直阴影,模糊值,颜色
还可以设置各种颜色,向内(负值)向外阴影

4、背景,background-size,适应性非常好,常用。

5、文本:text-shadow,和边框阴影

6、CSS转换,2D,3D转换
CSS3 转换:对元素进行移动、缩放、转动、拉长或拉伸。
转换是使元素改变形状、尺寸和位置的一种效果。

具体看API,

7、过渡效果
应用,进度条,慢慢放大缩小,旋转放大等效果

8、动画效果
以前用flash,但是要收版权费,现在都没有用了

CSS3的效果可以重一种样式转换为另一种样式的效果,可以使用任意多动画任意次数

时间: 2024-08-25 17:29:40

CSS3特殊效果的相关文章

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

css3

现在移动端单位基本都用rem加百分比布局,能适应各种手机 垂直居中问题: https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/ 方法三 这种方法,在 content 元素外插入一个 div.设置此 div height:50%; margin-bottom:-contentheight;. content 清除浮动,并显示在中间. <divid="floater&q

【转】CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

CSS3伪类和伪元素的特性和区别

本文转自:http://www.cnblogs.com/ihardcoder/p/5294927.html 今天复习css时发现::的css选择器,查了一下,知道有伪元素和伪类这件事,他们的区别是什么呢?很幸运已经有人总结好了! CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其实上面提到的这些伪类和伪元素都是CSS1和CS

css3 自定义字体的使用方法

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

CSS3 基本知识

1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的布局.字体.颜色.背景和其他效果实现更加精确的控制,只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分.通过仅仅编辑一个简单的 CSS 文件,外部样式表有能力同时改变站点中所有页面的布局和外观. CSS3 语言开发是朝着模块化发展的.之前的规范作为一个模块很庞大而且比较复杂,所以 CSS

css3之perspective 及rotateX、rotateY、rotateZ、rotate以及translateZ

最近想写基于css3和jquery的翻书效果插件,了解到需要用到perspective以及transform中的rotateX等属性.所以,找了一些资料,本地做了一些测试,将学习过程和心得体会记录下来. tranform:rotateX.rotateY.rotateZ与rotate的区别 rotate:2D平面旋转顺时针旋转指定的角度. <div class='rotate'></div> <style> body{ background: #337479; } .ro

【转】 CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方