CSS3
天南韩立
这个作者很懒,什么都没留下…
展开
-
CSS3实现三角小图标
CSS3的transform可以实现页面元素的扭转、变形等功能。实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片。原创 2016-05-30 09:31:46 · 7468 阅读 · 0 评论 -
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。原创 2016-05-30 10:05:59 · 256829 阅读 · 17 评论 -
CSS3实现头像旋转功能
CSS3中的transform:rotate()可以实现旋转功能,效果如下图所示:原创 2016-05-30 10:53:31 · 8217 阅读 · 1 评论 -
HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)
微信中推送的信息中有一种图文搭配的方式,即一张图片的下半部分有段阴影遮罩层,这个遮罩层上还有文字。 将微信的截图效果如下:其中background-color: rgba(0, 0, 0, .50);中的0.50表示这个矩形遮罩的透明度。其它的就很简单了,就是相对定位搭配绝对定位。实现的效果图如下:原创 2016-07-18 16:46:34 · 9699 阅读 · 3 评论