CSS实现动态效果+小实例

最新推荐文章于 2026-05-05 09:25:43 发布
原创 最新推荐文章于 2026-05-05 09:25:43 发布 · 3.6k 阅读 · 21 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html #css #css3
本文介绍了CSS3实现动态效果的各种技巧，包括`html,body{height:100%}`与`body{height:100%}`的区别、`perspective`视距的概念、元素居中方法、`transform-style`属性、`transform`变换方法、`Animation`动画属性和`@keyframes`关键帧、`:nth-child()`选择器的用法，以及`box-shadow`边框阴影的设置。通过实例解析，帮助读者理解和掌握CSS3在创建动态效果中的应用。" 86500998,5738192,Koa-bodyparser详解：从二进制到解析请求体,"['JavaScript', 'NodeJS', 'HTTP', '中间件', '数据解析']

------------------html,body{height:100%;} 与 body{height:100%;}的区别：

body以html标签为高度参照，所以仅仅body 100%，并不能使它的子div100% 占据整个屏幕；

 html 100%使得html标签以页面窗口为参照，能使它的子div100% 占据整个屏幕；
 

------------------perspective

perspective-视距：用来设置用户与3d元素空间Z平面之间的距离

- perspective值越小，用户与3D空间z平面距离越近，3d元素看起来越大

- perspective值越大，用户与3D空间z平面距离越远，3d元素看起来越小

          详细参考：css3 视距-perspective - Qboooogle - 博客园

------------------实现标签居中

.conte{
    position:absolute;
    top:0;
    left:0;
    rightL0;
    bottom:0;
    margin:auto;
}

------------------transform-style：定义元素的2D/3D效果

transform-style属性指定元素如何在空间中呈现，有两个属性值：flat/ preserve-3d

        - flat 为默认属性值，表示元素在空间中以2D呈现

        - preserve-3d 则表示元素在空间中以3D呈现

------------------transform：实现元素的运动效果

transform

        transform属性使元素发生变化，主要有一下属性值：

                - 旋转： rotate

                - 扭曲 ：skew

                - 缩放 ：scale

                - 移动 ：translate

                - 矩阵变形： matrix

        transform属性用法：         

                 transform ： none /  <transform-function> 空格 <transform-function>

                        - none表示无变化；

                        - <transform-function>表示单个或多个变化操作，多个时属性值用空格隔开；

        transform属性值用法：

                - rotate(<angle>) 

                         rotate(<angle>) ：使元素进行指定角度的2D旋转

                         rotateX(<angle>) ：使元素在X轴上进行2D旋转

                         rotateY(<angle>) ：使元素在Y轴上进行2D旋转

Animation

        动画属性

                - animation-delay > 定义动画开始之前的延迟

                - animation-name > 定义需要绑定到Animation选择器的 keyframe 名称

                - animation-direction>定义是否轮流反向播放动画

                - animation-duration > 定义完成动画所花费的时间

                - animation-timing-function > 定义动画的速度曲线

                - animation-iteration-count> 定义动画循环次数

        定义动画

        animation + @keyframes(关键帧)

                - animation定义的属性值  <对应>  关键帧施加对象

                - 一般变化时使用关键字“from” 和 “to” ，详细(指定)变化时使用 “%” ；

                        “from，to” ==“0%, 100%”

                - 循环次数属性值 “infinite” 可以直接在animation里定义，效果与

                         “animation-iteration-count:infinite;” 相同

.ball{
    height:200px;
    width:200px;
    animation:rotate 30s linear;      //animation定义rotate，时间30s，方式(轨迹)linear
    animation-iteration-count:infinite;  //效果循环次数定义为无限
    transform-style:preserve-3d;         //3D显示
}

----------animation:rotate 30s linear infinite;
                //#animation定义rotate，时间30s，方式(轨迹)linear，效果循环次数定义为无限


关键帧定义方式1：
@keyframes rotate{                                     //对rotate施加关键帧
    0%{transform:rotatey(0deg) rotatex(0deg);}         //定义0%时状态
    100%{transform:rotatey(360deg) rotatex(360deg);}   //定义100%时状态
}

关键帧定义方式2：
@keyframes rotate{                                     //对rotate施加关键帧
    from{transform:rotatey(0deg) rotatex(0deg);}       //定义0%时状态
    50%{transform:rotatey(180deg) rotatex(180deg);}    //定义50%时状态
    to{transform:rotatey(360deg) rotatex(360deg);}     //定义100%时状态
}

