󰅡收起

艾码汇

互联网营销设计、运营推广进阶笔记

Vultr VPS

CSS 专题

CSS内容由【艾码汇】整理CSS相关优秀文章聚合阅读,学习CSS知识。

19
十二月

CSS3 实现 Loading(加载)动画效果

󰁦CSS3 实现 Loading(加载)动画效果已关闭评论

看到不少 App 下拉刷新时,都有加载动画,于是,也想给微信小程序加一个动画特效。正好,这里有不少纯 CSS3 实现的动画效果。Loading 动画效果HTML代码<div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></d阅读全文...

25
十月

知更鸟 Begin 主题友情链接 CSS 缩放

󰁦知更鸟 Begin 主题友情链接 CSS 缩放已关闭评论
󰁠,

如何通过 CSS 实现像知更鸟 Begin 主题的友情链接缩放?可以使用 CSS 样式里的 transform 属性来实现缩放。CSS3 transform 属性介绍旋转 div 元素实例:code>div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); 阅读全文...

12
十月

Table 自适应样式 HTML 响应式表格(Responsive Table)

󰁦Table 自适应样式 HTML 响应式表格(Responsive Table)已关闭评论

简单自适应表格简单自适应 Table ,通过给表格的外面加了一个 .table-container 的标签。 CSS 样式如下:.table-container{width: 100%;overflow-y: auto;_overflow: auto;margin: 0 0 1em;}table{border:0; border-collapse:collapse;}table td,table th{border:1px solid #999; padding:.5em 1em}//添阅读全文...

下载插件Github 项目地址:https://github.com/isagalaev/highlight.js下载 highlight.pack.js 文件以及相应的 css 样式集成主题头部 head 加载 JQuery 文件及 HighlightJS 相关文件<script src='<?php echo get_stylesheet_directory_uri(); ?>/highlight/highlight.pack.js' type='text/javascript'><阅读全文...

CSS3已经变得非常流行,原本的CSS不支持自定义字体,但是传说中的CSS3基本上什么都可以,那么CSS3中可不可以自定义英文字体呢?语法规则@font-face {  font-family: 自定义的字体名称;  src: 自定义的字体的存放路径;  font-weight: normal;是否为粗体  font-style: normal;定义字体样式,如斜体}阅读全文...

圆形CSS代码如下:#circle { width: 100px; height: 100px; background: #f60; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }最终效果如下 椭圆CSS代码如下:#oval { width: 200px; height: 100px; backg阅读全文...

微信头条网站:微态势(www.weitimes.com)要求改版之后,中间尝试了许多版本规划,仿搜狗微信头条,又想要不同的,而且搜狗微信头条根本就不是响应式,其有自已民的APP和移动端。不想仿搜狗微信头条了,又考虑参照站长之家的,改变一些格局。在这尝试的过程中,每次完成50%-80%左右就毙掉了,真的是很郁闷。在此期间,甚至有想法说要阅读全文...

手机网站的北景用的是图片,显示的效果总是有点模糊,于是考虑能不能让CSS实现蓝天白云,经过搜索之后,找到一个不错的特效,虽然不是全CSS实现的,但是使用CSS3特效,再加上图片的锯齿相对减少,于是果断的收藏下来。CSS代码如下:.sky { height: 480px; background: #007fd5; position: relative; overflow阅读全文...

很多网站都有顶部导航栏或是头部导航栏在网页下拉滚动过程中,高度变小的效果。实现方法,可以利用 JQuery 监控滚动条的位置变化,然后添加 CSS 样式或者删除 CSS 样式。实现方法:1、调用 JQuery<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>2、HTML代码<div c阅读全文...

很多前端交互都使用JavaScript实现,但是,其实有些交互的实现,是完全可以放弃JavaScript,使用CSS实现交互。下面是仅仅使用几行 CSS 创建的一些组件就可以实现原来使用JavaScript的前端交互。1. TooltipsTooltips 对于展示一些信息非常有用,并且不需要什么用户体验。目前有很多 JavaScript 插件实现了这个功能,但是如果你不想阅读全文...