请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
以下代码极其简单:仅一个css-doodle单元格,鲸鱼形状,用 :after 做眼睛。鲸鱼做曲线运动,实现的核心在 offset-path 和 offset-distance 属性的相关设置,是这两个属性令鲸鱼做不规则运动:
<css-doodle grid="1" click-to-update>
:doodle { @size: 600px 200px; }
@size: 100px;
@shape: whale;
background: rgb(50,100,200);
cursor: pointer;
:after {
content: '';
position: absolute;
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(black,snow);
}
offset-path: path('M80 80 Q 100 10, 145 80 T 500 60');
animation: move 6s forwards;
@keyframes move { to { offset-distance: 100%; } }
</css-doodle>
点击鲸鱼,它会从头开始执行关键帧动画。
|