CSS3 过度效果、动画、多列

一、CSS3过度:

       CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两相内容:指定要添加效果的CSS属性;指定效果的持续时间。如果为指定持续时间,transition将没有任何效果。

<style>

div {

    width: 100px;

    height: 100px;

    background: red;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

    transition: width 2s, height 2s, transform 2s;

}

div:hover {

    width: 200px;

    height: 200px;

    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

    transform: rotate(180deg);

}

</style>

所有的过渡属性:

<style>

div

{

width:100px;

height:100px;

background:red;

transition:width 1s linear 2s;

/* Safari */

-webkit-transition:width 1s linear 2s;

}

div:hover

{

width:200px;

}

</style>

二、CSS3动画:

CSS3可以创建动画。@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器:规定动画的名称;规定动画的时长。如果省略持续时间,动画将无法运行,因为默认值是0。

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

</style>

<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

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

</style>

改变背景色和位置:

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

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;}

}

</style>

CSS3的动画属性:

三、CSS3多列:

CSS3可以将文本内容设计成像报纸一样的多列布局。CSS3的多列属性:column-count、column-gap、column-rule-style;column-rule-width、column-rule-color、column-rule、column-span、column-width。

1、column-count:

column-count属性指定需要分隔的列数。

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

}

</style>

  1. 、column-gap:

column-gap属性指定列与列之间的间隙。

<style>

.newspaper

{

column-count:3;

column-gap:40px;

}

</style>

2、column-rule-style:

column-rule-style属性指定列与列之间的边框样式.

<style>

.newspaper

{

column-count:3;

column-gap:40px;

column-rule-style:dotted;

/* Firefox */

-moz-column-count:3;

-moz-column-gap:40px;

-moz-column-rule-style:dotted;

/* Safari and Chrome */

-webkit-column-count:3;

-webkit-column-gap:40px;

-webkit-column-rule-style:dotted;

}

</style>

3、column-rule-width:

column-rule-width属性指定了两列的边框厚度:

<style>

.newspaper {

    /* Chrome, Safari, Opera */

    -webkit-column-count: 3;

    -webkit-column-gap: 40px;

    -webkit-column-rule-style: outset;

    -webkit-column-rule-width: 1px;

    /* Firefox */

    -moz-column-count: 3;

    -moz-column-gap: 40px;

    -moz-column-rule-style: outset;

    -moz-column-rule-width: 1px;

    column-count: 3;

    column-gap: 40px;

    column-rule-style: outset;

    column-rule-width: 1px;

}

</style>

4、column-rule-color:

column-rule-color属性指定两列的边框颜色。

<style>

.newspaper

{

column-count:3;

column-gap:40px;

column-rule-style:outset;

column-rule-color:#ff0000;

/* Firefox */

-moz-column-count:3;

-moz-column-gap:40px;

-moz-column-rule-style:outset;

-moz-column-rule-color:#ff0000;

/* Safari and Chrome */

-webkit-column-count:3;

-webkit-column-gap:40px;

-webkit-column-rule-style:outset;

-webkit-column-rule-color:#ff0000;

}

</style>

5、column-rule:

column-rule属性是column-rule-*所有属性的简写:

<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 #ff00ff; /* Firefox */

-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */

column-rule:4px outset #ff00ff;

}

</style>

6、column-span:

column-span属性指定元素跨越多少列。

<style>

.newspaper

{

column-count:3;

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

}

h2

{

column-span:all;

-webkit-column-span:all; /* Safari and Chrome */

}

</style>

7、column-width:

column-width属性指定列的宽度:

<style>

.newspaper

{

column-width:100px;

-moz-column-width:100px; /* Firefox */

-webkit-column-width:100px; /* Safari and Chrome */

}

</style>

CSS3多列属性:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/187601.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2011年09月21日 Go生态洞察:Go图像处理包

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

矩阵起源加入 OpenCloudOS 操作系统开源社区,完成技术兼容互认证

近日&#xff0c;超融合异构云原生数据库 MatrixOne企业版软件 V1.0 完成了与 OpenCloudOS 的相互兼容认证&#xff0c;测试期间&#xff0c;整体运行稳定&#xff0c;在功能、性能及兼容性方面表现良好。 一、产品简介 矩阵起源 MatrixOrigin 致力于建设开放的技术开源社区和…

JVM-虚拟机的故障处理与调优案例分析

案例1&#xff1a;大内存硬件上的程序部署策略 一个15万PV/日左右的在线文档类型网站最近更换了硬件系统&#xff0c;服务器的硬件为四路志强处理器、16GB物理内存&#xff0c;操作系统为64位CentOS 5.4&#xff0c;Resin作为Web服务器。整个服务器暂时没有部署别的应用&#…

数据结构-图的课后习题(2)

题目要求&#xff1a; 对于下面的这个无向网&#xff0c;给出&#xff1a; 1.“深度优先搜索序列”&#xff08;从V1开始&#xff09; 2.“广度优先序列”&#xff08;从V1开始&#xff09; 3.“用Prim算法求最小生成树” 代码实现&#xff1a; 1.深度优先搜索&#xff1a…

AI由许多不同的技术组成,其中一些最核心的技术如下

