CSS3_过渡&动画&多列&用户界面

最新推荐文章于 2024-09-13 23:28:46 发布
最新推荐文章于 2024-09-13 23:28:46 发布
阅读量598 收藏
点赞数
分类专栏： CSS 文章标签： css3 transition animation columnrule resize

CSS3过渡 [transition]

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
属性值可以定义transition-property、transition-duration、transition-timing-function、transition-delay。

  • 当鼠标点击一个区域时，为这个区域添加宽度变化过渡效果，过渡时间为2s
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s;            
    -moz-transition:width 2s;       /* Firefox 4 */
    -webkit-transition:width 2s;    /* Safari and Chrome */  /* 为宽度变化添加过渡效果 */
    -o-transition:width 2s;         /* Opera */
}

div:hover
{
    width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上，div会在2s内完成宽度的变更。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>


  • 当鼠标点击一个区域时，为这个区域添加宽度、高度、旋转变化的过渡效果
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s, height 2s;
    -moz-transition:width 2s, height 2s, -moz-transform 2s;         /* Firefox 4 */
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s;   /* Safari and Chrome */ /* 为宽度、高度、转换的变换添加过渡效果 */
    -o-transition:width 2s, height 2s, -o-transform 2s;             /* Opera */
}

div:hover
{
    width:200px;
    height:200px;
    transform:rotate(180deg);
    -moz-transform:rotate(180deg);      /* Firefox 4 */
    -webkit-transform:rotate(180deg);   /* Safari and Chrome */
    -o-transform:rotate(180deg);        /* Opera */
}
</style>
</head>
<body>

<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>


CSS3动画 [animation]

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
需要定义一个@keyframes，然后在动画属性animation中引用这个定义。
动画包括以下几个属性：animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode。

  • 当页面加载时，将一个区域背景色从红色变成黄色，持续时间5s，然后恢复红色
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s;    /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s;      /* Opera */
}

@keyframes myfirst                /* 动画分为2个变化点: from, to */
{
    from {background:red;}
    to   {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
    from {background:red;}
    to   {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to   {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
    from {background:red;}
    to   {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>


  • 将一个区域绕着一个矩形的4个角旋转一周，并回到原地
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s;      /* Firefox */
    -webkit-animation:myfirst 5s;   /* Safari and Chrome */
    -o-animation:myfirst 5s;        /* Opera */
}

@keyframes myfirst                  /* 动画时间分为5个时间点：0%, 25%, 50%, 75%, 100% */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst     /* Firefox */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst       /* Opera */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>


CSS3多列

列数 [column-count]

规定元素应该被分隔的列数。

列间隔 [column-gap]

规定列之间的间隔。

列规则 [column-rule]

设置列之间的宽度、样式和颜色。

  • 将一段文字分成3列，列间距为40px，分隔的列线为4px宽的红色实线：
<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper
{
    /* 设置列数 */
    -moz-column-count:3;        /* Firefox */
    -webkit-column-count:3;     /* Safari and Chrome */
    column-count:3;

    /* 设置列的间隔 */
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari and Chrome */
    column-gap:40px;

    /* 设置间隔列实线的宽度、颜色、样式 */
    -moz-column-rule:4px outset #ff0000;    /* Firefox */
    -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
    column-rule:4px outset #ff0000;
}
</style>
</head>
<body>

<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>

<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。

此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。

通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。

通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>

</body>
</html>


CSS3用户界面

调整元素尺寸 [resize]
  • 定义一个区域，并且可在水平、垂直方向上进行调整大小
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    border:2px solid;
    padding:10px 40px; 
    width:300px;
    resize:both;    /* 可在水平、垂直方向上进行调整大小 */
    overflow:auto;
}
</style>
</head>
<body>

<div>resize 属性规定是否可由用户调整元素尺寸。</div>

<p><b>注释：</b> Firefox 4+、Safari 以及 Chrome 支持 resize 属性。</p>

</body>
</html>


规定元素的边框如何绘制 [box-sizing]

此属性的值有以下几种：

值描述
conten-box这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit规定应从父元素继承 box-sizing 属性的值。


  • 绘制2个并排的带边框方框:
<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
    width:30em;
    border:1px solid;
}
div.box
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;    /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    border:1px solid red;
    float:left;
}
</style>
</head>
<body>

<div class="container">
    <div class="box">这个 div 占据左半部分。</div>
    <div class="box">这个 div 占据右半部分。</div>
</div>

</body>
</html>


在边框之外绘制轮廓 [outline-offset]
  • 在一个区域边框外15px处绘制一个轮廓
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    margin:20px;
    width:150px; 
    padding:10px;
    height:70px;
    border:2px solid black;
    /* 设置轮廓的属性 */
    outline:2px solid red;
    outline-offset:15px;
} 
</style>
</head>
<body>

<p><b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>

<div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>

</body>
</html>



更多请参考：W3School

时间解
关注
专栏目录
纯CSS3页面切换过渡动画
05-26
4种纯CSS3超酷页面切换过渡动画特效
＜CSS3＞过渡与动画
最不正经的计算机专业学生
10-19 786
目录 1.过渡的基本使用 1.1 transition过渡 1.1.2 transition属性的基本使用 1.1.3 哪些属性可以参与过渡？ 1.1.4 all 1.1.5 过渡的四个小属性 1.2 过渡的缓动效果 1.2.1 缓动参数 transition-timing-fuction 1.2.2 常用的缓动参数 ease linear ease-in ease-out ease-in-out 1.2.3 贝塞尔曲线 1.3 过渡实例1：图片下文字信息过渡 1.4 过渡.
17-CSS3过渡属性和动画属性
保持好奇
10-12 1061
CSS3过渡属性、动画属性；transition,animation
css3过度与动画
m0_61902288的博客
07-21 835
css3过渡是元素从一种样式逐渐改变为另一种的效果。实现过渡须定义两项内容指定要添加效果的css属性指定效果的持续时间。解析应用于宽度属性的过渡效果，时长2秒。*如果未指定的期限，transition将没有任何效果，因为默认值是0。css属性的值更改时效果会发生变化。解析当实例中，当鼠标光标移动到该元素时，它逐渐改变原有样式。...
CSS3过渡动画
DGL_CSDN的博客
08-31 4365
1 过渡 1.1 基本形式 transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。 之前：元素 -> 元素:hover 状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。 过渡：从开始状态到结束状态的中间过程可以查看 格式： transition:过渡的属性 完成时间(s) 运动曲线 延迟时间 transition:all 3s(1s=1000ms) linear 0s;
HTML5+CSS3 精美登陆界面源码
01-19
在这个登录界面源码中，CSS3的这些特性被广泛应用于创建平滑的动画过渡，提升用户体验。 在压缩包的文件名中，"animated-login-form"可能是一个带有动态效果的登录表单，利用CSS3的动画来增强用户交互。"login-...
css3_jiesuo_HTML5_CSS3源码_
10-02
在移动设备设计中，CSS3的过渡（Transitions）和动画（Animations）效果极大地提升了用户体验。通过设置属性变化的时间和方式，可以创建平滑的视觉效果。此外，阴影（Box Shadows）、渐变（Gradients）和边框半径...
纯CSS3 Loading动画图标.rar_css loading 动画_nounva4_纯CSS3 Loading动画图标_蓝
09-15
CSS3是CSS（层叠样式表）的第三个主要版本，引入了诸多新功能和改进，如选择器增强、边框与背景、过渡（transitions）、动画（animations）、多列布局、Flexbox（弹性盒布局）和Grid Layout（网格布局）。...
淘宝购物界面_CSS3
07-15
综上所述，"淘宝购物界面_CSS3"项目涉及到CSS3的多个核心特性，包括选择器、布局、动画、响应式设计等，这些都是现代Web开发中不可或缺的技能。通过实践这些技术，开发者可以创建出更美观、更互动的网页购物体验。
多人聊天_html5_nodejs_CSS3_websocket_
09-29
CSS3引入了许多新特性，如选择器、动画、过渡和多列布局等。在这个多人聊天应用中，CSS3可以用来设计聊天窗口的样式，如背景色、字体样式、按钮的悬停效果，甚至动态消息提示等。例如，使用Flexbox或Grid布局可以...
CSS3 多列【column-count :3 分3列；column-gap:40px 列间距； column-rule: 1px solid lightblue;指定列边框样式】
云上
07-21 886
CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: 菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编
用css3的transition实现过渡动画
JianXingDeFeng的博客
12-04 2万+
CSS3,用transition实现过渡动画 用到了transition就先说说这个属性吧！ 一、transition属性简介 transition是网页上的过渡动画，变化的逐渐过渡效果，简称过渡动画！在CSS3出现之前，网页上的动画大多是用flash实现的，flash动画会产生很大的弊端！操作不便等等 1. 语法 transition: property duration t
CSS动画-多列
bahuichi7533的博客
06-10 86
　　1.CSS3中可以创建多列来对文本或者区域进行布局 　　2.属性： 　　　　column-count 文本列 　　　　column-gap 文本宽度 　　　　column-rule 文本线条 　　3.下面是个例子: 　　　在.html文件中: 　　 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l...
CSS3 过渡和动画
qq_46405281的博客
08-04 440
CSS3 过渡 transition；动画 animation
HTML窗口大小变化相应页面变化+字体动画显示
Lucky_7777777的博客
01-28 2435
/*整个body*/ body{ width: 1300px; margin: 0 auto; size: a3; } /*浏览器变小右边图移动到下面显示*/ @media only screen and (max-width:1024px ) {     #bdiv2{     position: relative;     left: -800px;     top:
【CSS3】transition过渡和animation动画
热门推荐
季诗筱的博客
07-23 4万+
写在前面的话： 之前实习的时候，刚开始的第一个月就是在研究CSS3的动画，因为要做转盘抽奖活动，预研的时候，我是用Canvas来画的，当时为了一个问题“如何使用canvas让图片围绕中心点旋转”折腾了半天啊，最后好在是解决了,我可是google了很多，看了很多stackoverflow上的英文才弄明白，==我是不是有点傻……（如果有感兴趣的同学想要尝试用Canvas让图片围绕中心点旋转，可以私信
CSS3 过渡、动画、多列、用户界面
weixin_30435261的博客
03-19 75
CSS3 过渡、动画、多列、用户界面 transition过渡 transition: transition-property transition-duration transition-timing-function transition-delay;//过渡名称 过渡时长 过渡时间曲线 过渡延时 .box { width: 100px; height: ...
css3过渡动画——transition属性
anqi124415的博客
10-08 513
1.linear 相同的速度从开始到结束，也就是匀速2.ease 默认值 慢速度开始--速度变快--慢速度结束3.ease-in 慢速度开始的过渡效果，也就是以低速度开始4.ease-out 慢速度结束的过渡效果，也就是以低速结束5.ease-in-out 以慢速度开始和结束的过渡效果。动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。/* 参与过渡的css属性名称 */css样式：参与过渡的css属性名称|all表示所有属性。/* 动画执行时间 *//* 速度类型 *//* 延迟时间 */
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1512
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML5, JavaScript & CSS3开发指南
此外，CSS3还提供了边框半径、阴影、渐变、多列布局和选择器等功能，使得网页设计更加灵活和精细。 本书将详细讲解如何使用HTML5的新特性构建文档结构，如 semantic elements（语义化元素）的使用，以及如何通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值