CSS3 :nth-child() 选择器

        CSS选择器 :nth-child(n)  >选择器会找到其自身的父类，匹配父元素中的第 n 个兄弟元素，元素类型没有限制，且 n 可以是数字、关键字、或公式；

.ball .borderline{
    border:1px solid #ff0;
    height:100%;
    width:100%;
    border-radius:50%;
}
.ball .borderline:nth-child(1){        //获取.borderline的父类下兄弟子类的第一个对象
    transform:rotatey(0deg);           //绕y轴转0
}

box-shadow添加边框阴影

        box-shadow > 向框添加一个或者多个阴影；

        语法：box-shadow: offset-x offset-y blur spread color inset

                - box-shadow: x轴偏移量 Y轴偏移量 阴影模糊半径 阴影半径 颜色  外部阴影/内部阴影                - 当需要设置多个阴影时，中间需要将每个阴影用逗号隔开

box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5) 
//右移10  下移10  模糊程度20  阴影半径10 浅黄色
//左移10  下移10  模糊程度10  阴影半径10 白色

                - 参数要求：

                        - offset-x：参数必须，取值：+/-

                        - offset-y：参数必须，取值：+/-

                        - blur：可选，取正值，0即无模糊效果，值越大阴影边缘越模糊

                        - spread：可选，取值：+/- ，正值则阴影扩大，负值阴影缩小。

                       - color：可选，如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。

                        - color：可选，外部投影/内部投影

-----eg：行星自转及绕太阳自转+星空效果

pycharm代码：

        HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="test.css" rel="stylesheet"/>
    <link href="t1.css" rel="stylesheet"/>
</head>
<body>
    <div class="box conter">
        <div class="ball conter sun">
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
            <div class="borderline conter"></div>
        </div>
        <div class="ball_path_1 conter">
            <div class="ball conter">
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
            </div>
        </div>
        <div class="ball_path_2 conter">
            <div class="ball conter">
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
            </div>
        </div>
        <div class="ball_path_3 conter">
            <div class="ball conter">
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
                <div class="borderline conter"></div>
            </div>
        </div>
    </div>
    <div class="all_star">
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
    </div>
</body>
</html>

        test.css：

html,body{
    height:100%;
}
body{
    perspective:500px;
    background:#000;
}
.conter{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
}
.box{
   // border:1px solid #fff;
    height:500px;
    width:500px;
    transform-style:preserve-3d;
    transform:rotatex(65deg);
}
.ball{
    height:200px;
    width:200px;
    animation:rotate 30s linear infinite;
  //  animation-iteration-count:infinite;
    transform-style:preserve-3d;
}
.ball .borderline{
    border:1px solid #ff0;
    height:100%;
    width:100%;
    border-radius:50%;
}
.ball .borderline:nth-child(1){
    transform:rotatey(0deg);
}
.ball .borderline:nth-child(2){
    transform:rotatey(30deg);
}
.ball .borderline:nth-child(3){
    transform:rotatey(60deg);
}
.ball .borderline:nth-child(4){
    transform:rotatey(90deg);
}
.ball .borderline:nth-child(5){
    transform:rotatey(120deg);
}
.ball .borderline:nth-child(6){
    transform:rotatey(150deg);
}

.ball .borderline:nth-child(7){
    transform:rotatex(0deg);
}
.ball .borderline:nth-child(8){
    transform:rotatex(30deg);
}
.ball .borderline:nth-child(9){
    transform:rotatex(60deg);
}
.ball .borderline:nth-child(10){
    transform:rotatex(90deg);
}
.ball .borderline:nth-child(11){
    transform:rotatex(120deg);
}
.ball .borderline:nth-child(12){
    transform:rotatex(150deg);
}


.sun .borderline{
    box-shadow:0px 0px 20px 5px #ff0;
}


.ball_path_1{
    height:300px;
    width:300px;
    border:2px solid #ccc;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:rotatez 10s linear infinite;
   // animation-iteration-count:infinite;
}
.ball_path_1 .ball{
    width:30px;
    height:30px;
    left:94%;
}
.ball_path_1 .ball .borderline{
    border:1px solid #0ff;
}


.ball_path_2{
    height:450px;
    width:450px;
    border:3px solid #ccc;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:rotatex 20s linear infinite;
}
.ball_path_2 .ball{
    width:60px;
    height:60px;
    left:93%;
}
.ball_path_2 .ball .borderline{
    border:1px solid #85ff00;
}


.ball_path_3{
    height:600px;
    width:600px;
    margin-left:-50px;
    margin-top:-50px;
    border:3px solid #ccc;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:rotatey 50s linear infinite;
}
.ball_path_3 .ball{
    width:90px;
    height:90px;
    left:93%;
}
.ball_path_3 .ball .borderline{
    border:1px solid #b400ff;
}


