CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记，之后工作了进行内容的补充
7. CSS动画--页面特效
7.1 2D、3D转换
7.1.1 通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2D、3D来转换元素
7.1.2 2D转换方法
translate()
rotate()
scale()
skew()
matrix()
7.1.3 3D转换方法：
rotateX()
rotateY()
7.2 过渡
1、通过使用CSS3，可以给元素添加一些效果
2、CSS3过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的时间
3、属性
| 属性 | 描述 |
| transition | 设置四个过渡属性 |
| transition-property | 过渡的名称 |
| transition-duration | 过渡效果花费的时间 |
| transition-timing-function | 过渡效果的时间曲线 |
| transition-delay | 过渡效果开始时间 |
7.3 动画
1、通过CSS额，也可以进行创建动画了
2、CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
7.4 多列
1、在CSS3中，可以创建多列来对文本或者区域进行布局
2、属性：
column-count
column-gap
column-rule
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ column-count: 3; -webkit-column-count: 3; -webkit-column-gap: 50px; /*webkit是给谷歌浏览器老版本兼容用的*/ column-gap: 50px; column-rule:5px outset #FF0000; /*out是间隔线的样式*/ } </style> </head> <body> <div class="div1"> 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。 </div> </body> </html>
7.5 瀑布流效果（这里的并不是最好的瀑布流效果设计，这是竖着排顺序的，用了7.4的知识）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流2</title> <style> .container{ column-width: 250px; -webkit-column-width: 250px; -webkit-column-gap: 5px; column-gap: 5px; } .container div,.container img{ width:250px; margin:5px 0; } .container p{ text-align: center; } </style> </head> <body> <div class="container"> <div><img src="img/1.jpg" alt=""></div> <p>这是第1张图片</p> <div><img src="img/2.jpg" alt=""></div> <p>这是第2张图片</p> <div><img src="img/3.jpg" alt=""></div> <p>这是第3张图片</p> <div><img src="img/4.jpg" alt=""></div> <p>这是第4张图片</p> <div><img src="img/5.jpg" alt=""></div> <p>这是第5张图片</p> <div><img src="img/6.jpg" alt=""></div> <p>这是第6张图片</p> <div><img src="img/7.jpg" alt=""></div> <p>这是第7张图片</p> <div><img src="img/8.jpg" alt=""></div> <p>这是第8张图片</p> <div><img src="img/9.jpg" alt=""></div> <p>这是第9张图片</p> <div><img src="img/10.jpg" alt=""></div> <p>这是第10张图片</p> <div><img src="img/11.jpg" alt=""></div> <p>这是第11张图片</p> <div><img src="img/12.jpg" alt=""></div> <p>这是第12张图片</p> <div><img src="img/13.jpg" alt=""></div> <p>这是第13张图片</p> <div><img src="img/1.jpg" alt=""></div> <p>这是第14张图片</p> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> <div><img src="img/4.jpg" alt=""></div> <div><img src="img/5.jpg" alt=""></div> <div><img src="img/6.jpg" alt=""></div> <div><img src="img/7.jpg" alt=""></div> <div><img src="img/8.jpg" alt=""></div> <div><img src="img/9.jpg" alt=""></div> <div><img src="img/10.jpg" alt=""></div> <div><img src="img/11.jpg" alt=""></div> <div><img src="img/12.jpg" alt=""></div> <div><img src="img/13.jpg" alt=""></div> <div><img src="img/1.jpg" alt=""></div> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> <div><img src="img/4.jpg" alt=""></div> <div><img src="img/5.jpg" alt=""></div> <div><img src="img/6.jpg" alt=""></div> <div><img src="img/7.jpg" alt=""></div> <div><img src="img/8.jpg" alt=""></div> <div><img src="img/9.jpg" alt=""></div> <div><img src="img/10.jpg" alt=""></div> <div><img src="img/11.jpg" alt=""></div> <div><img src="img/12.jpg" alt=""></div> <div><img src="img/13.jpg" alt=""></div> <div><img src="img/1.jpg" alt=""></div> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> <div><img src="img/4.jpg" alt=""></div> <div><img src="img/5.jpg" alt=""></div> <div><img src="img/6.jpg" alt=""></div> <div><img src="img/7.jpg" alt=""></div> <div><img src="img/8.jpg" alt=""></div> <div><img src="img/9.jpg" alt=""></div> <div><img src="img/10.jpg" alt=""></div> <div><img src="img/11.jpg" alt=""></div> <div><img src="img/12.jpg" alt=""></div> <div><img src="img/13.jpg" alt=""></div> </div> </body> </html>
8、html与css简单简单页面效果设计
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>极客学院</title> <style> *{ margin: 0px; padding: 0px; } body{ background-color: snow; } .wrapper{ width: 80%; height: 1000px; background-color: antiquewhite; margin: 0px auto; } .heading{ width: 100%; height: 90px; background-color: snow; margin: 0px auto; } .heading_title{ float: left; font-family: Arial, Helvetica, sans-serif; font-size: 30px; color: burlywood; } .heading_nav{ padding-bottom: 30px; padding-top: 30px; width: 100%; height: 30px; position: relative; } ul{ margin-left: 40px; float: left; list-style-type: none; padding-top: 6px; padding-bottom: 6px; } li{ padding-left: 10px; display: inline; } a:link,a:visited{ font-weight: bold; color: darkgray; text-align: center; padding: 6px; text-decoration: none; } a:hover,a:active{ color: dimgray; } .heading_img img{ border-radius: 30px; display: inline; width: 26px; height: 26px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); float: right; } .heading_soptlight form{ float: right; width: 100px; height: 26px; position: relative; margin-right: 50px; } form input{ height: 26px; border-radius: 30px; } .body{ padding: 30px; height: auto; width: auto; } .body_title h3{ font-size: 30px; font-family: Arial, Helvetica, sans-serif; color: #333333; } .body_title p{ margin-top: 20px; margin-bottom: 20px; } .footing{ padding-top: 20px; text-align: center; font-size: 10px; color: darkgray; } </style> </head> <body> <div class="container"> <div class="wrapper"> <div class="heading"> <div class="heading_nav"> <div class="heading_title"> 极客学院 </div> <div class="heading_navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">职业课程</a></li> <li><a href="#">技术问答</a></li> <li><a href="#">VIP会员</a></li> </ul> </div> <div class="heading_img"> <img src="jokul.jpg"> </div> <div class="heading_soptlight"> <form> <input type="text"> </form> </div> </div> </div> <div class="body"> <div class="body_title"> <h3>熟悉极客学院</h3> <p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p> </div> <hr/> <hr/> </div> </div> <div class="footing"> @极客学院 </div> </div> </body> </html>