大家小时候有没有玩过丢沙包的游戏呢，丢沙包其中的一个玩法是绕着圈跑，一直跑到最中心位置，在跑出来，今天就来模拟一个类似的场景。

进击的青豆

一个青豆绕着圈跑，一直跑到中心点。

结构

一个元素就完成了，如下：

<div class="container"></div>

样式

首先，我们要利用背景色径向渐变和重复的特性来画出跑道，跑道有25个点，每次移动一个位置，当然如果你想添加更多的点也是可以的，但是青豆的运动动画也要发生变化，如下：

.container {--size: 10rem;width: var(--size);height: var(--size);background: radial-gradient(cyan, transparent 20%);--grid:calc(var(--size) * 0.2);background-size: var(--grid) var(--grid);position: relative;
}

然后，我们要利用伪元素before来画出青豆的效果，跟跑道点的大小是一样的，然后给个稍微大点的径向渐变，如下：

.container::before{content: '';width: var(--grid);height: var(--grid);background: radial-gradient(cyan,rgb(9, 81, 129) 40%,transparent 50%);position: absolute;animation: _animate 8s linear infinite;
}

最后，我们需要给青豆加上动画，青豆的运动轨迹是需要计算的，我们按照移动一次花费总时间的2%来计算，如下：

.container::before{animation: _animate 8s linear infinite;
}@keyframes _animate {0% {left: 0;top: 0;}8%{left:calc(var(--grid) * 4) ;top: 0;}16%{left:calc(var(--grid) * 4) ;top: calc(var(--grid) * 4) ;}24%{left:0;top: calc(var(--grid) * 4) ;}30%{left:0;top: calc(var(--grid) * 1) ;}36%{left:calc(var(--grid) * 3);top: calc(var(--grid) * 1) ;}40%{left:calc(var(--grid) * 3);top: calc(var(--grid) * 3) ;}44%{left:calc(var(--grid) * 1);top: calc(var(--grid) * 3) ;}46%{left:calc(var(--grid) * 1);top: calc(var(--grid) * 2) ;}48%{left:calc(var(--grid) * 2);top: calc(var(--grid) * 2) ;box-shadow: none}50%{box-shadow: 0 0 1rem cyan inset;}
}

效果

效果及其代码详情，如下：代码片段

总结

我们利用背景色重复的特效可以做成很多有趣的效果，它可以帮我们省去很多其他的操作。

巧用CSS3之进击的青豆相关推荐

巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
html中边框倒影怎么弄,巧用css3的-webkit-box-reflect 倒影属性实现各种特效
-webkit-box-reflect 是一个非常有意思的属性,它让 CSS 有能力像镜子一样,反射我们元素原本绘制的内容. 接下来我带大家利用-webkit-box-reflect这个属性巧妙的实现 ...
php伪类,CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
css右箭头,css3 伪类实现右箭头→
css3 实现右箭头→ Document .divtest{ position: absolute; top: 100px; left: 100px; height: 3px; width: 10px ...
巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
网页上点击java没反应_JavaScript_javascript:void(0)点击登录没反应怎么解决，巧用批处理解决IE不支持JavaScri - phpStudy...
javascript:void(0)点击登录没反应怎么解决巧用批处理解决IE不支持JavaScript等问题 rem =====批处理开始======== regsvr32 actxprxy.dll ...
html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...

巧用CSS3之进击的青豆

进击的青豆

结构

样式

效果

总结

巧用CSS3之进击的青豆相关推荐

最新文章

热门文章