@keyframes rotate{
    0%{transform:rotatey(0deg) rotatex(0deg);}
    100%{transform:rotatey(360deg) rotatex(360deg);}
}
@keyframes rotatex{
    from{transform:rotatez(0deg)}
    to{transform:rotatez(360deg)}
}
@keyframes rotatey{
    from{transform:rotatez(0deg)}
    to{transform:rotatez(360deg)}
}
@keyframes rotatez{
    from{transform:rotatez(0deg)}
    to{transform:rotatez(360deg)}
}

        t1.css：

html,body{
    height:100%;
}
body{
    perspective:800px;
    background:#000;
}

.star{
    width:10px;
    height:10px;
    position:absolute;
    background:#fff;
    border-radius:50%;
    animation:translate 3s linear infinite;
    transform:translateZ(0px) scale(0);
}
.star:nth-child(1){
    top:25%;
    left:60%;
    animation-delay:2s;
}
.star:nth-child(2){
    top:39%;
    left:30%;
    animation-delay:5s;
}
.star:nth-child(3){
    top:77%;
    left:40%;
    animation-delay:3s;
}
.star:nth-child(4){
    top:55%;
    left:25%;
    animation-delay:4s;
}
.star:nth-child(5){
    top:26%;
    left:62%;
    animation-delay:7s;
}
.star:nth-child(6){
    top:43%;
    left:53%;
    animation-delay:1s;
}
.star:nth-child(7){
    top:24%;
    left:56%;
    animation-delay:3s;
}
.star:nth-child(8){
    top:83%;
    left:40%;
    animation-delay:0.5s;
}
.star:nth-child(9){
    top:10%;
    left:50%;
    animation-delay:2s;
}
.star:nth-child(10){
    top:25%;
    left:20%;
    animation-delay:5s;
}

@keyframes translate{
    0%{transform:translateZ(0px) scale(0);}
    100%{transform:translateZ(1000px) scale(1);}
}

