圆角,大家一定都会做,border-radius, 内凹圆角如何实现? 可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,就要改遮盖盒子的颜色,或者背景是渐变,改起来更麻烦,或背景是图片等等,就直接不太好改了,这种方法就有局限性。 说白了就是遮盖的那部分不透明以后,自适应性不强。 这里介绍一个用径向渐变实现的内凹圆角,可以解决上述问题。可以用CSS生成一个背景透明的内凹圆角。 1. 基本线性渐变 div { height: 100px; width: 200px; backgroun…

2017年03月29日 0条评论 57点热度 12人点赞 阅读全文

设计行业的发展非常迅速,每天都有新颖的创意网站更新,而HTML和CSS在方向上有一定局限。 CSS已经从内容布局方面走了很长的路。 它是用来精确控制文件的布局和媒体应用不同类型的布局。 现代web站点是为了提供各种类型的设计与用户交互。 在大多数情况下可以使用CSS3效果。 给设计师更多的灵活性和互操作性,CSS3是CSS提出的下一个主要版本。 下面给大家带来免费下载的HTML5+CSS3登陆表单 ,这可能方便您的设计项目或您自己的网站。 免费下载的HTML5+CSS3登陆表单 你可以找到大量的在线免费设计的东西。…

2015年10月06日 0条评论 111点热度 0人点赞 阅读全文

今天带给大家一篇自己翻译的文章,3个简单的hover动效效果,初次翻译有不对的地方大家多多见谅。 现代网络中,很多技术形式可以实现有趣的动效,但最简单优雅的通常是CSS,特别是新增加的CSS3。 过去,我们不得不依靠JavaScript实现动效,但由于跨浏览器支持CSS3不断地升级,现在我们可以不通过任何脚本实现。但是很悲催,仍然有浏览器(IE9以下)不支持CSS3,所有你需要一个旧版的浏览器或设置渐进性效果来解决兼容性问题。 今天我们来看一个炫酷的悬停效果--图片和文字标题的隐藏、显示切换动效。 如果你需要示例代…

2015年06月16日 0条评论 145点热度 1人点赞 阅读全文

世界上有很多Web设计师、前端人员喜欢到Codepen上展示他们的片段代码,有的代码的确强大而惊人,所以我们经常到这里获取一些小灵感是很不错的。 最近Codepen官网上发布了2014年Codepen上最热门的100个code&CSS片段代码,这些片段中有不少今人惊叹和创意的CSS和code,值得一看,下面我们来看看TOP10的片段有那几个吧: TOP 10: 摇摆的电灯 灯泡好像被微风吹动一样,左右摇摆,很写意。 预览效果 TOP 9: 纯CSS视差滚动 这是比较流行的特效,用纯CSS编写很厉害! 预览效…

2015年04月21日 0条评论 91点热度 0人点赞 阅读全文

作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。 动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。 迪士尼经过基础工作练习的长时间累积,在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于…

2015年04月03日 0条评论 56点热度 0人点赞 阅读全文

当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画。并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动: 感谢shirley帮忙录制上面的视频,虽然视频内容是手机上的显示效果,但是,这个“企业新年祝福活动”原本只针对桌面端,移动端是后来辅助增强(增加了相当于活动页面UV 5.7%的点击)。而目前大多数类似页面只针对移动端,例如其他同事实现的QQ空间5.0预约页第二版: 扫码(需登录)或者链接二选一: 访问demo戳这里 因此,需要…

2015年03月16日 0条评论 54点热度 0人点赞 阅读全文

悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现。今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样。 首先,来看下最终的效果: 它的 HTML 结构也很简单,但不是 Single Element:   <div class="spinner"><i></i></div> 外层元素 .spinner 负责显示底部的半透明圆环:   .spinner { font-size: 20px; wid…

2015年03月11日 0条评论 40点热度 0人点赞 阅读全文