CSS动画--页面特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:6192

css css3 动画
{}
本章内容\n2D、3D转换\n过渡\n动画\n多列\n瀑布流效果\n　2D、3D转换通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸转换是使元素改变形状、尺寸和位置的一种效果 \n可以使用2D、3D来转换元素2D转换方法translate() \nrotate() \nscale() \nmatrix()3D转换方法rotateX() \nrotateY()示例：<body>\n <div>第一个di

本章内容

2D、3D转换 过渡 动画 多列 瀑布流效果
<hr>

2D、3D转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

转换是使元素改变形状、尺寸和位置的一种效果 可以使用2D、3D来转换元素

2D转换方法

translate() rotate() scale() matrix()

3D转换方法

rotateX() rotateY()

示例： 这里写图片描述

<body>
   <div>第一个div</div><br/>
   <div class="div2">第er个div</div>
   <div class="div3">第3个div</div>
   <div class="div4">第4个div</div>
   <div class="div5">第5个div</div>
   <div class="div6">第6个div</div>
</body>

div{
   width: 100px;
   height: 100px;
   background-color: aquamarine;
}
.div2{
   transform: translate(200px,100px);
   -webkit-transform: translate(200px,100px);/*safari chrome*/
   -ms-transform: translate(200px, 100px);/*IE*/
   -o-transform: translate(200px, 100px);/*opera*/
   -moz-transform: translate(200px, 100px);/*Firefox*/
}
.div3{
   transform: rotate(200deg);
   -webkit-transform: rotate(200deg);/*safari chrome*/
   -ms-transform: rotate(200deg);/*IE*/
   -o-transform: rotate(200deg);/*opera*/
   -moz-transform: rotate(200deg);/*Firefox*/
}
.div4{
   margin-top: 100px;
   transform: scale(1,2);
   -webkit-transform: scale(1,2);/*safari chrome*/
   -ms-transform:scale(1,2);/*IE*/
   -o-transform: scale(1,2);/*opera*/
   -moz-transform: scale(1,2);/*Firefox*/
}
.div5{
   margin-left: 150px;
   transform: skew(20deg, 20deg);
   -webkit-transform: skew(20deg, 20deg);/*safari chrome*/
   -ms-transform:skew(20deg, 20deg);/*IE*/
   -o-transform: skew(20deg, 20deg);/*opera*/
   -moz-transform: skew(20deg, 20deg);/*Firefox*/
}
.div6{
   transform: rotateY(120deg);
   -webkit-transform: rotateY(120deg);/*safari chrome*/
   -ms-transform:rotateY(120deg);/*IE*/
   -o-transform: rotateY(120deg);/*opera*/
   -moz-transform: rotateY(120deg);/*Firefox*/
}

<hr>

过渡

通过使用CSS3，可以给元素添加一些效果
CSS3过渡是元素从一种样式转换成另一种样式

动画效果的CSS 动画执行的时间

属性
transition           设置四个过渡属性

transition-property    过渡的名称

transition-duration    过渡效果花费的时间

transition-timing-function     过渡下过的时间曲线

transition-delay      过渡效果开始时间

示例： 这里写图片描述

<body>
   <div></div>
</body>

div{
   width: 100px;
   height: 100px;
   background-color: aquamarine;
   transition:width 2s, height 2s, transform 2s;
   transition-delay: 2s;
}
div:hover{
   width: 200px;
   height: 200px;
   transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
}

动画

通过CSS3，也可以进行创建动画
CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称

示例： 这里写图片描述

<body>
   <div>anim</div>
</body>

div{
   width: 100px;
   height: 100px;
   background-color: aquamarine;
   position: relative;
   animation: anim 5s infinite alternate;
   -webkit-animation: anim 5s infinite alternate;
}
@keyframes anim{
   0%{background: red; left:  0px; top: 0px}
   25%{background: blue; left: 200px; top: 0px}
   50%{background: #ccffcc; left: 200px; top: 200px}
   75%{background: #00ff00; left: 0px; top: 200px}
   100%{background: red; left:  0px; top: 0px}
}
@-webkit-keyframes anim {
         0%{background: red; left:  0px; top: 0px}
         25%{background: blue; left: 200px; top: 0px}
         50%{background: #ccffcc; left: 200px; top: 200px}
         75%{background: #00ff00; left: 0px; top: 200px}
         100%{background: red; left:  0px; top: 0px}
      }

多列

在CSS3中，可以创建多列来对文本或者区域进行布局
属性
column-count
column-gap
colume-rule

示例： 这里写图片描述

.div1{
   column-count: 4;
   column-gap: 50px;
   -webkit-column-count: 4;
   -webkit-column-gap: 50px;
   -webkit-column-rule: 5px outset #FF0000;
   column-rule: 5px outset #FF0000;
}

瀑布流效果

示例： 这里写图片描述

<body>
   <div class="container">
      <div>![](a.jpg) <p>便签</p></div>
      <div>![](b.jpg)</div>
      <div>![](c.jpg)</div>
      <div>![](d.jpg)</div>
      <div>![](e.jpg)<p>便签</p></div>
      <div>![](f.jpg)</div>
      <div>![](g.jpg)</div>
      <div>![](h.jpg)<p>便签</p></div>
      <div>![](i.jpg)</div>
   </div>
</body>

.container{
   column-width: 250px;
   -webkit-column-width: 250px;
   column-gap: 5px;
   -webkit-column-gap: 5px;
}
.container div{
   width: 250px;
   margin: 5px 0;
}

<hr> 这里写图片描述

原文地址：https://blog.csdn.net/cjh_android/article/details/51512266?ops_request_misc=&request_id=7de3e24c8c144f80b934c257805b666a&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-1-51512266-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/99fbad3f9da84fd19dd018a9c6f6b774

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复