CSS-3D动画笔记
2019-05-13 07:12:36来源:博客园 阅读 ()
3D
在2d的基础上添加 z 轴的变化
3D 位移:在2d的基础上添加 translateZ(),或者使用translate3d()
translateZ():以方框中心为原点,变大
3D 缩放:在2d的基础上添加 scaleZ(),或者使用scale3d()
scaleZ()和 scale3d()函数单独使用时没有任何效果
3D 透视:perspective 规定3D元素的透视效果
可以取值为none或不设置,这种情况下说明没有透视效果
取值越小,3d效果越明显
3D背面可见:backface-visibility 定义元素在不面对屏幕时是否可见
transform-style:规定被嵌套元素在3D空间中显示
transform-style:flat; 子元素将不保留其 3d 位置
transform-style:preserve-3d; 子元素将保留其3d位置
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
css中通过 @keyframes 规则是创建动画,可以改变任意多的样式任意多的次数。
当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:
规定动画的名称
规定动画的时长
语法:@keyframes styleName {
keyframes-selector{css-style;}
}
keyframes-selector:可以用百分比来规定变化发生的时间
也可以用关键词 "from" 和 "to"
0% 是动画的开始,100% 是动画的完成
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>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} .box {width: 600px; height: 600px; margin: 0 auto; position: relative; perspective: 800px;} .box ul {list-style: none; width: 300px; height: 300px; transition: all 2s; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-style: preserve-3d;} .box ul li {width: 300px; height: 300px; text-align: center; line-height: 100px; position: absolute; font-size: 36px;} .box ul li:nth-child(1) {background: rgba(255, 0, 255, 0.5); transform: translateY(-150px) rotateX(90deg);} .box ul li:nth-child(2) {background: rgba(192, 157, 81, 0.5); transform: translateY(150px) rotateX(-90deg);} .box ul li:nth-child(3) {background: rgba(35, 130, 142, 0.5); transform: translateX(-150px) rotateY(-90deg);} .box ul li:nth-child(4) {background: rgba(142, 35, 35, 0.5); transform: translateX(-150px) rotateY(90deg);} .box ul li:nth-child(5) {background: rgba(121, 17, 240, 0.5); transform: translateZ(150px);} .box ul li:nth-child(6) {background: rgba(47, 142, 35, 0.5); transform: translateZ(-150px) rotateY(180deg);} .box ul:hover {transform:rotateX(360deg) rotateY(360deg);} </style> </head> <body> <div class="box"> <ul> <li>上</li> <li>下</li> <li>左</li> <li>右</li> <li>前</li> <li>后</li> </ul> </div> </body> </html>
结果
动画示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <style> .box { width:100px; height:100px; background:red; position:relative; animation:animationStyle 5s linear 2s infinite alternate; } @keyframes animationStyle { 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> </head> <body> <div class="box"></div> </body> </html>
结果
原文链接:https://www.cnblogs.com/tynam/p/10847247.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端之css(宽高)设置小技巧
下一篇:CSS的基础学习
- HTML骨架 2020-06-10
- 6.动画 2020-05-24
- [书籍精读]《CSS世界》精读笔记分享 2020-05-17
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
- [书籍精读]《Web前端黑客技术揭秘》精读笔记分享 2020-04-26
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash