css拉伸动画,12个动画基本模式 - CSS3 挤压和拉伸的动画

最新推荐文章于 2023-09-22 16:12:56 发布
最新推荐文章于 2023-09-22 16:12:56 发布
阅读量735 收藏
点赞数
文章标签： css拉伸动画

CSS

语言：

CSSSCSS

确定

body {

background-color: #2e2e2e;

font-family: "futura-pt", futura, sans-serif;

color: #686868;

padding: 10px 40px;

}

h1,

h2,

h3,

h4 {

text-transform: uppercase;

font-weight: 700;

letter-spacing: 0.1em;

}

h1 {

font-size: 14px;

border-bottom: 1px solid;

padding: 10px 0;

margin-bottom: 10px;

}

h2 {

margin-top: 0;

}

a {

color: #e17e66;

}

#ref {

width: 600px;

margin: 30px auto;

text-align: right;

}

#stage {

background-color: #333;

width: 600px;

height: 278px;

margin: auto;

position: relative;

-webkit-perspective: 400px;

-moz-perspective: 400px;

perspective: 400px;

}

#cube {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

width: 20px;

height: 20px;

-webkit-transform-origin: center bottom;

-moz-transform-origin: center bottom;

-ms-transform-origin: center bottom;

-o-transform-origin: center bottom;

transform-origin: center bottom;

-webkit-transform: rotateY(30deg) translate3d(0, 60px, 0) scaleY(1) scaleX(4) scaleZ(4);

-moz-transform: rotateY(30deg) translate3d(0, 60px, 0) scaleY(1) scaleX(4) scaleZ(4);

-ms-transform: rotateY(30deg) translate3d(0, 60px, 0) scaleY(1) scaleX(4) scaleZ(4);

-o-transform: rotateY(30deg) translate3d(0, 60px, 0) scaleY(1) scaleX(4) scaleZ(4);

transform: rotateY(30deg) translate3d(0, 60px, 0) scaleY(1) scaleX(4) scaleZ(4);

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: ss 1s linear infinite alternate;

-moz-animation: ss 1s linear infinite alternate;

animation: ss 1s linear infinite alternate;

}

#cube div {

width: 20px;

height: 20px;

position: absolute;

background-color: #ccc;

}

#front {

-webkit-transform: translate3d(0, 0, 10px);

-moz-transform: translate3d(0, 0, 10px);

-ms-transform: translate3d(0, 0, 10px);

-o-transform: translate3d(0, 0, 10px);

transform: translate3d(0, 0, 10px);

}

#back {

-webkit-transform: translate3d(0, 0, -10px);

-moz-transform: translate3d(0, 0, -10px);

-ms-transform: translate3d(0, 0, -10px);

-o-transform: translate3d(0, 0, -10px);

transform: translate3d(0, 0, -10px);

}

#top {

-webkit-transform: rotateX(-90deg) translate3d(0, -10px, 0);

-moz-transform: rotateX(-90deg) translate3d(0, -10px, 0);

-ms-transform: rotateX(-90deg) translate3d(0, -10px, 0);

-o-transform: rotateX(-90deg) translate3d(0, -10px, 0);

transform: rotateX(-90deg) translate3d(0, -10px, 0);

-webkit-transform-origin: center top;

-moz-transform-origin: center top;

-ms-transform-origin: center top;

-o-transform-origin: center top;

transform-origin: center top;

background-color: white !important;

}

#bottom {

-webkit-transform: rotateX(90deg) translate3d(0, 10px, 0);

-moz-transform: rotateX(90deg) translate3d(0, 10px, 0);

-ms-transform: rotateX(90deg) translate3d(0, 10px, 0);

-o-transform: rotateX(90deg) translate3d(0, 10px, 0);

transform: rotateX(90deg) translate3d(0, 10px, 0);

-webkit-transform-origin: center bottom;

-moz-transform-origin: center bottom;

-ms-transform-origin: center bottom;

-o-transform-origin: center bottom;

transform-origin: center bottom;