杯似坛酒
关注
使用css3实现动态效果
06-10
制作一个网页（1-2个页面即可），内容自定义（例如你最欢的书籍，照片，动植物，食物，商品，旅游景区或者偶像等）： 1.需要对网页进行设计，可以使用传统的div+css设计，里面的元素可以使用position定位，或者float定位，或者flex布局。 2.需要使用css3中的至少两种效果，并且用到css3的地方请注释，例如阴影效果，动画效果，2D转换，3D转换，css3过渡等等。 3.要求css样式写在head的style里，或者新建一个css文件写在里面。图片放在单独建立的文件夹下。 4.可以使用框架，框架类型不限。
CSS3动画功能：创意设计和动态展示的魔力
WbhsOcaml的博客
09-30 159
CSS3是一种用于网页设计的样式表语言，它引入了许多强大的功能，其中包括令人惊叹的动画效果。无论是创建平滑的过渡动画、定义复杂的关键帧动画，还是调整动画属性以控制动画行为，CSS3提供了丰富的工具和选项来实现各种想象力的发挥。关键帧动画是CSS3动画功能中更为高级高级的形式，它允许设计师在动画的不同阶段定义关键帧，从而实现更复杂的动画效果。通过灵活运用这些功能，你可以为你的网页设计增添生动、有趣的动态元素，提升用户体验，实现创意设计的目标。，这将在1秒的时间内播放动画，并使元素保持在动画结束时的状态。
CSS3实现5个常用的网页动画效果，web项目二次开发
ccc6553584的博客
04-09 2225
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
transition.css实战案例：10个创意动画效果让你的网站脱颖而出
最新发布
gitblog_00893的博客
05-05 287
transition.css是一个轻量级的CSS过渡动画库，能够帮助开发者轻松实现各种精美的页面过渡效果。无需复杂的JavaScript代码，只需简单引入CSS文件并添加相应的类名，即可为网站元素添加流畅的动画效果，提升用户体验。 ## 一、快速开始：transition.css的安装与基础使用 ### 1.1 一键安装步骤 要开始使用transition.css，首先需要将项目克隆到本地：
动态设置css
weixin_45143856的博客
11-17 7089
动态设置css 的方法
CSS几种常见的文字动态效果
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-29 1万+
不啰嗦了,酷酷的字体，希望能够帮助到那个你！
用CSS在网站底部加上蒲公英动态效果的实现方法
姜成SEO
06-26 2064
　　在做网站的时候我们经常想要实现一些动态效果来为网站增添一点活力，而通常情况下，实现动态效果都需要用到JS代码。JS能够实现比较复杂且炫酷的动态效果，但通常情况下JS会拖慢网站的响应速度且不利于搜索引擎优化。怎么做的既有动态效果又利于搜索引擎SEO优化呢？今天姜成seo给大家推荐一个用CSS实现的蒲公英动态效果。下面是完整代码，将代码加到网站底部模版文件(一般为foot.htm)里即可实现效果，...
CSS实现图像旋转动态效果
沛竹君的博客
04-11 2万+
CSS实现图像旋转动态效果 首先，应向需要设置旋转的div的css样式中添加如下代码： 例如向一个名为img01的类选择器添加旋转样式，在animation属性内设置，旋转动画，rotate为动画名（自定义的名称），6s为周期，linear为线性渐变（取消渐变效果），infinite为无限循环，即每轮动画结束后自动进入下一轮，实现无限旋转效果。 .img01{ display:...
css 制作有趣、简单的动态效果
Czhenjin的博客
04-12 1025
简单的scc动态效果 可以娱乐 、整人、搞点小浪漫的都行。 我这里列举的是我从逼站上看的一个视频学的想法，稍稍改装了一下发给朋友搞了个不是很浪漫的浪漫昂。自己理解了，并学习了一下发出来分享给大家。 这个动态效果中我们需要掌握 nth-child、@keyframes、animation的相关知识。 nth-child 我们写CSS样式时我们想给某一行写样式时可以这样nth-child（某一行）...
CSS动画效果
weixin_53912712的博客
07-09 2443
过渡、动画】变形平移、旋转
CSS3网页常见动态效果……
happy81997的博客
02-23 3568
CSS3网页常见动态效果…… 目录 CSS3网页常见动态效果…… 一、动态背景变色，且有晃动效果 二、输入框伸缩 三、按钮旁边，动态的提示 四、文字环绕效果 一、动态背景变色，且有晃动效果 html代码： <span class="shake">弹</span> CSS代码： .shake{ width:40px; height:40px; display:block; background:lightgreen;
动态页面（css实现）
qq_52030218的博客
09-05 1469
第二层 (`layer2`): 包含两个子元素，这些子元素水平排列，布局为两列，每列占据容器的 50% 宽度（减去间距），高度也是根据 JavaScript 计算的。- `.a1`、`.a2`、`.a3`、`.a4`: 这些类代表层次中的子元素，设置了圆角边框、阴影效果和渐变背景。- 在较宽的屏幕上，`.layer1` 显示四个均匀分布的元素，`.layer2` 显示两个并排的元素，`.layer3` 显示一个单独的元素。- 在 `.layer3` 中，单个元素的宽度占据容器的全部宽度减去间距。
CSS 动画效果（5种） - 附完整示例
m0_48968874的博客
02-17 8232
CSS动画（CSS Animations）可以使网页元素呈现平滑的动态效果。通过使用@keyframes规则和CSS的animation属性，你可以定义复杂的动画效果。
css样式总结，持续更新
BMG-Princess
05-11 2138
状态驱动的动态 CSS 内核浏览器私有属性 el-tree中更改鼠标移动时、点击时和失去焦点时的背景色 关于背景色 表格 去掉定位： 换行总结 三元表达式 根据渐变的两个色值+据百分比，取对应的色值。...
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 5万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
css动态样式的几种常见写法
qq_62923382的博客
08-12 4775
这样可以根据组件的状态、属性或计算逻辑来动态生成样式，从而实现样式的动态变化。在 vue项目开发中，你有多种方式来创建动态样式，具体取决于你的需求和偏好。你可以根据组件的状态、属性或计算属性来生成动态样式，使你的 UI 更加灵活和交互式。你可以使用 v-bind 或简写的 : 来绑定样式属性，使其与组件的数据或计算属性相关联。使用 `:class` 或简写的 `:` 来绑定类名，然后在对象中定义类名和条件。在这个示例中，buttonStyle 计算属性根据 clicked 数据的状态来生成动态样式。
使用CSS3动画做了四个小案例
weixin_64965154的博客
05-14 2041
box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-然后我们可以来设置她的高可以使用vh，(是指可视窗口的高度。3. Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边。
HTML+CSS前端简单卡片动态效果
hexuhui0920的博客
01-16 3171
HTML+CSS前端简单卡片动态效果
前端Vue日常工作中--动态css类
前端工作学习中
12-06 4360
Vue.js 允许你在动态地设置 CSS 类、样式等方面非常灵活。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值