揭秘CSS实用技巧总结( 五 ) _CSS

background: radial-gradient(circle at top left, transparent 15px, blue 0) top left, radial-gradient(circle at top right, transparent 15px, cyan 0) top right, radial-gradient(circle at bottom right, transparent 15px, cyan 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, cyan 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;

文章插图

切角
饼图

关键实现：锥形渐变
具体分析：利用锥形渐变可以轻松实现多个扇区，所以 svg 的方法权当学习了一波 svg 用法吧。

background: conic-gradient(lightblue 30%, yellowgreen 0, yellowgreen 50%, cyan 0);

文章插图

饼图
动画animationanimation 属性是 animation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state属性的一个简写属性形式。

animation-name 指定动画的名称，可以逗号分割设置多个（以下皆可）；
animation-duration 指定动画运行的时间；
animation-delay 指定动画执行前的延时；
animation-timing-function 指定动画执行的速度函数，如linear、ease（默认）、ease-in-out等，也可用贝塞尔函数cubic-bezier()；
animation-iteration-count 指定动画的运行的次数，默认为1，可以为Infinite无限次；
animation-direction 指定动画是否反方向播放，normal 正常的顺序，alternate 交替运行，reverse 反向运行，alternate-reverse 反向交替运行；
animation-fill-mode 设置CSS动画在执行之前和之后的样式，none 不设置，forwards 保留最后一帧动画的样式，backwards 立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值，both 同时应用forwards和backwards的规则；
animation-play-state 定义一个动画是否运行或者暂停，值为running、paused 。

回弹效果如何给动画加上回弹效果呢？这里介绍一种最便利的方法：

关键实现：cubic-bezier(x1, y1, x2, y2)
具体分析：利用贝塞尔曲线的第二个控制锚点大于 1 时的特性实现回弹

文章插图

回弹效果
上图图横轴为时间，纵轴为动画进度。图中贝塞尔曲线有两个控制手柄，x1, y1 控制第一个锚点，x2, y2控制第二个锚点。其中 x1 、x2 不能大于/小于 1，但是y1, y2 可以。当 y2 大于 1 时，就会产生提前到达终点，然后超过终点，然后再返回终点的效果，像回弹一样。地址
animation: bounce 3s both cubic-bezier(.7, .1, .3, 2);transition 属性是 transition-property、transition-duration、
transition-timing-function、transition-delay的一个简写属性。使用 transition 同样可以实现回弹效果：地址

p {  transform-origin: 1.4em -.4em;  transition: transform .5s cubic-bezier(.25, .1, .3, 1.5);}input:not(:focus) + p {  transform: scale(0);  transition: transform 300ms; /*此处是为了缩小时重置transition-timing-function，不触发回弹*/}

文章插图

会动的背景

关键实现：animation、background-position
具体分析：将动画最后一帧的background-position设为100% 0%，动画便会将背景位置从最初的0% 0%向最后的100% 0%过度：地址

div {  width: 150px; height: 150px;  background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');  background-size: auto 100%;   animation: panoramic 10s linear infinite alternate;}div:hover {  animation-play-state: paused;}@keyframes panoramic {  to { background-position: 100% 0; }}

环形路径移动的动画