background-color: black !important;

}

#left {

-webkit-transform: rotateY(90deg) translate3d(-10px, 0, 0);

-moz-transform: rotateY(90deg) translate3d(-10px, 0, 0);

-ms-transform: rotateY(90deg) translate3d(-10px, 0, 0);

-o-transform: rotateY(90deg) translate3d(-10px, 0, 0);

transform: rotateY(90deg) translate3d(-10px, 0, 0);

-webkit-transform-origin: left center;

-moz-transform-origin: left center;

-ms-transform-origin: left center;

-o-transform-origin: left center;

transform-origin: left center;

background-color: #666 !important;

}

#right {

-webkit-transform: rotateY(-90deg) translate3d(10px, 0, 0);

-moz-transform: rotateY(-90deg) translate3d(10px, 0, 0);

-ms-transform: rotateY(-90deg) translate3d(10px, 0, 0);

-o-transform: rotateY(-90deg) translate3d(10px, 0, 0);

transform: rotateY(-90deg) translate3d(10px, 0, 0);

-webkit-transform-origin: right center;

-moz-transform-origin: right center;

-ms-transform-origin: right center;

-o-transform-origin: right center;

transform-origin: right center;

}

#topS div,

#bottomS div {

width: 2px;

height: 20px;

background-color: #ccc;

position: absolute;

}

#topS {

width: 20px;

left: 0;

right: 0;

top: 40px;

margin: auto;

background-color: red;

position: relative;

-webkit-transform-origin: center top;

-moz-transform-origin: center top;

-ms-transform-origin: center top;

-o-transform-origin: center top;

transform-origin: center top;

-webkit-animation: topSplash 2s linear infinite;

-moz-animation: topSplash 2s linear infinite;

animation: topSplash 2s linear infinite;

}

#topS div:first-child {

left: 0;

}

#topS div:nth-child(1) {

left: 50%;

-webkit-transform: scaleY(1.1);

-moz-transform: scaleY(1.1);

-ms-transform: scaleY(1.1);

-o-transform: scaleY(1.1);

transform: scaleY(1.1);

}

#topS div:last-child {

right: 0;

left: auto;

}

#bottomS {

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

position: absolute;

width: 100%;

height: 100%;

background-color: transparent !important;

-webkit-transform: translateY(18px);

-moz-transform: translateY(18px);

-ms-transform: translateY(18px);

-o-transform: translateY(18px);

transform: translateY(18px);

-webkit-animation: fadeIn 2s linear infinite;

-moz-animation: fadeIn 2s linear infinite;

animation: fadeIn 2s linear infinite;

}

#bottomS div {

-webkit-transform-origin: center center;

-moz-transform-origin: center center;

-ms-transform-origin: center center;

-o-transform-origin: center center;

transform-origin: center center;

background-color: white;

}

#bottomS div:nth-child(1) {

width: 2px;

height: 5px;

-webkit-transform: rotateX(90deg) translate3d(5px, 25px, 0px);

-moz-transform: rotateX(90deg) translate3d(5px, 25px, 0px);

-ms-transform: rotateX(90deg) translate3d(5px, 25px, 0px);

-o-transform: rotateX(90deg) translate3d(5px, 25px, 0px);

transform: rotateX(90deg) translate3d(5px, 25px, 0px);

-webkit-transform-origin: center bottom;

-moz-transform-origin: center bottom;

-ms-transform-origin: center bottom;

-o-transform-origin: center bottom;

transform-origin: center bottom;

}

#bottomS div:nth-child(2) {

width: 2px;

height: 5px;

-webkit-transform: rotateX(90deg) translate3d(5px, -15px, 0px);

-moz-transform: rotateX(90deg) translate3d(5px, -15px, 0px);

-ms-transform: rotateX(90deg) translate3d(5px, -15px, 0px);

-o-transform: rotateX(90deg) translate3d(5px, -15px, 0px);

transform: rotateX(90deg) translate3d(5px, -15px, 0px);

-webkit-transform-origin: center bottom;

