俗话说,他山之石可以攻玉,我们自己建网站或者接单仿站时,有时候会需要仿制某些网站的某个页面模块效果,一般来说,网页元素都是DIV+CSS组成的,我们只要分别获取这两种代码基本就可以把效果仿个八九不离十。DIV代码很简单,但是很多时候css获取有些难度,今天就和大家分享一下如何快速复制网页的CSS代码。
一、用浏览器自带功能复制CSS代码
比如,使用Chrome浏览器——右键检查——DevTools。
1. 打开Chrome浏览器,进入你想要复制的网页。
2. 右击要抠取的元素,选择“检查”,打开DevTools。
3. 在右侧的样式面板中,选择要抠取的元素,并展开它的样式列表。
4. 选中要抠取的样式,使用鼠标右键复制,或直接使用CTRL+C复制。
5. 粘贴到你的CSS文件中。
二、使用CSS样式扩展工具
1. 浏览器安装CSS样式扩展插件,例如Paletton。
2. 打开Paletton,进入抠取模式。
3. 在网页中选中要抠取的元素,Paletton会自动提取出它的CSS样式。
4. 将提取出的CSS样式复制到你的CSS文件中。
三、使用在线获取CSS的网站
1. 访问CSS抠取工具网站,例如CSS3gen。
2. 在输入框中输入要抠取的元素选择器。
3. 点击“生成”,CSS3gen会自动生成该元素的CSS样式代码。
4. 将生成的CSS样式复制到你的CSS文件中。
四、获取现成的CSS代码效果
另外,有很多效果其实我们不用一点点的去复制,因为网上有一些在线CSS代码网站,收集了很多中炫酷的CSS效果,我们可以根据自己的需求直接使用就可以。例如:
1、https://animate.style/
如果你需要更复杂的动画,你会发现Animate非常有用,它有一个更成熟的用户界面,可以让你设置更多属性,也可以让你通过直观的时间线追随、停止或者重放动画。
它还包含了一些动画示例,比如“反弹”、“震动”、“摇摆”等,你可以把这些动画加载到生成器了,再根据需求来修改代码。
2、https://anijs.github.io/
AniJS是一个超级炫酷的JavaScript库,它支持为你的设计添加CSS3动画,并构建动画选项卡、折叠线、模态窗口、滑动菜单、移动端APP通知、滚动显示等复杂的UI组件。
它适用于包括iOS和Android在内的所有现代浏览器,不需要任何第三方库,此外它还拥有一个被称为AniCollection的展示窗,通过这个库你可以体验不同的效果。
3、https://codepen.io/