AI由许多不同的技术组成&#xff0c;其中一些最核心的技术包括&#xff1a; 机器学习&#xff1a;这是一种让计算机从数据中学习的技术&#xff0c;它可以根据已有的数据预测未来的趋势和行为。机器学习包括监督学习、无监督学习和强化学习等多种类型。深度学习&#xff1a;这…

Java-多态

1. 多态 1.1 多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 1.2 多态实现条件 在java中要实现多态&#xff0c;必须要满足如下几个条件&#xff0c;缺一不…

C语言--汉诺塔【内容超级详细】

今天与大家分享一下如何用C语言解决汉诺塔问题。 目录 一.前言 二.找规律⭐ 三.总结⭐⭐⭐ 四.代码实现⭐⭐ 一.前言 有一部很好看的电影《猩球崛起》⭐&#xff0c;说呀&#xff0c;人类为了抗击癌症发明了一种药物&#x1f357;&#xff0c;然后给猩猩做了实验&#xff0…

LeetCode(4)删除有序数组中的重复项 II【数组/字符串】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 80. 删除有序数组中的重复项 II 1.题目 给你一个有序数组 nums &#xff0c;请你** 原地** 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数…

Conda executable is not found 三种问题解决

如果在PyCharm中配置Python解释器时显示“conda executable is not found”错误消息&#xff0c;这意味着PyCharm无法找到您的Conda可执行文件。您可以按照以下步骤解决此问题&#xff1a; 1.方法一 确认Conda已正确安装。请确保您已经正确安装了Anaconda或Miniconda&#xff…

前端-第一部分-HTML

一.初识HTML 1.1 HTML 简介 HTML 全称为 HyperText Mark-up Language&#xff0c;翻译为超文本标签语言&#xff0c;标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一&#xff0c;也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本&a…

Hadoop架构、Hive相关知识点及Hive执行流程

Hadoop架构 Hadoop由三大部分组成:HDFS、MapReduce、yarn HDFS&#xff1a;负责数据的存储 其中包括&#xff1a; namenode&#xff1a;主节点&#xff0c;用来分配任务给从节点 secondarynamenode&#xff1a;副节点&#xff0c;辅助主节点 datanode&#xff1a;从节点&#x…

评国青、优青、杰青,到底需要什么级别的文章?五篇代表作如何选?

一到年底就听同事们讨论到底申报“杰青”、“优青”还是“国青”&#xff0c;那么&#xff0c;“杰青”到底是什么呢&#xff1f;它和“优青”、“国青”又有什么区别呢&#xff1f; 杰青&#xff0c;全称“国家杰出青年基金获得者”&#xff0c;是国家自然科学基金里人才资助…

WAF入侵防御系统标准检查表

软件开发全文档获取&#xff1a;进主页

pyOCD

pyOCD 目录结构

在 Arduino IDE 2.0 中安装 ESP32 板(Windows、Mac OS X、Linux)

有一个新的 Arduino IDE——Arduino IDE 2.0&#xff08;测试版&#xff09;。在本教程中&#xff0c;您将学习如何在 Arduino IDE 2.0 中安装 ESP32 板并将代码上传到板。本教程与 Windows、Mac OS X 和 Linux 操作系统兼容。 据 Arduino 网站称&#xff1a;“ Arduino IDE 2.…

机器学习---多分类SVM、支持向量机分类

1. 多分类SVM 1.1 基本思想 Grammer-singer多分类支持向量机的出发点是直接用超平面把样本空间划分成M个区域&#xff0c;其 中每个区域对应一个类别的输入。如下例&#xff0c;用从原点出发的M条射线把平面分成M个区域&#xff0c;下图画 出了M3的情形&#xff1a; 1.2 问题…

局域网内部服务器访问外部网络

​ 一、环境说明 如下图所示&#xff0c;局域网1中的服务器是可以访问外网的&#xff0c;局域网2中的服务器发出的数据包经过中间路由可以到达局域网1中的服务器。现在有一种需求需要使局域网2中的服务器也要能访问外网&#xff0c;这里考虑采用如下方法来实现。 ​​ 二、软…

MySQL | 数据库的表的增删改查【进阶】

MySQL | 数据库的表的增删改查【进阶】 文章目录 MySQL | 数据库的表的增删改查【进阶】系列文章目录本节目标&#xff1a;数据库约束约束类型NULL约束UNIQUE&#xff1a;唯一约束DEFAULT&#xff1a;默认值PRIMARY KEY&#xff1a;主键FOREIGN KEY&#xff1a;外键CHECK 表的设…

JSON可视化管理工具JSON Hero

本文软件由网友 zxc 推荐&#xff1b; 什么是 JSON Hero &#xff1f; JSON Hero 是一个简单实用的 JSON 工具&#xff0c;通过简介美观的 UI 及增强的额外功能&#xff0c;使得阅读和理解 JSON 文档变得更容易、直观。 主要功能 支持多种视图以便查看 JSON&#xff1a;列视图…

网易云音乐未登录接口返回301

网易云音乐 NodeJS 版 API (neteasecloudmusicapi.js.org) 上面是网易云音乐的官方API接口文档 当我调用接口发送请求的时候部分接口数据是需要登录之后进行获取的&#xff0c;但是当我发送请求的时候原生js项目中的跨端问题是比较难解决的。 遇到的问题&#xff1a;跨端请求…