-moz-transform-origin: center bottom;

-ms-transform-origin: center bottom;

-o-transform-origin: center bottom;

transform-origin: center bottom;

}

#bottomS div:nth-child(3) {

width: 5px;

height: 2px;

-webkit-transform: rotateX(90deg) translate3d(30px, 5px, 0px);

-moz-transform: rotateX(90deg) translate3d(30px, 5px, 0px);

-ms-transform: rotateX(90deg) translate3d(30px, 5px, 0px);

-o-transform: rotateX(90deg) translate3d(30px, 5px, 0px);

transform: rotateX(90deg) translate3d(30px, 5px, 0px);

-webkit-transform-origin: center bottom;

-moz-transform-origin: center bottom;

-ms-transform-origin: center bottom;

-o-transform-origin: center bottom;

transform-origin: center bottom;

}

#bottomS div:nth-child(4) {

width: 5px;

height: 2px;

-webkit-transform: rotateX(90deg) translate3d(-10px, 0px, 0px);

-moz-transform: rotateX(90deg) translate3d(-10px, 0px, 0px);

-ms-transform: rotateX(90deg) translate3d(-10px, 0px, 0px);

-o-transform: rotateX(90deg) translate3d(-10px, 0px, 0px);

transform: rotateX(90deg) translate3d(-10px, 0px, 0px);

-webkit-transform-origin: center bottom;

-moz-transform-origin: center bottom;

-ms-transform-origin: center bottom;

-o-transform-origin: center bottom;

transform-origin: center bottom;

}

@-webkit-keyframes topSplash {

0%, 30% {

-webkit-transform: scaleY(0);

}

40% {

-webkit-transform: scaleY(4);

}

41%,

100% {

-webkit-transform: scaleY(0);

}

}

@-moz-keyframes topSplash {

0%, 30% {

-moz-transform: scaleY(0);

}

40% {

-moz-transform: scaleY(4);

}

41%,

100% {

-moz-transform: scaleY(0);

}

}

@keyframes topSplash {

0%, 30% {

-webkit-transform: scaleY(0);

-moz-transform: scaleY(0);

-ms-transform: scaleY(0);

-o-transform: scaleY(0);

transform: scaleY(0);

}

40% {

-webkit-transform: scaleY(4);

-moz-transform: scaleY(4);

-ms-transform: scaleY(4);

-o-transform: scaleY(4);

transform: scaleY(4);

}

41%,

100% {

-webkit-transform: scaleY(0);

-moz-transform: scaleY(0);

-ms-transform: scaleY(0);

-o-transform: scaleY(0);

transform: scaleY(0);

}

}

@-webkit-keyframes fadeIn {

0%, 30% {

opacity: 0;

}

38% {

opacity: 0;

}

43% {

opacity: 1;

}

49% {

opacity: 0;

}

100% {

opacity: 0;

}

}

@-moz-keyframes fadeIn {

0%, 30% {

opacity: 0;

}

38% {

opacity: 0;

}

43% {

opacity: 1;

}

49% {

opacity: 0;

}

100% {

opacity: 0;

}

}

@keyframes fadeIn {

0%, 30% {

opacity: 0;

}

38% {

opacity: 0;

}

43% {

opacity: 1;

}

49% {

opacity: 0;

}

100% {

opacity: 0;

}

}

@-webkit-keyframes ss {

0% {

-webkit-transform: rotateY(180deg) translate3d(0, -100px, 0) scaleY(1);

-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);

}

73% {

-webkit-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(8);

}

80% {

-webkit-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(1) scaleX(1) scaleZ(1);

}

100% {

-webkit-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(0.25) scaleX(3) scaleZ(3);

}

}

@-moz-keyframes ss {

0% {

-moz-transform: rotateY(180deg) translate3d(0, -100px, 0) scaleY(1);

-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);

}

73% {

-moz-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(8);

}

80% {

-moz-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(1) scaleX(1) scaleZ(1);

}

100% {

-moz-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(0.25) scaleX(3) scaleZ(3);

}

}

