Skip to content

Latest commit

 

History

History
249 lines (140 loc) · 7.14 KB

README.md

File metadata and controls

249 lines (140 loc) · 7.14 KB
Raw

我的文章

JavaScript Tween算法及缓动效果

CSS教程： CSS（上）

CSS教程： CSS (中)

CSS教程：CSS（下）

CSS教程： CSS（高级）

工具

邮件CSS支持速查 https://www.campaignmonitor.com/css/

RGB颜色参考速查 http://tool.oschina.net/commons?type=3

颜色深浅转换工具 https://pinetools.com/lighten-color

CSS3

各种CSS3的小玩意儿 (Widgets)

博客推荐

扩展阅读

css3制作图形大全

网页动画的十二原则

入门必读！迪士尼影响至今的十二条动画经典法则

过度效果vs动效

伪元素(pseudo-elements)动画

贝塞尔曲线在线调试工具

贝塞尔缓动函数库

常见效果

1、 实现内部虚线边框 https://codepen.io/AlexZ33/pen/BaBvbEr

  • 知识点：outline
.dash-border {
  outline: 1px dashed #fff;
  outline-offset: 1rem;
}

2、边框内圆角的实现

  • 知识点：box-shadow
.radius-border{
  width: 10rem;
  height: 2rem;
  border-radius: 3px;
  box-shadow: 0 0 0 10px gray;
}

3、 实现条纹背景与进度条

  • 知识点：linear-gradient,repeating-linear-gradient

/* 上 */
background: linear-gradient(to right,#fb3 50%,#58a 0);
background-size: 40px 100%;
box-shadow: inset 0 0 3px #555;

/* 中 */
background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 40px 40px;

/* 下 (可以实现任意角度的渐变，45°时显示效果最好) */
background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);

4、 半透明边框

  • 原理：利用background-clip:padding-box实现背景色不占用边框底部（默认情况下background-clip的初始值是border-box，这意味着当边框设置半透明色值时，显示的会是背景色叠加透明色的效果）

5、 多重边框

  • 原理：1、利用box-shadow可以创建任意数量的投影（实色即边框），但注意投影是不占用元素布局的。 2、利用outline实现双重边框

6、灵活背景定位

  • 原理：background-positioon:right 10px bottom 20px;指背景位置距离右边10px，距离底部20px.

/**
 * Flexible background positioning
 * via extended background-position
 */

div {
	background: url(http://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;
	background-position: right 20px bottom 10px;
	
	/* Styling */
	max-width: 10em;
	min-height: 5em;
	padding: 10px;
	color: white;
	font: 100%/1 sans-serif;
}

css3

css3_picshadow

CSS3+JS-Preview-Slideshow

S-Scattered-Polaroids-Gallery

css3实现漂亮ToolTips

css3实现网页平滑过渡效果

css3名片特效

名片特效链接

CSS3旋转照片墙

旋转照片墙链接

imooc JS+CSS3实现带预览图幻灯片效果

预览幻灯片链接

3d立方体

3d立方体链接

css3 实现3D轮播

css3 实现3D轮播灯片链接

css3+js 实现3D轮播

css3+js 实现3D轮播链接

骑行的马里奥

mario

购物车

basket

求婚动画

marriage-proposal

常见问题

1、页面某个模块的文字内容是动态的，可能是是几个字，也可能是一句话，然后希望文字少的时候居中显示，文字超过一行的时候居左显示，如何实现？


.box{
  text-align: center;
}

.content{
  display: inline-block;
  text-align: left;
}
  • 重点在于display，利用了元素的包裹性，除了inline-block元素，浮动元素以及绝对定位元素都具有包裹性，均有类似的智能宽度的行为

详解

动画

CSS3动画功能

  • transition 从一个属性值平滑的过度到另个属性值
transition: <过度属性名称> <过度时间> <过渡模式>

  • animation 支持关键帧技术 在网页上完成更加复杂的动画效果

<<<<<<< HEAD

======= 一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素等。当然，除了 JavaScript，还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、Transitions 和 Web Animation API。

85171b108770dc5e175b97823513cb9fe5bc0c06

参考

《css揭秘》 《css世界》 Web Fundamentals 动画