2019年10月29日
FCC---Learn How Bezier Curves Work---定义坐标轴点的值，影响斜率，改变速度。具体调试换值既可以体会
摘要： The last challenge introduced the animation-timing-function property and a few keywords that change the speed of an animation over its duration. CSS o 阅读全文
posted @ 2019-10-29 10:04 jane_panyiyun 阅读(213) 评论(0) 推荐(0)
FCC---Change Animation Timing with Keywords--两个小球从A都B，相同循环时间 duration, 不同的速度 speed
摘要： In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation. If the 阅读全文
posted @ 2019-10-29 09:46 jane_panyiyun 阅读(157) 评论(0) 推荐(0)
FCC---Animate Multiple Elements at Variable Rates---还可以改循环时间，达到不同律动频率的效果
摘要： In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules. You can achieve the 阅读全文
posted @ 2019-10-29 09:34 jane_panyiyun 阅读(161) 评论(0) 推荐(0)
FCC---Animate Elements at Variable Rates----一闪一闪亮晶晶，不同的闪动节奏
摘要： There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an animation-itera 阅读全文
posted @ 2019-10-29 09:28 jane_panyiyun 阅读(280) 评论(0) 推荐(0)
FCC---Make a CSS Heartbeat using an Infinite Animation Count----超级好看的心跳，粉色的
摘要： Here's one more continuous animation example with the animation-iteration-count property that uses the heart you designed in a previous challenge. The 阅读全文
posted @ 2019-10-29 09:22 jane_panyiyun 阅读(244) 评论(0) 推荐(0)
2019年10月25日
FCC---Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限，让小球一直跳动
摘要： The previous challenges covered how to use some of the animation properties and the @keyframes rule. Another animation property is the animation-itera 阅读全文
posted @ 2019-10-25 16:38 jane_panyiyun 阅读(241) 评论(0) 推荐(0)
FCC---Create Visual Direction by Fading an Element from Left to Right---一个带好看背景色的圆形图案，从左到右移动，透明度opacity渐变为0.1，背景色渐渐消失的效果
摘要： For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen. In the displaye 阅读全文
posted @ 2019-10-25 16:15 jane_panyiyun 阅读(311) 评论(0) 推荐(0)
FCC---Create Movement Using CSS Animation---设计一个盒子上下左右移动，结合animation, @keyframe, position (上下左右的offset)
摘要： When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation ru 阅读全文
posted @ 2019-10-25 16:05 jane_panyiyun 阅读(481) 评论(0) 推荐(0)
FCC---Use CSS Animation to Change the Hover State of a Button---鼠标移过，背景色变色，用0.5s的动画制作
摘要： You can use CSS @keyframes to change the color of a button in its hover state. Here's an example of changing the width of an image on hover: 如下是鼠标移过图片 阅读全文
posted @ 2019-10-25 15:34 jane_panyiyun 阅读(201) 评论(0) 推荐(0)
2019年10月22日
FCC---Create a More Complex Shape Using CSS and HTML---一个粉色爱心
摘要： One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to underst 阅读全文
posted @ 2019-10-22 21:59 jane_panyiyun 阅读(278) 评论(0) 推荐(0)