HTML过渡动画

CSS3圆角

CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset

分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

1、盒子透明度表示法：opacity:0.1filter:alpha(opacity=10)（兼容IE）

2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

1、@keyframes 定义关键帧动画

2、animation-name 动画名称

3、animation-duration 动画时间

4、animation-timing-function 动画曲线

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器

-moz- 兼容firefox

-o- 兼容opera

-webkit- 兼容chrome 和 safari

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

步骤1 创建空白的HTML 5模版

首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码

步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码

读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码

1）首先往标题中增加如下代码：

　Simple HTML5 Template

复制代码

2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

复制代码

3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

复制代码

4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

Categories Category 1 Category 2

Parent Category Child One Child Two

Grandchild One Grandchild Two Grandchild Three

Child Three Category 3

Text Lorem Ipsum is simply dummy

text of the printing and typesetting industry.

复制代码

5）加上最后的标签，代码为：

Copyright@ 2013 HTML5.com Privacy Policy - About Us

复制代码

步骤4 增加CSS样式

首先创建一个空白的样式，如下：

[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {

font-family: arial, sans-serif

font-size: 100%/* best for all browser using em */

padding:0

margin:0

}

*, html { line-height: 1.6em}

article img { width:automax-width:100%height:auto}

.sidebar a, article a, header a, footer a { color: #C30}

header a { text-decoration: none}

#wrapper {

font-size: 0.8em/* 13px from 100% global font-size */

max-width: 960px/* standard 1024px wide */

margin: 0 auto

}

/* css for */

header { padding: 1em 0margin: 0pxfloat: leftwidth: 100%

}

header hgroup { width: 100%font-weight:normal}

/* css for */

nav

{ display: blockmargin: 0 0 2empadding: 0px

float: leftwidth: 100%background-color: #181919

}

nav ul ul {display: none}

nav ul li:hover >ul {display: block}

nav

ul { padding: 0list-style: noneposition:

relativedisplay: inline-tablez-index: 9999

margin: 0pxfloat: leftwidth: 100%

}

nav ul:after {content: ""clear: bothdisplay: block}

nav ul li {float: left}

nav ul li:hover a {color: #fff}

nav

ul li a { display: blockpadding: 1emfont-size:

1.125emcolor: #ccctext-decoration: none

margin: 0pxbackground-color: #000border-right: 1px

solid #333

}

nav ul li:last-of-type a {border-right: 1px solid transparent !important}

nav

ul ul { background: #5f6975border-radius: 0px

padding: 0position: absolutetop: 100%width:

autofloat: none

}

nav ul li:hover { background: #5f6975color: #FFF

}

nav ul ul li a:hover { background-color: #4b545f

}

nav ul ul li {

float: none

border-bottom: 1px solid #444240

position: relative

}

nav ul ul li a {

padding: 0.5em 1em

font-size: 1em

width:10em

color: #fff

}

nav ul ul ul {

position: absoluteleft: 100%top:0

}

/* css for */

section.content { width: 70%float:left}

.content article { width:100%float:leftpadding: 0 0 1emmargin: 0 0 1emborder-bottom: 1px solid #ddd}

article .entry { clear:bothpadding: 0 0 1em}

h1.post-title { font-size: 1.8emmargin:0padding:0}

.entry.post-meta { color: #888}

.entry.post-meta span { padding: 0 1em 0 0}

.entry.post-content { font-size: 1.125emmargin:0padding:0}

/* css for */

aside.sidebar { width: 25%float:right}

aside.sidebar ul { width:100%margin: 0pxpadding: 0pxfloat: leftlist-style: none

}

aside.sidebar

ul li { width:100%margin: 0px 0px 2empadding:

0pxfloat: leftlist-style: none

}

aside.sidebar ul li ul li { margin: 0px 0px 0.2empadding: 0px

}

aside.sidebar

ul li ul li ul li { margin: 0pxpadding: 0px 0px 0px

1emwidth: 90%font-size: 0.9em

}

aside.sidebar

ul li h3.widget-title { width:100%margin: 0px

padding: 0pxfloat: leftfont-size: 1.45em

}

/* css for */

footer { width: 98%float:leftpadding: 1%background-color: whitemargin-top: 2em

}

footer .footer-left { width: 45%float:lefttext-align:left}

footer .footer-right { width: 45%float:righttext-align:right}

复制代码

步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

/* ipad 768px */

@media only screen and (min-width:470px) and (max-width:770px){

body { background-color: red} #wrapper { width:96%font-size: 0.6875em}

section.content, aside.sidebar { width:100%}

}

/* iphone 468px */

@media only screen and (min-width:270px) and (max-width:470px){

body { background-color: yellow} #wrapper { width:96%font-size: 0.6875em}

section.content, aside.sidebar { width:100%}

}

复制代码

步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前

background-image不支持CSS3 transition

background-image 不支持CSS3 transition ，而CSS3 gradient渐变作为背景图片存在的时候，下面的CSS设置是不会有过渡效果的。

.gradient {

background-image: linear-gradient(to right, olive, green)

transition: background-image 0.5s linear

}

.gradient:hover {

background-image: linear-gradient(to right, green, purple)

}

鼠标hover会发现渐变的变化是很唐突的，一点过渡效果也没有。

下面问题来了，如果我们希望实现渐变hover时候有过渡变化的效果，该如何实现呢？我这里罗列的几种可行的方法。

二、借助background-position实现渐变过渡

background-image 虽然不支持CSS3 transition 过渡，但是 background-position 支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。

实现效果如下(鼠标hover)：

相关代码如下：

.box {

max-width: 400px

height: 200px

background: linear-gradient(to right, olive, green, purple)

background-size: 200%

transition: background-position .5s

}

.box:hover {

background-position: 100% 0

}

三、借助background-color实现渐变过渡

background-image 虽然不支持CSS3 transition 过渡，但是 background-color 支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。

鼠标hover前后效果对比：

相关代码如下:

.box {

max-width: 400px

height: 200px

background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5))

transition: background-color .5s

}

.box:hover {

background-color: purple

}

四、借助伪元素和opacity实现渐变过渡

借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。

下图为hover之后的效果：

相关代码如下：

.box {

max-width: 400pxheight: 200px

background: linear-gradient(to right, olive, green)

position: relative

z-index: 0

}

.box::before {

content: ''

position: absolute

left: 0top: 0right: 0bottom: 0

background: linear-gradient(to right, green, purple)

opacity: 0

transition: opacity .5s

z-index: -1

}

.box:hover::before {

opacity: 1

}

五、结束语

以上就是我所知道的几个方法，当然，肯定还有其他更好的实现，欢迎补充。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html 图片的过渡效果

京东年货节特惠来袭！精华礼盒现购超值

京东

广告

《风尚坐火箭学习vue》-- 第十二章：Vue中的动画transition

174阅读·0评论·1点赞

2021年11月26日

image target behaviour 和image target的关系_CSS3中用background-image实现粒子动画效果

26阅读·0评论·0点赞

2020年11月20日

background-image的用法

13.8W阅读·2评论·33点赞

2016年9月9日

background-image 详解

1.0W阅读·1评论·7点赞

2014年11月17日

html文字图片过度效果,如何在图片上应用css3过渡属性？

510阅读·0评论·0点赞

2021年6月11日

HTML CSS 动画 实现图片过渡与变换（图片不超过边框范围局部放大）

1499阅读·1评论·4点赞

2021年11月25日

京东年货节，小年狂欢开启！酵素饮料现购超划算，速戳~

京东

广告

html 图片的过渡效果,3个CSS3图片过渡动画特效

1880阅读·0评论·1点赞

2021年6月11日

---