ppt模板有哪些网站,做生产计划类的网站,要写网站建设方案,新乡平原新区建设局网站文章目录 animation 帧动画使用定义例子1 字母例子2 水滴例子3 会动的边框例子4 旋转木马 animation 帧动画
定义好后作用于需要变化的标签上。
使用
animation-name 设置动画名称 animation-duration: 设置动画的持续时间 animation-timing-function 设置动画渐变速度 anim… 文章目录 animation 帧动画使用定义例子1 字母例子2 水滴例子3 会动的边框例子4 旋转木马 animation 帧动画
定义好后作用于需要变化的标签上。
使用
animation-name 设置动画名称 animation-duration: 设置动画的持续时间 animation-timing-function 设置动画渐变速度 animation-delay 设置动画延迟时间 animation-iteration-count 设置动画执行次数 无穷次infinite animation-direction 设置动画的方向 值有alternate交替 animation-play-state 设置动画播放的状态 值 paused暂停 也可以向 transiton 那样多种属性写在一起如
animation: dh 4s linear 0s infinite alternate;定义
keyframes 动画的名称{ 百分数 | to | from { ..... }
} 例子1 字母 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylekeyframes dh {30% {width:200px;margin-left: 5px;background: blue;border-radius: 10%;border: 5px solid yellow;}50% {height: 300px;margin-left: 100px;background: yellow;border-radius: 50%;border: 5px solid white;}100% {height: 200px;margin-left: 500px;background: white;border-radius: 100%;border: 5px solid blue;}}.mb{height:600px;padding:50px ;display: flex;background: pink;align-items: center;}.b{border: 5px solid black;width:150px;background: red;height: 150px;animation: 4s linear 0s infinite alternate dh;}/style
/head
bodydiv classmbdiv classb/div/div
/body
/html例子2 水滴
水滴除了不太像还是挺像的。。。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}body{height:100vh;background: #81ecec;display: flex;justify-content: center;align-items: center;}body .sd{width:300px;height: 300px;background: rgb(255,255,255,0.1);border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;box-shadow: 10px 10px 20px #518a8a, 5px 5px 20px #518a8a inset,-10px -10px 30px #c5f2f2 inset;padding: 20px;animation: dh 5s ease alternate infinite;} body .sd::after{margin-top: 10px;margin-left: 70px;float: left;content: ;width:40px;height:40px;background: rgb(255,255,255,0.1);border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;box-shadow: -2px -2px 30px #cff6f6 inset;}body .sd::before{margin-top: 40px;margin-left: 70px;float: left;content: ;width:20px;height:20px;background: rgba(145, 237, 237, 0.1);border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;box-shadow: -2px -2px 30px #cff3f3 inset;}keyframes dh {30%{border-radius: 65% 35% 56% 44% / 48% 41% 59% 52% ;width:350px;height: 350px;}50%{border-radius: 40% 60% 28% 72% / 70% 71% 29% 30% ;width:325px;height: 320px;}80%{border-radius: 40% 60% 70% 30% / 74% 48% 52% 26% ;width:320px;height: 270px;}100%{border-radius: 46% 54% 17% 83% / 54% 38% 62% 46% ;width:275px;height: 300px;}}/style
/head
bodydiv classsd/div
/body
/html例子3 会动的边框 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{padding: 0;margin: 0;}body{display: flex;height: 100vh;justify-content: center;align-items: center;background:#000;}.box{position: relative;overflow: hidden;}.box .txt{display: flex;font-size: 300px;background: linear-gradient(45deg, red, blue, green,pink);-webkit-background-clip: text;color:transparent;justify-content: center;align-items: center;padding:0 40px;}.box .xz{width:150px;height: 600px;position: absolute;top:50%;left: 50%;/* transform: translate(-50%, -50%); */background: linear-gradient(red, blue, green,pink);animation: dh 4s linear 0s infinite;transform-origin: 0 0 ;z-index: -2;}.box .txt::before{content:;position:absolute;display: block;width:96%;height:94%;background: #000;z-index: -1;}keyframes dh {0%{rotate: 0deg;}100%{rotate: 360deg;}}/style
/head
bodydiv classboxdiv classtxtHello/divdiv classxz/div/div
/body
/html例子4 旋转木马 可以自己往里面放点图片。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{padding: 0;margin: 0;}body{display: flex;height:100vh;justify-content: center;align-items: center;background-color: black;perspective: 1000px;}.box{width:200px;height:200px;display: flex;position: relative;transform-style: preserve-3d;animation: action 30s linear infinite; }.box .item{width:200px;height:200px;position: absolute;box-shadow: 0 0 20px white;-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));}.box .item:nth-child(1){background-color: blue;transform: rotateY(0deg) translateZ(500px);}.box .item:nth-child(2){background-color: pink;transform: rotateY(60deg) translateZ(500px) ;}.box .item:nth-child(3){background-color: red;transform: rotateY(120deg) translateZ(500px) ;}.box .item:nth-child(4){background-color: white;transform:rotateY(180deg) translateZ(500px) ;}.box .item:nth-child(5){background-color: green;transform:rotateY(240deg) translateZ(500px) ;}.box .item:nth-child(6){background-color: yellow;transform:rotateY(300deg) translateZ(500px) ;}keyframes action{0%{transform: rotateX(-10deg) rotateY(0deg);}100%{transform: rotateX(-10deg)rotateY(360deg);}}/style
/head
bodydiv classboxdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/div/div
/body
/html
