每日挑战の棋盘错觉效果

最新推荐文章于 2021-03-05 09:17:59 发布

油炸果XnW

最新推荐文章于 2021-03-05 09:17:59 发布

阅读量242

点赞数

分类专栏：每日挑战学习

本文链接：https://blog.csdn.net/weixin_41223912/article/details/83104726

版权

每日挑战学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

每日挑战の棋盘错觉效果

内容摘要

在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016707813

最终效果预览：https://codepen.io/comehope/pen/VEyoGj（其实每一行都是平行的哦）
在这里插入图片描述

内容学习

这次学习的内容就比较少了，因为主要是黑白块的布局和动画效果的实现，黑白块使用一个渐变色实现的，如 repeating-linear-gradient(to right,black,black 10vmin,transparent 10vmin,transparent 20vmin); 这里vmin只得是vh和vw中最小的一个，这样才可以很好的适应窗口大小的变化，用repeating-linear-gradient实现重复的，黑白相间的背景。to right表示从-90°向-270°方向移动，用相同颜色截止实现不同的色块相间。动画还是用animation属性实现animation: move 5s linear infinite; 具体@keyframes如下@keyframes move { 0%,55%,100% { background-position: 0 0; } 5%,50%{ background-position: 5vmin 0; } } /*偶数行动画*/ .container span:nth-child(even){ animation: move 5s linear infinite reverse; }
用百分数来控制动画的效果进展，简单的控制背景位置就可以达到效果了。最后用 animation: move 5s linear infinite reverse;让偶数行做相反的动作。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>棋盘错觉动画</title>
    <style>
        /*<!--居中显示-->*/
        body{
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        /*定义容器大小*/
        .container{
            /*vmin为视窗中vh和vw中较小的一个*/
            width: 100vmin;
            height: 100vmin;
            display: flex;
            /*将元素垂直显示如同列一样*/
            flex-direction: column;
            border-bottom: 0.5vmin solid gray;
        }
        .container span{
            width: inherit;
            height: 10vmin;
            /*线性渐变 纵向灰色渐变 0.5vmin的时候用transparent截断*/
            background: linear-gradient(gray,gray 0.5vmin,transparent 0.5vmin,transparent),
            repeating-linear-gradient(to right,black,black 10vmin,transparent 10vmin,transparent 20vmin);
        }
        /*动画制作*/
        .container span:nth-child(odd){
            animation: move 5s linear infinite;
        }
        @keyframes move {
            0%,55%,100% {
                background-position: 0 0;
            }
            5%,50%{
                 background-position: 5vmin 0;
              }
        }
        /*偶数行动画*/
        .container span:nth-child(even){
            animation: move 5s linear infinite reverse;
        }
    </style>
</head>
<body>
    <div class="container">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

油炸果XnW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日挑战の棋盘错觉效果

每日挑战の棋盘错觉效果内容摘要内容学习代码内容摘要在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016707813最终效果预览：https://codepen.io/comehope/pen/VEyoGj（其实每一...
复制链接

扫一扫