100字范文 > CSS3变形渐变动画的基本使用

CSS3变形渐变动画的基本使用

时间：2021-01-13 10:27:11

相关推荐

CSS3变形渐变动画的基本使用

CSS3 变形

2D转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素。

2D变换方法：

translate()rotate()scale()skew()

具体的详情描述可以看：菜鸟教程

简单使用代码

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>CSS3 2D转换</title><style>.demo {margin: 25px;padding: 0;width: 150px;height: 50px;background-color: #2bab79;font-weight: bold;font-size: larger;float: left;}/* 旋转 */.trans1 {transform: rotate(30deg);}/* 变形 */.trans2 {transform: skew(30deg);} /* 缩放 */.trans3 {transform: scale(0.8);}/* 平移 */.trans4 {transform: translate(5px, 50px);}.trans {margin: 0px;padding: 0;width: 150px;height: 50px;background-color: #2bab79;transform: rotate(30deg);/* 旋转的基点 */transform-origin: left 0 0;}</style></head><body><div class="demo">不设置变形</div><div class="demo trans1">rotate(30deg)</div><div class="demo trans2">skew(30deg)</div><div class="demo trans3">scale(0.8)</div><div class="demo trans4">translate(5,50px)</div><div class="demo"><div class="trans">rotate(30deg)</div></span></div></body></html>

效果如下

3D转换

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

简单记住他们的坐标：

x左边是负的，右边是正的y 上面是负的，下面是正的z 里面是负的，外面是正的

rotate

rotateX() : 就是沿着 x 立体旋转.rotateY()：沿着y轴进行旋转rotateZ()：沿着z轴进行旋转

正方体案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS 3D转换</title><style>body {margin: 0;padding: 0;background-color: #F7F7F7;}.box {width: 200px;height: 200px;text-align: center;line-height: 200px;font-size: 24px;margin: 100px auto;position: relative;perspective: 1000px;transform-style: preserve-3d;transform: rotateX(-35deg) rotateY(35deg);}.front, .back, .left, .right, .top , .bottom {position: absolute;width: 100%;height: 100%;left: 0;top: 0;opacity: 0.5;}.front {background-color: pink;transform: translateZ(100px);}.left {background-color: green;transform: rotateY(90deg) translateZ(-100px);}.right {background-color: red;transform: rotateY(-90deg) translateZ(-100px);}.top {background-color: blue;transform: rotateX(90deg) translateZ(100px);}.bottom {background-color: yellow;transform: rotateX(-90deg) translateZ(100px);}.back {background-color: purple;transform: translateZ(-100px);}</style></head><body><div class="box"><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div></div></body></html>

效果如下

CSS3颜色渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变相关属性：background-image。

参考文档

直接上代码案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.rainbow-linear-gradient {width: 460px;height: 200px;/* 线性渐变 *//* 渐变生成的是背景图，所以需要设置background-image属性 *//* background-image: -webkit-linear-gradient(left, red 20%, green); */background-image: -webkit-linear-gradient(left, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%);}.rainbow-radial-gradient {width: 400px;height: 400px;/* 径向渐变 */background-image: -webkit-radial-gradient(100px, #ffe07b 15%, #ffb151 2%, #16104b 50%);}</style></head><body><div class="rainbow-linear-gradient"> </div><div class="rainbow-radial-gradient"> </div></body></html>

效果如下

CSS3动画

transition过渡

参考文档

定义

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。

CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。

语法

transition:[transition-property transition-duration transition-timing-function transition-delay ]

参数说明

transition-property：过渡或动态模拟的CSS属性transition-duration：完成过渡所需要的时间transition-timing-function：指定过渡函数transition-delay：过渡开始出现的延迟时间

过渡所需的时间（transition-duration）

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）。

过渡动画函数（transition-timing-function）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

ease：速度由快到慢（默认值）

linear：速度恒速（匀速运动）

ease-in：速度越来越快（渐显效果）

ease-out：速度越来越慢（渐隐效果）

ease-in-out：速度先加速再减速（渐显渐隐效果）

过渡延迟时间（ transition-delay ）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发

负值：元素过渡效果会从该时间点开始显示，之前的动作被截断

0：默认值，元素过渡效果立即执行

过渡的触发机制

伪类触发

：hover

：active

：focus

：checked媒体查询：通过@media属性判断设备的尺寸，方向等JavaScript触发：用JavaScript脚本触发

代码示例

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程()</title><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></head><body><p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div>鼠标移动到 div 元素上，查看过渡效果。</div></body></html>

效果如下

animation动画

参考文档

简介

animation实现动画主要由两个部分组成：

通过类似Flash动画的关键帧来声明一个动画在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

要创建 CSS3 动画，你需要了解 @keyframes 规则：

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

调用关键帧

语法

参数说明

案例1：旋转的风车

代码如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3动画»</title><style>body {margin: 0;padding: 0;background-color: #F7F7F7;}.box1 {width: 200px;margin: 50px auto;/* 动画属性 *//* 动画名字 */animation-name: rotate;/* 持续时间 */animation-duration: 4s;/* 动画的速度:匀速 */animation-timing-function: linear;/* 动画的次数,可以给具体次数,也可以设置循环:infinite */animation-iteration-count: 2;}/* 复合写法:第一次出现的时间是持续时间,第二次出现的时间是延迟时间 */.box2 {width: 400px;margin: 100px auto;animation: rotate 4s linear infinite;}img {width: 100%;display: block;}/* 定义动画 */@keyframes rotate {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(-360deg);}}</style></head><body><div class="box1"><img src="images/fengche.png"></div><div class="box2"><img src="images/fengche.png"></div></body></html>

效果如下

案例2：摇晃的桃子

代码如下

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><title>CSS3实现摇晃的桃子动画特效</title><link rel="stylesheet" type="text/css" href="css/peach.css"><style>/*第3单元项目3-3 摇晃的桃子*/p {font-family: "微软雅黑";font-size: 40px;position: absolute;top: -100px;left: 0px;}.act_wrapper {position: relative;z-index: 1;min-width: 1000px;/*元素最小宽度1000px*/margin: 0 auto;overflow: hidden;}.act_wrapper .act_bg {position: absolute;left: 50%;top: 0;z-index: 1;width: 1920px;margin-left: -1350px;}.act_wrapper .act_content {position: relative;z-index: 2;width: 1000px;height: 1200px;margin: 0 auto;margin-top: -569px}.act_bg {background: url(./images/bg2.jpg) 100% 0 no-repeat;height: 750px}.mod_style {position: absolute;top: 716px;left: 200px;width: 870px;height: 560px}/* 桃子的公共样式 */.peach {position: absolute;top: 0;left: 0;width: 90px;height: 100px;display: block;background: url(./images/peach.png) no-repeat 0 0;/*设置背景图片为精灵图片*/}.peach1 {background-position: 0 0;top: 100px;left: 72px}.peach2 {background-position: 0 -115px;top: 39px;left: 242px}.peach3 {background-position: 0 -215px;top: 71px;left: 452px}.peach4 {background-position: 0 -328px;top: 156px;left: 261px}.peach5 {background-position: 0 -435px;top: 256px;left: 412px}.peach6 {background-position: 0 -545px;top: 247px;left: 575px}.shake1 {-webkit-animation-duration: 2.5s;}.shake2,.shake6 {-webkit-animation-duration: 3.5s;}.shake3 {-webkit-animation-duration: 1.5s;}.shake4 {-webkit-animation-duration: 4s;}.shake5 {-webkit-animation-duration: 3s;}/* 动画公共部分 */.shake1,.shake2,.shake3,.shake4,.shake5,.shake6 {-webkit-animation-iteration-count: infinite;/*动画被播放的次数：无限次播放*/-webkit-animation-name: shake;/*动画名称：摇晃*/-webkit-animation-timing-function: ease-in-out;/*动画的速度曲线：以低速开始和结束*/}@-webkit-keyframes shake {0% {-webkit-transform: rotate(2deg);-webkit-transform-origin: 50% 0;}20% {-webkit-transform: rotate(10deg);-webkit-transform-origin: 50% 0;}40% {-webkit-transform: rotate(0deg);-webkit-transform-origin: 50% 0;}60% {-webkit-transform: rotate(-2deg);-webkit-transform-origin: 50% 0;}80% {-webkit-transform: rotate(-10deg);-webkit-transform-origin: 50% 0;}100% {-webkit-transform: rotate(0deg);-webkit-transform-origin: 50% 0;}}</style></head><body><div class="act_wrapper"><div class="act_content"><div class="mod_style"><p>摇晃的桃子</p><span class="peach peach1 shake1"></span><span class="peach peach2 shake2"></span><span class="peach peach3 shake3"></span><span class="peach peach4 shake4"></span><span class="peach peach5 shake5"></span><span class="peach peach6 shake6"></span></div></div><div class="act_bg"></div></div></body></html>

效果如下

案例3：3D开门动画

代码如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>开门大吉</title><style>section {width: 450px;height: 300px;border: 1px solid #000;margin: 100px auto;background: url("./images/hzw.gif") no-repeat;position: relative;perspective: 1000px;/*给父盒子增加透视*/}.door-left,.door-right {position: absolute;width: 50%;height: 100%;background-color: pink;transition: all 1s;/*连个门都是过渡*/}.door-left {left: 0;border-right: 1px solid #000;transform-origin: left;/*旋转中心点*/}.door-right {right: 0;border-left: 1px solid #000;transform-origin: right;/*旋转中心点*/}.door-left::after,.door-right::after {content: "";position: absolute;top: 50%;width: 10px;height: 10px;border: 1px solid #000;border-radius: 50%;transform: translateY(-50%);/*自己高度的一半*/}.door-left::after {right: 5px;}.door-right::after {left: 5px;}/* 鼠标经过section，两个门进行翻转 */section:hover .door-right {transform: rotateY(130deg);}section:hover .door-left {transform: rotateY(-130deg);}</style></head><body><section><div class="door-left"></div><div class="door-right"></div></section></body></html>

效果如下