用一个div+伪类画太极+动画

最新推荐文章于 2023-05-15 11:54:53 发布

立立立果

最新推荐文章于 2023-05-15 11:54:53 发布

阅读量221

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44926748/article/details/118369459

版权

首先我们需要定义一个画出一个圆，然后需要对div进行样式修饰，线性渐变从白到黑

 #taiji {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin: -100px 0 0 -100px;
            background: linear-gradient(0deg, black 50%, white 50%);
            border-radius: 50%;
            border:1px black solid;
        }

如图所示

接下来我们需要分别对伪类进行样式的修改，大概思路伪类前后我们都画一个圆让它border为45px距离顶部为25%的高度宽高都为50%，content为""，不为空字符串无法修改，代码如下

   #taiji:before, #taiji:after {
            content: "";
            display: block;
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            border-radius: 50%;
            border: 45px solid transparent;
        }

再接下来分别对伪类进行左右定位，设置黑白颜色，border-color也设置黑白

   #taiji:before {
            left: 0;
            border-color: black;
            background-color: white;
        }
        #taiji:after {
            right: 0;
            border-color: white;
            background-color: black;
        }

这样我们太极就画出来了

接下来我们给太极加一些动画，例如我们hover之后让太极变大2倍，并且旋转360°，并且无限循环，要实现的画我们需要先定义一个动画，代码如下

   @keyframes taiji {
            from{
                transform: rotate(0deg) scale(1);
            }
            to{
                transform: rotate(360deg) scale(2);
            }
        }

然后在hover事件之后触发这个动画

#taiji:hover {
            animation: taiji 1s ease 0s infinite; //第一个为动画名称（animation-name），第二个为时间（animation-duration），第三个是运动曲线（animation-timing-function），第四个为定义过渡效果何时开始（animation-delay）。第五个为规定动画应该播放的次数（animation-iteration-count）。第六个为规定是否应该轮流反向播放动画（animation-direction）。
        }

这样我们事件效果就完成了，如果你还要定义一些其他的，比如旋转，倾斜，放大也是可以实现的代码如图

   @keyframes taijiPic {
            form{
                transform: rotateX(0deg)（定义沿着 X 轴的 3D 旋转。） rotateY(30deg) rotateZ(60deg) skew(10deg,20deg) (定义沿着 X 和 Y 轴的 2D 倾斜转换。);
                opacity: 0  (透明度)
            }
            to{
                transform: rotateX(360deg) rotateY(390deg) rotateZ(420deg) skew(30deg,40deg);
                opacity: 1
            }
        }

然后在div上定义animation就行啦

      #taiji {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin: -100px 0 0 -100px;
            background: linear-gradient(0deg, black 50%, white 50%);
            border-radius: 50%;
            border:1px black solid;
            animation: taijiPic 5s ease-in infinite alternate;
        }

最后完整代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>太极</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div, :before, :after {
            box-sizing: border-box;
        }
        #taiji {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin: -100px 0 0 -100px;
            background: linear-gradient(0deg, black 50%, white 50%);
            border-radius: 50%;
            border:1px black solid;
            animation: taijiPic 5s ease-in infinite alternate;
        }
        /*@keyframes taiji {*/
            /*from{*/
                /*transform: rotate(0deg) scale(1);*/
            /*}*/
            /*to{*/
                /*transform: rotate(360deg) scale(2);*/
            /*}*/
        /*}*/
        /*#taiji:hover {*/
            /*animation: taiji 1s ease 0s infinite;*/
        /*}*/
        @keyframes taijiPic {
            form{
                transform: rotateX(0deg) rotateY(30deg) rotateZ(60deg) skew(10deg,20deg);
                opacity: 0
            }
            to{
                transform: rotateX(360deg) rotateY(390deg) rotateZ(420deg) skew(30deg,40deg);
                opacity: 1
            }
        }
        #taiji:before, #taiji:after {
            content: "";
            display: block;
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            border-radius: 50%;
            border: 45px solid transparent;
        }
        #taiji:before {
            left: 0;
            border-color: black;
            background-color: white;
        }
        #taiji:after {
            right: 0;
            border-color: white;
            background-color: black;
        }
    </style>
</head>
<body>
<div id="taiji"></div>
</body>
</html>