会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132468个问题

<style>

        .alldiv {

            positionrelative;

            left300px;

            top200px;

            animation1s tiaodong infinite;

        }

        

        .a {

            width200px;

            height200px;

            background-colorred;

            floatleft;

            box-shadow0px 0px 70px red;

            

        }

        

        .a1 {

            transformrotate(45deg);

            positionrelative;

            left325px;

            top75px;

        }

        

        .a2 {

            border-radius100px;

            positionrelative;

            left50px;

        }

        

        .a3 {

            border-radius100px;

        }

        

        @keyframes tiaodong {

            0% {

                transformscale(1)

            }

            50% {

                transformscale(1.2);

            }

            100% {

                transformscale(1);

            }

        }

    </style>

</head>


<body>

    <div class="alldiv">

        <div class="a a1"></div>

        <div class="a a2"></div>

        <div class="a a3"></div>

    </div>

</body>

91c07a114d12dc9be6d4f88af92385a4.mp4

老师我这个用一个大的div标签去包裹主其他三个小的div为什么出来的跳动效果是这样的

Python 全系列/第七阶段:网页编程基础/CSS 样式 34996楼
JAVA 全系列/第三阶段:数据库编程/JDBC技术 34997楼

老师,我这代码运行了 动画效果显示不出来



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.cen{

width:200px;

height:200px;

background-color:#d5093c ;

/*阴影   水平方向偏移  垂直方向偏移  模糊度   阴影的颜色*/

box-shadow: 0px 0px  70px #D5093C;

/*执行动画的调用*/

animation:1s aj ;

}

.lef{

/*倒圆角指令*/

border-radius:100px ;

/*左上右下  右上左下*/

/*border-radius:10px  60px ;*/

/*border-radius:10px 20px 30px 40px ;*/

position:absolute;

top:200px;

left:200px;

}

.rig{

border-radius: 100px;

position:absolute;

top:200px;

left:341px;

}

.c{

/*旋转角度*/

transform: rotate(45deg);

position:absolute;

top:269px;

left:271px;

}

/*div:hover{

/*放大的倍数*/

/*transform: scale(1.3);*/

/*X:水平的位移    Y:垂直的位移      负数:上*/

/* transfrom:translate(0px,-5px);*/

/*2D角度的旋转*/

/*transform:skew(40deg,45deg);*/

/*CSS3中的动画*/

@keyframes aj{

0%{transform: scale(1) rotate(45deg);}

50%{transform: scale(1.1) rotate(45deg);}

100%{transform: scale(1) rotate(45deg);}

</style>

</head>

<body>

<div   class="cen lef"></div>

<div   class="cen c"></div>

<div   class="cen rig"></div>

</body>

</html>

<!--

CSS3中常用的属性

/*倒圆角指令*/

border-radius:100px ;

/*左上右下  右上左下*/

/*border-radius:10px  60px ;*/

/*border-radius:10px 20px 30px 40px ;*/

/*旋转角度*/

transform: rotate(45deg);

/*放大的倍数*/

/*transform: scale(1.3);*/

/*X:水平的位移    Y:垂直的位移      负数:上*/

/* transfrom:translate(0px,-5px);*/

/*2D角度的旋转*/

/*阴影   水平方向偏移  垂直方向偏移  模糊度   阴影的颜色*/

box-shadow: 0px 0px  70px #D5093C;

-->


JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 35000楼
JAVA 全系列/第十八阶段:亿级高并发电商项目/亿级高并发电商项目(旧) 35001楼

image.png


JAVA 全系列/第二阶段:JAVA 基础深化和提高/IO流技术 35004楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器 35005楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 35006楼
Python 全系列/第一阶段:Python入门/函数和内存分析 35008楼
Python 全系列/第二阶段:Python 深入与提高/异常机制 35009楼
JAVA 全系列/第三阶段:数据库编程/MySQL数据库的使用 35010楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637