目录

  • CSS3 变形
    • 2D转换
    • 3D转换
  • CSS3颜色渐变
  • CSS3动画
    • transition过渡
    • animation动画
      • 案例1：旋转的风车
      • 案例2：摇晃的桃子
    • 案例3：3D开门动画
  • 总结

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）：

  1. 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  2. 径向渐变（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：默认值，元素过渡效果立即执行
过渡的触发机制

  1. 伪类触发
    ：hover
    ：active
    ：focus
    ：checked
  2. 媒体查询：通过@media属性判断设备的尺寸，方向等
  3. JavaScript触发：用JavaScript脚本触发
    代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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实现动画主要由两个部分组成：

  1. 通过类似Flash动画的关键帧来声明一个动画
  2. 在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="data:images/fengche.png"></div><div class="box2"><img src="data: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>

效果如下

总结

CSS3增加了很多新特性，虽然很多代码都无法自己很容易的写出来，但是多积累一点，对这些新特性熟悉，然后能够灵活的运用就可以了。

CSS3变形、渐变、动画的基本使用相关推荐

  1. css 文字颜色渐变 animation,css3文字渐变动画

    这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...

  2. CSS3变形透视动画总结

    CSS3变形透视动画总结 1. 总览 2. 移动元素 2.1 平面移动 2.2 Z轴方向移动 2.3 XYZ轴同时控制 3. 缩放元素 3.1 元素变形原点 4. 旋转元素 5. 倾斜元素 6. 透视 ...

  3. CSS3 变形 过渡 动画

    文章目录 CSS3 变形 过渡 动画 transform(变形) 概述 translate() 平移 scale() 缩放 skew() 倾斜 rotate() 旋转 transform-origin ...

  4. CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...

    无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...

  5. CSS3知识点整理（三）----变形与动画

    一.CSS3中的变形 1)旋转 rotate() rotate()函数通过指定的角度参数使元素相对原点进行旋转. 它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. 如果这个值为正值,元 ...

  6. 重新想，重新看——CSS3变形，过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

  7. 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果

    CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...

  8. 【CSS3初探之变形与动画】令人惊叹的CSS3

    前言 这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦! 若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想 ...

  9. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

最新文章

  1. java常用的7大排序算法汇总
  2. [Python]urllib库的简单应用-实现北航宿舍自动上网
  3. “安卓之父”的新公司倒了：拿到腾讯投资，成为硅谷独角兽，五年只出了一款手机...
  4. 【Paper】论文中定义、定理、引理、证明分别的含义
  5. windows10自动填充密码开机自动登陆
  6. 微服务架构与Spring Cloud Alibaba
  7. ubuntu16.04设置cron日志
  8. .net core中使用GB2312编码
  9. 雷电三接口有什么用_「滕·Gallery」我是如何用奥睿科雷电三硬盘盒来弥补之前的失误的？ | 数字尾巴 分享美好数字生活...
  10. sql常用函数详解（一）——字符串截取
  11. 【Hoxton.SR1版本】Spring Cloud Hystrix断路器
  12. 简单循迹小车实验心得_智能小车实验报告
  13. php 返回英文乱码,使用php 5时MySQL返回乱码的解决办法_php
  14. 利用依存分析完成开放领域关系抽取
  15. Matlab实现蚂蚁群算法
  16. 浏览器F12功能总结
  17. 后端存储Base64码传输的图片
  18. 使用PIE engine免费快速下载全球12.5m的DEM影像
  19. 计算机一级重点学科,国家一级重点学科，大学最强实力指标（前10强）！
  20. Swift 现可使用 Checkmarx 检查代码出错

热门文章

  1. var foo = function(){} 和 function foo(){}
  2. Android自定义View之滑杆内部带数字的SeekBar
  3. 如何判断是否是ssd硬盘？win10查看固态硬盘的方法
  4. @hapi/joi 报错 “message“: “Cannot mix different versions of joi schemas“
  5. 二叉树，平衡二叉树，B-Tree，B+Tree，跳表详解
  6. 片上总线Wishbone 学习（十二）总线周期之块写操作
  7. 计算机教师课改先进个人,基础教育课程改革工作先进个人事迹
  8. 读《张一鸣：我的大学四年收获及工作感悟》有感
  9. WPS解决账号登录验证问题（软件抓包重写过验证通用方法）
  10. ubuntu下终端命令修改图片像素