@keyframes ss {

0% {

-webkit-transform: rotateY(180deg) translate3d(0, -100px, 0) scaleY(1);

-moz-transform: rotateY(180deg) translate3d(0, -100px, 0) scaleY(1);

-ms-transform: rotateY(180deg) translate3d(0, -100px, 0) scaleY(1);

-o-transform: rotateY(180deg) translate3d(0, -100px, 0) scaleY(1);

transform: rotateY(180deg) translate3d(0, -100px, 0) scaleY(1);

-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);

-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);

animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);

}

73% {

-webkit-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(8);

-moz-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(8);

-ms-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(8);

-o-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(8);

transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(8);

}

80% {

-webkit-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(1) scaleX(1) scaleZ(1);

-moz-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(1) scaleX(1) scaleZ(1);

-ms-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(1) scaleX(1) scaleZ(1);

-o-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(1) scaleX(1) scaleZ(1);

transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(1) scaleX(1) scaleZ(1);

}

100% {

-webkit-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(0.25) scaleX(3) scaleZ(3);

-moz-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(0.25) scaleX(3) scaleZ(3);

-ms-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(0.25) scaleX(3) scaleZ(3);

-o-transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(0.25) scaleX(3) scaleZ(3);

transform: rotateY(55deg) translate3d(0, 100px, 0) scaleY(0.25) scaleX(3) scaleZ(3);

}

}

