×

27款css3动画效果

27款css3动画效果（css3 怎么实现对动态加载的dom加载动画效果）

admin admin 发表于2023-09-06 10:18:44 浏览33 评论0

抢沙发发表评论

本文目录

css3 怎么实现对动态加载的dom加载动画效果

css3 实现对动态加载的dom加载动画效果：body {background: #222;}figure {position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;width: 6.250em;height: 6.250em;animation: rotate 2.4s linear infinite;}.white {top: 0;bottom: 0;left: 0;right: 0;background: white;animation: flash 2.4s linear infinite;opacity: 0;}.dot {position: absolute;margin: auto;width: 2.4em;height: 2.4em;border-radius: 100%;transition: all 1s ease;}.dot:nth-child(2) {top: 0;bottom: 0;left: 0;background: #FF4444;animation: dotsY 2.4s linear infinite;}.dot:nth-child(3) {left: 0;right: 0;top: 0;background: #FFBB33;animation: dotsX 2.4s linear infinite;}.dot:nth-child(4) {top: 0;bottom: 0;right: 0;background: #99CC00;animation: dotsY 2.4s linear infinite;}.dot:nth-child(5) {left: 0;right: 0;bottom: 0;background: #33B5E5;animation: dotsX 2.4s linear infinite;}@keyframes rotate {0% {transform: rotate( 0 );}10% {width: 6.250em;height: 6.250em;}66% {width: 2.4em;height: 2.4em;}100% {transform: rotate(360deg);width: 6.250em;height: 6.250em;}} @keyframes dotsY {66% {opacity: .1;width: 2.4em;}77% {opacity: 1;width: 0;}}@keyframes dotsX {66% {opacity: .1;height: 2.4em;}77% {opacity: 1;height: 0;}} @keyframes flash {33% {opacity: 0;border-radius: 0%;}55% {opacity: .6;border-radius: 100%;}66% {opacity: 0;}}

如何利用CSS3动画实现弹跳效果

HTML代码

《html xmlns=“http://www.w3.org/1999/xhtml“》 《head》 《title》用CSS3动画给一个小球创建跳跃的动画效果《/title》 《link rel=“stylesheet“ type=“text/css“ href=“index.css“ /》 《/head》 《body》 《section class=“main“》 《div id=“ballWrapper“》 《div id=“ball“》《/div》 《div id=“ballShadow“》《/div》 《/div》 《/section》 《/body》《/html》

CSS代码（创建一个与html同目录的index.css文件）

#ballWrapper{position:fixed;top:35%;left:50%;z-index:100;margin-left:-70px;width:140px;height:300px;cursor:pointer;-webkit-transition:all 5s linear 0s;-moz-transition:all 5s linear 0s;transition:all 5s linear 0s;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);-ms-transform:scale(1)}#ballWrapper:active{cursor:pointer;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);-ms-transform:scale(0)}#ball{position:absolute;top:0;z-index:11;width:140px;height:140px;border-radius:70px;background:#bbb;background:url(data:image/svg+xml; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1))); background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; cursor: pointer; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(187,187,187,1) 0,rgba(119,119,119,1) 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=’#bbbbbb’, endColorstr=’#777777’, GradientType=0 );-webkit-animation:jump 1s infinite;-moz-animation:jump 1s infinite;-o-animation:jump 1s infinite;-ms-animation:jump 1s infinite;animation:jump 1s infinite}#ball::after{position:absolute;top:10px;left:30px;z-index:10;width:80px;height:40px;border-radius:40px/20px;background:url(data:image/svg+xml; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); content: ““; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(232,232,232,1) 0,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e8e8e8’, endColorstr=’#00ffffff’, GradientType=0 )}#ballShadow{position:absolute;bottom:0;left:50%;z-index:10;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-webkit-transform:scaleY(.3);-moz-transform:scaleY(.3);-o-transform:scaleY(.3);transform:scaleY(.3);-ms-transform:scaleY(.3);-webkit-animation:shrink 1s infinite;-moz-animation:shrink 1s infinite;-o-animation:shrink 1s infinite;-ms-animation:shrink 1s infinite;animation:shrink 1s infinite}@-webkit-keyframes jump{0%{top:0;-webkit-animation-timing-function:ease-in}50%{top:140px;height:140px;-webkit-animation-timing-function:ease-out}55%{top:160px;height:120px;border-radius:70px/60px;-webkit-animation-timing-function:ease-in}65%{top:120px;height:140px;border-radius:70px;-webkit-animation-timing-function:ease-out}95%{top:0;-webkit-animation-timing-function:ease-in}100%{top:0;-webkit-animation-timing-function:ease-in}}@-moz-keyframes jump{0%{top:0;-moz-animation-timing-function:ease-in}50%{top:140px;height:140px;-moz-animation-timing-function:ease-out}55%{top:160px;height:120px;border-radius:70px/60px;-moz-animation-timing-function:ease-in}65%{top:120px;height:140px;border-radius:70px;-moz-animation-timing-function:ease-out}95%{top:0;-moz-animation-timing-function:ease-in}100%{top:0;-moz-animation-timing-function:ease-in}}@-o-keyframes jump{0%{top:0;-o-animation-timing-function:ease-in}50%{top:140px;height:140px;-o-animation-timing-function:ease-out}55%{top:160px;height:120px;border-radius:70px/60px;-o-animation-timing-function:ease-in}65%{top:120px;height:140px;border-radius:70px;-o-animation-timing-function:ease-out}95%{top:0;-o-animation-timing-function:ease-in}100%{top:0;-o-animation-timing-function:ease-in}}@-ms-keyframes jump{0%{top:0;-ms-animation-timing-function:ease-in}50%{top:140px;height:140px;-ms-animation-timing-function:ease-out}55%{top:160px;height:120px;border-radius:70px/60px;-ms-animation-timing-function:ease-in}65%{top:120px;height:140px;border-radius:70px;-ms-animation-timing-function:ease-out}95%{top:0;-ms-animation-timing-function:ease-in}100%{top:0;-ms-animation-timing-function:ease-in}}@keyframes jump{0%{top:0;animation-timing-function:ease-in}50%{top:140px;height:140px;animation-timing-function:ease-out}55%{top:160px;height:120px;border-radius:70px/60px;animation-timing-function:ease-in}65%{top:120px;height:140px;border-radius:70px;animation-timing-function:ease-out}95%{top:0;animation-timing-function:ease-in}100%{top:0;animation-timing-function:ease-in}}@-webkit-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-webkit-animation-timing-function:ease-in}50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-webkit-animation-timing-function:ease-out}100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-webkit-animation-timing-function:ease-in}}@-moz-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-moz-animation-timing-function:ease-in}50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-moz-animation-timing-function:ease-out}100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-moz-animation-timing-function:ease-in}}@-o-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-o-animation-timing-function:ease-in}50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-o-animation-timing-function:ease-out}100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-o-animation-timing-function:ease-in}}@-ms-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-ms-animation-timing-function:ease-in}50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-ms-animation-timing-function:ease-out}100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-ms-animation-timing-function:ease-in}}@keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);animation-timing-function:ease-in}50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);animation-timing-function:ease-out}100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);animation-timing-function:ease-in}}

css3过渡和css3动画它们都能实现动画效果，只是写的方式不一样，是吗

css3动画：可以自定义节点改变属性，例如30%，40%....这种节点式定义属性的状态值，相对过度来说，可以把一系列的属性变化按照顺序节点来执行，这就好比把动画封装成了一个“函数”，既可以共用，又可以根据改变html标签元素的class来增加或者删除动画效果，动画最好用在写复杂效果的时候用，或者有定义触发一个事件然后删除动画、增加动画时候用。我做轮换图的时候就是js触发，然后使元素拥有一个class引用，class对应的就是动画，很灵活的控制了动画的执行。过渡效果;过渡效果顾名思义，只是一个简短的过渡，它只能定义一个状态（css属性）到另一个状态，没有节点，所以做不了太复杂的效果，但是相对效率比较高，能用过渡的就不用css3动画，当然两者都是各有优劣，没有任何一种属性是没有用的，合理才是最重要的！

css3图片文字实现动画效果

《!doctype html》《html》《head》《meta charset=“utf-8“》《title》无标题文档《/title》《style type=“text/css“》*{padding:0; margin:0; border:0;}.left{width:50%; float:left;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}.right{width:50%; float:left;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */animation-delay: 5s; /* W3C 和 Opera */-moz-animation-delay: 5s; /* Firefox */-webkit-animation-delay: 5s; /* Safari 和 Chrome */}@keyframes myfirst{0% { opacity:0;}100% { opacity:1;}}@-moz-keyframes myfirst /* Firefox */{0% { opacity:0;}100% { opacity:1;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0% { opacity:0;}100% { opacity:1;}}@-o-keyframes myfirst /* Opera */{0% { opacity:0;}100% { opacity:1;}}《/style》《/head》《body》《div》 《div class=“left“》 《img src=“images/xxx.jpg“》 《/div》 《div class=“right“》 文字XXXXXXXXXXXXXXXXXXXXXXXX 《/div》《/div》《/body》《/html》