css学习
文章平均质量分 70
kk楷楷
天外来物
展开
-
CSS学习笔记——动画进阶(八音盒动画效果)
八音盒动画制作: 通过学到了CSS3动画以后,发现通过动画也是可以制作八音盒,话不多说,走起!Demo代码:HTML片段<body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div>原创 2021-05-18 21:19:53 · 457 阅读 · 0 评论 -
CSS学习笔记——动画animation初体验(小熊案例)
文章目录一、动画概念二、动画基本用法1.动画模板2.动画的使用3.小熊案例总结一、动画概念动画是CSS3的一个重要用法,动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画,您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。二、动画基本用法1.动画模板/* 动画代码,在style样式定义一个动画,名字为example */<style>@keyframes example {/* "from" 和 "to"原创 2021-05-14 23:33:50 · 442 阅读 · 0 评论 -
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一、什么是精灵图?二、精灵图的优点三、精灵图的基本用法1、打开ps导入精灵图2、测量字母的大小及坐标3、效果图4、代码实现总结一、什么是精灵图?所谓精灵图就是图片拼合技术,它就是把多张小图合成一张大图,通过css中的background-position属性,显示精灵图中某一个小图标。精灵图如下:二、精灵图的优点采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。在一定程度上减少了页面的加载速度,也一定程度上缓解了服务器的压力。使用精灵图可以有效减少服务原创 2021-05-06 11:00:57 · 25715 阅读 · 0 评论