CSS3 3D文字拉伸发光动画特效.rar
10-01
综上所述，"CSS3 3D文字拉伸发光动画特效.rar"是一个利用CSS3的3D变换、动画和文本效果，结合jQuery库创建的网页特效。这个特效不仅提供了丰富的视觉体验，还具有高度的可定制性，使得开发者可以根据自己的设计需求...
使用css3实现超炫的loading加载动画效果
09-25
总结起来，使用CSS3实现超炫的loading加载动画效果，开发者可以通过创建自定义的关键帧动画和利用变换属性来实现各种动态效果。这不仅可以提升网站或应用的视觉吸引力，还能为用户提供反馈，让他们知道内容正在加载...
HTML5实现图形挤压变形动画
08-23
今天我们要来分享一款很特别的HTML5动画特效，它是一款图形挤压动画。鼠标移动小球，该小球会和周围的几个小球产生挤压效果，从而使受挤压的小球产生相应的变形，利用HTML5是这个挤压变形的特效显得非常逼真，一起来玩玩吧。
css拉伸动画,CSS3 matrix双板划水、拉伸、打板动画实例animation
weixin_35689877的博客
08-03 787
matrix 在 CSS3 中用于制作对象的矩阵效果，把处于不同的状态的矩阵连接起来就变成了动画。单用 matrix 制作动画尽管变化形式不多，但组合合理一样可以制作出新颖的动画。以下就用 matrix 制作了四个动画实例，分别为双板划水、快速拉伸、摇板和打板动画效果；尽管它们都是在几个状态之间转化，却是完全不一样的动画效果，下面分别看这几个实例是如何制作的。一、matrix双板划水动画html代...
css3制作左右拉伸动画菜单
weixin_33895475的博客
10-19 445
微博上看到这样一篇文章（http://js.itivy.com/?p=495），用jquery和css3制作左右拉伸动画菜单，看了下实现效果（http://js.itivy.com/jiaoben963/index.html），感觉用css3就够了，不需要jquery。于是尝试了下，只用css3基本上也实现了原文的效果，如下： 点击顶栏的result可以看到效果，未作浏览器兼容性优化。 ...
CSS3动画 - title下划线的拉伸效果
草巾冒小子的博客
10-12 986
1. 效果图 2. 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &amp
CSS3实现上下拉长加载动画效果
最新发布
m0_46219714的博客
09-22 703
上下拉长加载动画效果。
CSS3 3D文字拉伸发光动画
11-24
除了基本的动画技术，我们还可以结合JavaScript或者CSS3的其他特性，如`transition`，来增强交互性和用户体验。例如，当鼠标悬停在3D文字上时，可以通过JavaScript动态修改`@keyframes`的定义，使动画响应用户的行为...
css3动画过渡实现鼠标跟随导航效果
09-27
在本文中，我们将深入探讨如何使用CSS3动画过渡来实现一个鼠标跟随的导航效果。这个效果可以增强用户界面的互动性，为网站增添动态视觉吸引力。我们将介绍关键的HTML结构、CSS样式以及涉及的CSS3特性。 首先，HTML...
纯css3 transform制作弹簧动画特效
09-08
接下来，我们需要将这个动画应用到目标元素上，使用`animation`属性指定动画名称、持续时间、延迟、次数、方向等参数： ```css .my-element { animation-name: spring-effect; animation-duration: 1s; ...
CSS简单动画---自用展开区域动画（箭头旋转，区域拉伸）
a666666000的博客
10-31 1846
【代码】CSS简单动画---自用展开区域动画（箭头旋转，区域拉伸）
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin
热门推荐
zyz00000000的博客
09-28 1万+
注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸 注意：Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求...
一. CSS3 动画效果和弹性伸缩布局以及页面制作
Night_798的博客
05-15 738
一．属性详解 1. 在讲解动画属性之前，先创建一个基本的样式。 //一个 div 元素 <div>我是 HTML5</div> //设置 CSS div { width: 200px; height: 200px; background-color: white; border: 1px solid green; } 1.@keyframes //创建动画的第一步，先...
CSS3及Javascript实现网页视频背景居中并自动拉伸
m0_59372864的博客
10-31 4005
html用视频作背景并实现随窗口大小自动拉伸并居中
CSS处理图片渲染时拉伸和挤压变形
qq_41585377的博客
10-10 2160
CSS解决图片渲染时拉伸和挤压变形的方法 背景：商品循环出来需要在固定大小里面，但是商品图片大小商家上传时没有规定图片比例，如果写死图片大小会导致图片渲染是拉伸和挤压变形 思路：给图片一个父级容器，父容器给定固定大小，图片限定最大宽度与最小宽度不超过父容器 如： <style type="text/css"> .bigBox{ display: flex; } .i...
css怎么做向左拉伸动画_CSS核心动画技巧：重力，挤压和拉伸
cungui5726的博客
08-22 945
css怎么做向左拉伸动画Previously I’ve talked about using ease-in and ease-out to enhance motion design. Those properties might also be called friction and inertia, both products of gravity. 以前，我曾讨论过使用ease-in a...
HTML5中视频元素的缩放和拉伸
ByteGlide的博客
09-22 1674
在HTML5中，原生的元素没有直接提供缩放和拉伸视频的功能。但是，通过使用CSS的transform属性或background属性，我们可以实现视频的缩放和拉伸效果。但是，原生的元素并没有直接提供缩放和拉伸视频的功能。需要注意的是，这种方法只是视觉上的拉伸效果，并不能真正改变视频的尺寸。这样，视频封面图就会被拉伸到容器的尺寸，从而实现了视频拉伸的效果。通过设置容器的宽度和高度，我们可以控制视频的显示尺寸。在下面的例子中，我将展示两种常见的方法来实现视频的缩放和拉伸。
CSS动画与变形（一）-------transform变形
chenmo2001的博客
05-17 1914
CSS动画与变形（一） ———变形 一、简介： CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助与位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指...
图像滤镜艺术---挤压(Pinch)滤镜
Trent1985的专栏
09-15 2650
本文介绍挤压滤镜(Pinch Filter)的实现过程，并放上C#的程序Demo给大家分享，希望大家喜欢！
CSS3实现音阶波浪loading动画教程
- Flexbox和Grid是CSS3中引入的两种布局模式，它们让元素的排列和对齐变得更加容易。 - 在创建波浪动画时，Flexbox和Grid可用于确保元素沿特定路径平滑移动。 6. **变换（Transforms）**： - CSS变换可用来旋转...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值