CSS综合练习

最新推荐文章于 2024-07-02 17:48:40 发布

流萤free

最新推荐文章于 2024-07-02 17:48:40 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_46331127/article/details/117695134

版权

这篇博客主要展示了两个CSS练习：一是创建一个小动画模型，二是进行Div+CSS的综合练习。作者分享了代码并鼓励读者亲自尝试运行，以帮助理解CSS的运用和提高技能。

摘要由CSDN通过智能技术生成

Div+css综合练习

一、css小动画
二、Div+css练习

一、css小动画

这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭

别的不说了，代码粘起来，希望可以帮到你！

 <style>
             #box1{
     
                 margin: 0 auto;
                 width: 500px;
                 height: 500px;
                 background-color:rgb(6, 192, 248);
                 /* position: absolute;
                 left: 200px; */
             }
             #box{
     
                 width: 100px;
                 height: 100px;
                
                background-color: red;
                animation-name: move;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                position: absolute;
                top:200px;
                }
                 @keyframes move
                 {
     
                  /* 初始状态 */
                0%{
     
                 transform: translate(0px,0px);
                 border-radius: 100%;
                }
                50%{
     
                transform: translate(200px,0x);
                border-radius: 0%;
                }
                /* 终止状态 */
                100%{
     
                transform: translate(400px,0px);
                background-color: rgb(216, 151, 12) ;
                border-radius: 100%;
                }
                }
         </style>
<body>
    <div id="box1">
        <div id="box"></div>
    </div>
    
</body>

运行结果图大概就是这样，但是ta是一个小小的动画，会动的哦！复制过去运行一下叭！！！
在这里插入图片描述

二、Div+css练习

回归正题，下面要为大家展示的是的一个css的综合练习。

来，author，把代码炸出来：

这个是HTML文件的代码：

<body>
	<div id="m-body">
    	<div id=

最低0.47元/天解锁文章

流萤free

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS综合练习

Div+css综合练习一、css小动画二、Div+css练习一、css小动画这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
复制链接

扫一扫