黑马程序员技术交流社区

标题: 技术贴 [打印本页]

---

作者: 做梦呢    时间: 2019-7-24 18:21
标题: 技术贴
经过半个多月的学习，从中我学会了很多有趣的知识点，比如过渡动画，一个网站LOGO如何优化。
过渡动画
1.transition: 要过渡的属性 花费时间 运动曲线 何时开始；
2.如果有多组属性，我们用逗号隔开
      transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;
3.all 所有属性都会变化（实际开发中不会分开书写多个属性，除非属性的运时间不同）
       transition: all 1s ease 0s;
4.    过渡写到本身上（谁需要过渡就加给谁）
       transition: all 0.5s;
常用的运动曲线：linear 匀速 ease逐渐慢下来
ease-in 加速  ease-out 减速    ease-in-out 先加速后减速
注意：我们一般将过渡属性加载盒子的本身上；
        过渡动画就是让摸一个动作是在一定的时间内完成；
logo的优化做法

01、一个div盒子class类名交logo，然后在里面嵌套一个h1,里面超链接a；

02、直接飞logo给固定的宽高，然后将h1里面a设置固定的大小和logo图片一样大；03、最后将背景图片给a，然后在a里面书写网站名称；

想要达到网站优化的效果超链接a里面的文字不需要显示，我们可以利用两种方法实现：

方法1：用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法

方法2: 直接给font-size: 0; 就看不到文字了。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2