CSS3图片混合怎么使用

php中世界最好的语言

发布时间：2017-12-01 11:30:14

1978人浏览过

来源于php中文网

原创

我们知道，在css3的强大特效功能的帮助下，混合模式可以让图片产生令人惊艳的效果，混合模式是指将上层的图像融入下层图像时采用的各种模式，下面我们来看看案列

一、transform-origin

CSS变形的原点，默认是对象的中心点。transform-origin接受两个参数，他们可以是百分比、em、px等具体的值，也可以是left、right、center、top、middle、bottom等关键字。

例如：

transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right;

立即学习“前端免费学习笔记（深入）”；

transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;

transform-origin: 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

二、transition--过渡

1.transition-property：定义转换动画的CSS属性名称。可以是none|all|CSS属性列表。

例如：

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property:background-color;

2.transition-duration：定义转换动画的时间长度。

例如：

transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;

3.transition-delay：定义过渡动画的延迟时间。

例如：

transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;

4.transition-timing-function：定义转换动画的效果。

取值可以是：

ease：缓解效果。

ease-in：渐显效果。

Python开发网站指南 WORD版

本文档主要讲述的是Python开发网站指南；HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器 Python和其他程序语言一样，有自身的一套流程控制语句，而且这些语句的语法和其它程序语言类似，都有for, if ,while 类的关键字来表达程序流程。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

下载

ease-out：渐隐效果。

ease-in-out：渐显渐隐效果。

linear：线性效果。

cubic-bezier：特殊的立方贝塞尔曲线效果。cubic-bezier(0.3, 0, 0.5, 1.0)。

例如：

transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing-function: linear;

三、animation

1.animation-name：动画名字。

2.animation-duration：动画时间。

3.animation-timing-function：动画播放方式。

4.animation-delay：动画开始播放时间。

5.animation-iteration-count：播放次数。infinite表示无限次。。

6.animation-direction：动画播放方向。normal--动画的每次循环都向前 alternate--第偶数次向前，奇数次向后。

例如：

div {

-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！