CSS3 特效范例整理


Posted in HTML / CSS onAugust 22, 2011

CSS3 ?特效整理?例
CSS3?框特效:
CSS3:(右下?框?A角效果)border-bottom-right-radius

复制代码
代码如下:

border-bottom-right-radius:2em;
-moz-border-radius-bottomright:2em;
-webkit-border-bottom-right-radius:2em;

CSS3:(左下?框?A角效果)border-bottom-left-radius
复制代码
代码如下:

border-bottom-left-radius:2em;
-moz-border-radius-bottomleft:2em;
-webkit-border-bottom-left-radius:2em;

CSS3:(左上?框?A角效果)border-top-left-radius
复制代码
代码如下:

border-top-left-radius:2em;
-moz-border-radius-topleft:2em;
-webkit-border-top-left-radius:2em;

CSS3:(右上?框?A角效果)border-top-right-radius
复制代码
代码如下:

border-top-right-radius:2em;
-moz-border-radius-topright:2em;
-webkit-border-top-right-radius:2em;

CSS3:(?框?A角效果)border-radius
复制代码
代码如下:

border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;

CSS3:(?D片重??框效果)border-image,type=round
复制代码
代码如下:

border-width:15px;
-moz-border-image:url(?D片?址) 30 30 round;
-webkit-border-image:url(?D片?址) 30 30 round;
border-image:url(?D片?址) 30 30 round;

CSS3:(?D片不重??框效果)border-image,type=stretch
复制代码
代码如下:

border-width:15px;
-moz-border-image:url(?D片?址) 30 30 stretch;
-webkit-border-image:url(?D片?址) 30 30 stretch;
border-image:url(?D片?址) 30 30 stretch;

CSS3 ?影整理?例:
CSS3:(div?影效果) box-shadow

复制代码
代码如下:

box-shadow:5px 5px 10px 0px #000;
-moz-box-shadow:5px 5px 10px 0px #000;
-webkit-box-shadow:5px 5px 10px 0px #000;

CSS3:(文字?影)text-shadow

text-shadow:2px 1px 1px #999;

CSS3 背景整理?例:

CSS3:(?定背景大小)background-image

复制代码
代码如下:

background-image:url(image/bg-1gif.gif);
background-repeat:no-repeat;
background-size:400px 180px;
-moz-background-size:400px 180px;
-webkit-background-size:400px 180px;

CSS3:(背景出?位置)background-origin:content-box
复制代码
代码如下:

background:url(image/bg-1gif.gif) #FFC;
background-repeat:no-repeat;
background-origin:content-box;
background-position:left;
padding:30px;

CSS3:(背景出?位置)background-origin:border-box(????)
复制代码
代码如下:

background:url(image/bg-1gif.gif) #FFC;
background-repeat:no-repeat;
background-origin:border-box;
background-position:left;
padding:30px;

CSS3 透明整理?例:

CSS3:(透明度)opacity

opacity:0.5;
filter:Alpha(opacity=50) /*For IE8*/

CSS3 旋?整理?例:

CSS3:(旋?)transform:rotate(2deg)

复制代码
代码如下:

transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-o-transform:rotate(2deg);

CSS3 ?赢?整理?例:
CSS3:(?赢?)transition
复制代码
代码如下:

#div{
height:280px;
transition:height 2s;
-webkit-transition:height 2s;
-moz-transition:height 2s;
-o-transition:height 2s;
}
#div:hover{
height:300px;
}

CSS3:(?赢?)transition
复制代码
代码如下:

#div
{
width:500px;
position:relative;
}
#div:hover
{
animation-name:mymove;
animation-duration:5s;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:350px;}
}
@-webkit-keyframes mymove
{
from {left:0px;}
to {left:350px;}
}

-ms- /*For IE 9 */
-moz- /*For Firefox */
-webkit- /*For Safari and Chrome */
-o- /*For Opera */
相关参数设置请参考W3CSCHOOL

效果如下图:

CSS3 特效范例整理

HTML / CSS 相关文章推荐
css3学习之2D转换功能详解
Dec 23 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 #HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 #HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 #HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 #HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 #HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 #HTML / CSS
css3 background属性调整增强介绍
Dec 18 #HTML / CSS
You might like
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php依赖注入知识点详解
2019/09/23 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
XENON基于JSON变种
2010/07/27 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python3 中文文件读写方法
2018/01/23 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
linux面试题参考答案(7)
2012/10/29 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
文秘专业大学生求职信
2013/11/10 职场文书
黄金酒广告词
2014/03/21 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
python基础之模块的导入
2021/10/24 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL