CSS3特效
transition：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画过渡效果属性 transition</title> <style type="text/css"> .box { width: 100px; height: 100px; margin: 50px auto; background-color: red; transition: all 1s; } .box:hover { width: 200px; height: 200px; border-radius: 50%; background-color: aliceblue; /*transition-property: width, height, border-radius;*/ /*transition-duration: 1s;*/ /*transition-timing-function: ease-in;*/ /*transition-delay: 500ms;*/ transition: all 1s ease-in 500ms; } </style> </head> <body> <div class="box"></div> </body> </html>
animation：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画效果属性 animation</title> <style type="text/css"> .box { width: 100px; height: 100px; margin: 50px auto; background-color: red; } .box:hover { /*animation-name: hover;*/ /*animation-duration: 1s;*/ /*animation-timing-function: ease-in;*/ /*animation-iteration-count: infinite;*/ animation: hover 1s ease-in infinite; } @keyframes hover { 0% { width: 100px; height: 100px; border-radius: 50%; } 50% { width: 200px; height: 200px; border-radius: 50%; } 100% { width: 100px; height: 100px; border-radius: 50%; } } </style> </head> <body> <div class="box"></div> </body> </html>
transform：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 变形</title> <style type="text/css"> .transform { width: 1000px; background-color: #fdfdfd; margin: 50px auto; } .transform:after { clear: both; content: " "; display: block; overflow: hidden; } .transform > p { width: 230px; float: left; border: 1px #999 solid; margin-right: 10px; text-align: center; padding-bottom: 10px; } .transform > p strong { display: block; background-color: #eee; line-height: 28px; font-size: 20px; font-family: "Microsoft YaHei UI"; color: #333; margin-bottom: 10px; } .transform > p span { display: block; width: 100px; height: 100px; margin: 0 auto; border: 1px #ccc solid; background-color: #0099ff; } .transform.origin > p span { background-color: #0c0; transform-origin: 0 -100px; } .transform > p .rotate { transform: rotate(20deg); } .transform > p .translate { transform: translate(20px, 20px); } .transform > p .scale { transform: scale(.5); } .transform > p .skew { transform: skew(20deg, -30deg); } </style> </head> <body> <div class="transform"> <p> <strong>旋转(rotate)</strong> <span class="rotate"></span> </p> <p> <strong>移动(translate)</strong> <span class="translate"></span> </p> <p> <strong>缩放(scale)</strong> <span class="scale"></span> </p> <p> <strong>扭曲(skew)</strong> <span class="skew"></span> </p> </div> <div class="transform origin"> <p> <strong>旋转(rotate)</strong> <span class="rotate"></span> </p> <p> <strong>移动(translate)</strong> <span class="translate"></span> </p> <p> <strong>缩放(scale)</strong> <span class="scale"></span> </p> <p> <strong>扭曲(skew)</strong> <span class="skew"></span> </p> </div> </body> </html>
shadow：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 阴影</title> <style type="text/css"> .box_shadow { width: 1000px; margin: 50px auto; text-align: center; } .box_shadow:after { clear: both; content: " "; display: block; overflow: hidden; } .box_shadow p { width: 100px; height: 100px; float: left; border: 1px #999 solid; line-height: 100px; background-color: #f9f9f9; margin-right: 100px; font-size: 20px; } .box_shadow p:first-child { box-shadow: 5px 5px 3px 2px rgba(0, 0, 0, .3); } .box_shadow p:last-child { box-shadow: inset 5px 5px 3px 2px rgba(0, 0, 0, .3); } </style> </head> <body> <div class="box_shadow"> <p>外阴影</p> <p>内阴影</p> </div> </body> </html>
gardient：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 渐变背景色</title> <style type="text/css"> .line-gradient { width: 1000px; margin: 50px auto; text-align: center; } .line-gradient p { width: 100px; height: 100px; float: left; border: 1px #999 solid; line-height: 100px; margin-right: 100px; font-size: 20px; } .line-gradient p:first-child { background: -webkit-linear-gradient(top, #09f, #fff, #0c0); /*要加-webkit- 否则无法解析top 不加可用180deg代替*/ /*background: -webkit-linear-gradient(top, #09f, #fff 20px, #0c0);*/ /*可决定位置*/ } .line-gradient p:last-child { background: linear-gradient(20deg, #09f, #fff, #0c0); } </style> </head> <body> <div class="line-gradient"> <p>普通渐变</p> <p>角度渐变</p> </div> </body> </html>
弹球效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹球动画效果</title> <style type="text/css"> .box { width: 400px; height: 300px; border: 1px #ccc solid; margin: 30px auto; position: relative; } .box .ball { width: 140px; height: 140px; border-radius: 50%; position: absolute; top: 0; left: 50%; margin-left: -70px; background: linear-gradient(180deg, #fff, #999); box-shadow: inset 0 0 30px #999, inset 0 -15px 70px #999; animation: jump 1s ease-in-out infinite; z-index: 1; } .box .ball:after { content: " "; display: block; width: 70px; height: 30px; border-radius: 50%; position: absolute; top: 10px; left: 50%; margin-left: -35px; background: linear-gradient(#fff, #ccc); } .shadow { width: 80px; height: 60px; border-radius: 50%; position: absolute; bottom: 0; left: 50%; margin-left: -40px; background: rgba(20, 20, 20, .1); box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1); transform: scaleY(.3); animation: shrink 1s infinite; } @keyframes jump { 0% { top: 0; animation-timing-function: ease-in; } 65% { top: 160px; height: 140px; } 75% { height: 120px; } 100% { top: 0; height: 140px; } } @keyframes shrink { 0% { width: 90px; height: 60px; animation-timing-function: ease-in; } 65% { width: 10px; height: 5px; margin-left: -5px; background: rgba(20, 20, 20, .3); box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3); } 100% { width: 90px; height: 60px; background: rgba(20, 20, 20, .1); box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1); } } </style> </head> <body> <div class="box"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html>
loading特效：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading特效</title> <style type="text/css"> .box { width: 100%; padding: 3%; box-sizing: border-box; overflow: hidden; } .box .loader { width: 30%; float: left; height: 200px; margin-right: 3%; border: 1px #ccc solid; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .loader-1 { width: 35px; height: 35px; position: relative; } .loader-1 i { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%); animation: loading-1 0.6s linear infinite; } @keyframes loading-1 { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .loader-2 i { display: inline-block; width: 4px; height: 35px; border-radius: 2px; margin: 0 2px; background-color: #333; } .loader-2 i:nth-child(1) { animation: loading-2 1s ease-in 0.1s infinite; } .loader-2 i:nth-child(2) { animation: loading-2 1s ease-in 0.2s infinite; } .loader-2 i:nth-child(3) { animation: loading-2 1s ease-in 0.3s infinite; } .loader-2 i:nth-child(4) { animation: loading-2 1s ease-in 0.4s infinite; } .loader-2 i:nth-child(5) { animation: loading-2 1s ease-in 0.5s infinite; } @keyframes loading-2 { 0% { transform: scaleY(1); } 50% { transform: scaleY(.4); } 100% { transform: scaleY(1); } } .loader-3 { position: relative; } .loader-3 i { display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #333; position: absolute; } .loader-3 i:nth-child(1) { top: 25px; left: 0; animation: loading-3 1s ease 0s infinite; } .loader-3 i:nth-child(2) { top: 17px; left: 17px; animation: loading-3 1s ease -0.12s infinite; } .loader-3 i:nth-child(3) { top: 0; left: 25px; animation: loading-3 1s ease -0.24s infinite; } .loader-3 i:nth-child(4) { top: -17px; left: 17px; animation: loading-3 1s ease -0.36s infinite; } .loader-3 i:nth-child(5) { top: -25px; left: 0; animation: loading-3 1s ease -0.48s infinite; } .loader-3 i:nth-child(6) { top: -17px; left: -17px; animation: loading-3 1s ease -0.6s infinite; } .loader-3 i:nth-child(7) { top: 0; left: -25px; animation: loading-3 1s ease -0.72s infinite; } .loader-3 i:nth-child(8) { top: 17px; left: -17px; animation: loading-3 1s ease -0.84s infinite; } @keyframes loading-3 { 50% { transform: scale(.4); opacity: .3; } 100% { transform: scale(1); opacity: 1; } } </style> </head> <body> <div class="box"> <div class="loader"> <div class="loader-1"> <i></i> </div> </div> <div class="loader"> <div class="loader-2"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader"> <div class="loader-3"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading特效</title> <style type="text/css"> .box { width: 100%; padding: 3%; box-sizing: border-box; overflow: hidden; } .box .loader { width: 30%; float: left; height: 200px; margin-right: 3%; border: 1px #ccc solid; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .loading-1 { width: 60px; height: 60px; position: relative; } .loading-1 i { display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #333; position: absolute; left: 0; top: 0; opacity: 0; } .loading-1 i:nth-child(1) { animation: loading-1 1s linear 0s infinite; } .loading-1 i:nth-child(2) { animation: loading-1 1s linear 0.2s infinite; } .loading-1 i:nth-child(3) { animation: loading-1 1s linear 0.4s infinite; } @keyframes loading-1 { 0% { transform: scale(0); opacity: 0; } 5% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .loading-2 { width: 40px; height: 40px; position: relative; } .loading-2 i { display: block; border: 2px solid #333; border-color: transparent #333; border-radius: 50%; position: absolute; } .loading-2 i:first-child { width: 35px; height: 35px; top: 0; left: 0; animation: loading-2 1s ease-in-out 0s infinite; } .loading-2 i:last-child { width: 15px; height: 15px; top: 10px; left: 10px; animation: loading-2 1s ease-in-out 0.5s infinite reverse; } @keyframes loading-2 { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.6); } 100% { transform: rotate(360deg) scale(1); } } .loading-3 { width: 80px; height: 20px; position: relative; } .loading-3 i { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin-right: 10px; position: absolute; } .loading-3 i:nth-child(1) { animation: loading-3 2s linear 0s infinite; } .loading-3 i:nth-child(2) { animation: loading-3 2s linear -0.4s infinite; } .loading-3 i:nth-child(3) { animation: loading-3 2s linear -0.8s infinite; } .loading-3 i:nth-child(4) { animation: loading-3 2s linear -1.2s infinite; } .loading-3 i:nth-child(5) { animation: loading-3 2s linear -1.6s infinite; } @keyframes loading-3 { 0% { left: 100px; top: 0; } 80% { left: 0; top: 0; } 85% { left: 0; top: -20px; width: 20px; height: 20px; } 90% { width: 40px; height: 20px; } 95% { left: 100px; top: -20px; width: 20px; height: 20px; } 100% { left: 100px; top: 0; } } </style> </head> <body> <div class="box"> <div class="loader"> <div class="loading-1"> <i></i> <i></i> <i></i> </div> </div> <div class="loader"> <div class="loading-2"> <i></i> <i></i> </div> </div> <div class="loader"> <div class="loading-3"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> </div> </body> </html>
3D旋转导航：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D 菜单翻转动画特效</title> <style type="text/css"> .nav { width: 610px; margin: 50px auto; background-color: #fdfdfd; border: 1px #ccc solid; } .nav:after { clear: both; display: block; overflow: hidden; content: ""; } .nav .item { width: 200px; height: 100px; margin-right: 5px; float: left; perspective: 4000px; } .nav .item:last-child { margin-right: 0; } .nav .item a { display: block; height: 100px; text-decoration: none; transition: all .5s; transform-style: preserve-3d; } .nav .item a p { height: 100px; margin: 0; line-height: 100px; color: #fff; text-align: center; font-size: 20px; font-family: "Microsoft YaHei"; border-radius: 2px; transition: all .5s; } .nav .item a p:first-child { background-color: #090; transform: translateZ(50px); } .nav .item a p:last-child { background-color: #009; transform: translateZ(50px) rotateX(-90deg); margin-top: -50px; } .nav .item a:hover { transform: rotateX(90deg); } .nav .item a:hover p:last-child { transform: translateZ(0) rotateX(-90deg); margin-top: 0; } </style> </head> <body> <div class="nav"> <div class="item"> <a href="#"> <p>首页</p> <p>Home</p> </a> </div> <div class="item"> <a href="#"> <p>问答</p> <p>Q & A</p> </a> </div> <div class="item"> <a href="#"> <p>关于我们</p> <p>About us</p> </a> </div> </div> </body> </html>
下拉菜单特效：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉选择框-1</title> <style type="text/css"> body, p, ul { margin: 0; padding: 0; } body { background-color: aquamarine; color: #333; } .content { padding-top: 5%; } .content .select { width: 300px; height: 40px; margin: 0 auto; font-size: 16px; font-family: "Microsoft YaHei"; background-color: #fff; position: relative; } .content .select:after { content: ''; display: block; width: 10px; height: 10px; border-left: 1px #ccc solid; border-bottom: 1px #ccc solid; position: absolute; top: 11px; right: 12px; transform: rotate(-45deg); transition: transform .3s ease-out, top .3s ease-out; } .content .select p { padding: 0 15px; line-height: 40px; cursor: pointer; } .content .select ul { list-style-type: none; background-color: #fff; width: 100%; overflow: auto; position: absolute; top: 40px; left: 0; max-height: 0; transition: max-height .3s ease-out; } .content .select ul li { padding: 0 15px; line-height: 40px; cursor: pointer; } .content .select ul li:hover { background-color: #e0e0e0; } .content .select ul li.selected { background-color: #39f; color: #fff; } .content .select.open ul { max-height: 250px; transform-origin: 50% 0; transition: max-height .2s ease-out; animation: slide-down .5s ease-in; } @keyframes slide-down { 0% { transform: scale(1, 0); } 25% { transform: scale(1, 1.2); } 50% { transform: scale(1, 0.85); } 75% { transform: scale(1, 1.05); } 100% { transform: scale(1, 1); } } .content .select.open:after { transform: rotate(-225deg); top: 18px; transition: all .3s ease-in; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function () { $('.select > p').on('click', function (e) { $('.select').toggleClass('open'); e.stopPropagation(); }); $('.select ul li').on('click', function (e) { var _this = $(this); $('.select > p').text(_this.attr('data-value')); _this.addClass('selected').siblings().removeClass('selected'); $('.select').removeClass('open'); e.stopPropagation(); }); $(document).on('click', function () { $('.select').removeClass('open'); }) }); </script> </head> <body> <div class="content"> <div class="select"> <p>所有选项</p> <ul> <li data-value="所有选项" class="selected">所有选项</li> <li data-value="Html">Html</li> <li data-value="CSS">CSS</li> <li data-value="JavaScript">JavaScript</li> <li data-value="JQuery">JQuery</li> </ul> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉选择框-2</title> <style type="text/css"> body, p, ul { margin: 0; padding: 0; } body { background-color: aquamarine; color: #333; } .content { padding-top: 20%; } .content .select { width: 300px; height: 40px; margin: 0 auto; font-size: 16px; font-family: "Microsoft YaHei"; background-color: #fff; position: relative; } .content .select > i { position: absolute; top: 12px; right: 10px; width: 20px; height: 11px; border-top: 3px #ccc solid; border-bottom: 3px #ccc solid; } .content .select > i:after { content: ''; position: absolute; top: 4px; left: 0; width: 100%; height: 3px; background-color: #ccc; } .content .select p { padding: 0 15px; line-height: 40px; cursor: pointer; } .content .select ul { list-style-type: none; position: absolute; top: 20px; left: 0; z-index: 1; background-color: #fff; width: 100%; overflow: hidden; height: 0; transition: height .3s ease-out, top .3s ease-out; } .content .select ul li { padding: 0 15px; line-height: 40px; cursor: pointer; opacity: 0; transform: translateX(300px); transition: transform .3s ease-out; } .content .select ul li:hover { background-color: #e0e0e0; } .content .select ul li.selected { background-color: #39f; color: #fff; } .content .select.open ul { height: 200px; top: -80px; transition: all .2s ease-in; } .content .select.open ul li { opacity: 1; transform: translateX(0); } .content .select.open ul li:nth-child(1) { transition: opacity .3s ease-in .05s, transform .3s ease-in .05s; } .content .select.open ul li:nth-child(2) { transition: opacity .3s ease-in .1s, transform .3s ease-in .1s; } .content .select.open ul li:nth-child(3) { transition: opacity .3s ease-in .15s, transform .3s ease-in .15s; } .content .select.open ul li:nth-child(4) { transition: opacity .3s ease-in .2s, transform .3s ease-in .05s; } .content .select.open ul li:nth-child(5) { transition: opacity .3s ease-in .25s, transform .3s ease-in .25s; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function () { $('.select > p').on('click', function (e) { $('.select').toggleClass('open'); e.stopPropagation(); }); $('.select ul li').on('click', function (e) { var _this = $(this); $('.select > p').text(_this.attr('data-value')); _this.addClass('selected').siblings().removeClass('selected'); $('.select').removeClass('open'); e.stopPropagation(); }); $(document).on('click', function () { $('.select').removeClass('open'); }) }); </script> </head> <body> <div class="content"> <div class="select"> <p>所有选项</p> <i></i> <ul> <li data-value="所有选项" class="selected">所有选项</li> <li data-value="Html">Html</li> <li data-value="CSS">CSS</li> <li data-value="JavaScript">JavaScript</li> <li data-value="JQuery">JQuery</li> </ul> </div> </div> </body> </html>
单选框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单选框的动画特效</title> <style type="text/css"> .radio-1 { width: 980px; margin: 0 auto; padding: 3% 0; background-color: #3cc; text-align: center; } .radio-1 [type="radio"] { display: none; } .radio-1 label { display: inline-block; position: relative; width: 28px; height: 28px; border: 1px #ccc solid; background-color: #fff; margin-right: 10px; cursor: pointer; border-radius: 100%; } .radio-1 label:after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background-color: #666; border-radius: 50%; transform: scale(0); transition: transform .2s ease-out; } .radio-1 [type="radio"]:checked + label { background-color: #eee; transition: background-color .2s ease-in; } .radio-1 [type="radio"]:checked + label:after { transform: scale(1); transition: transform .2s ease-in; } /*------------radio-2-------------*/ .radio-2 { width: 980px; margin: 0 auto; padding: 3% 0; background-color: #fc9; text-align: center; } .radio-2 [type="radio"] { display: none; } .radio-2 label { display: inline-block; position: relative; overflow: hidden; width: 28px; height: 28px; border: 1px #ccc solid; background-color: #fff; margin-right: 10px; cursor: pointer; border-radius: 100%; } .radio-2 label:after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background-color: #666; border-radius: 50%; transform-origin: -2px 50%; transform: rotate(-180deg); transition: transform .2s ease-out; } .radio-2 [type="radio"]:checked + label:after { transform: rotate(0); transition: transform .2s ease-in; } </style> </head> <body> <div class="radio-1"> <input type="radio" name="radio-1" id="radio-1-1" checked="checked"> <label for="radio-1-1"></label> <input type="radio" name="radio-1" id="radio-1-2"> <label for="radio-1-2"></label> <input type="radio" name="radio-1" id="radio-1-3"> <label for="radio-1-3"></label> </div> <div class="radio-2"> <input type="radio" name="radio-2" id="radio-2-1" checked="checked"> <label for="radio-2-1"></label> <input type="radio" name="radio-2" id="radio-2-2"> <label for="radio-2-2"></label> <input type="radio" name="radio-2" id="radio-2-3"> <label for="radio-2-3"></label> </div> </body> </html>
复选框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框的动画特效</title> <style type="text/css"> .checkbox-1 { width: 980px; margin: 0 auto; text-align: center; padding: 3% 0; background-color: #9cc; } .checkbox-1 label { display: inline-block; width: 10px; height: 10px; padding: 9px; border: 1px #ccc solid; border-radius: 4px; background-color: #fff; color: #333; margin-right: 10px; overflow: hidden; position: relative; cursor: pointer; } .checkbox-1 label:after { content: '+'; font-family: Arial; color: #fff; background-color: #399; width: 26px; height: 26px; line-height: 26px; position: absolute; left: 1px; top: 1px; border-radius: 4px; transform: translateY(-30px); transition: transform .2s ease-out; } .checkbox-1 [type = "checkbox"] { display: none; } .checkbox-1 [type = "checkbox"]:checked + label:after { transform: translateY(0); transition: transform .2s ease-in; } /*--------------checkbox-2-----------------*/ .checkbox-2 { width: 980px; margin: 0 auto; text-align: center; padding: 3% 0; background-color: #fc9; } .checkbox-2 label { display: inline-block; width: 68px; height: 34px; border: 1px #ccc solid; border-radius: 18px; background-color: #fafafa; margin-right: 10px; position: relative; cursor: pointer; transition: background-color .1s ease-in; } .checkbox-2 label:after { content: ''; position: absolute; left: 1px; top: 1px; width: 30px; height: 30px; border: 1px #eee solid; border-radius: 50%; background-color: #fff; transition: left .1s ease-out; } .checkbox-2 [type = "checkbox"] { display: none; } .checkbox-2 [type = "checkbox"]:checked + label { background-color: #3c6; transition: background-color .1s ease-in; } .checkbox-2 [type = "checkbox"]:checked + label:after { left: 35px; transition: left .1s ease-in; } </style> </head> <body> <div class="checkbox-1"> <input type="checkbox" name="checkbox-1" id="checkbox-1-1" checked="checked"> <label for="checkbox-1-1"></label> <input type="checkbox" name="checkbox-1" id="checkbox-1-2"> <label for="checkbox-1-2"></label> <input type="checkbox" name="checkbox-1" id="checkbox-1-3"> <label for="checkbox-1-3"></label> </div> <div class="checkbox-2"> <input type="checkbox" name="checkbox-2" id="checkbox-2-1" checked="checked"> <label for="checkbox-2-1"></label> <input type="checkbox" name="checkbox-2" id="checkbox-2-2"> <label for="checkbox-2-2"></label> <input type="checkbox" name="checkbox-2" id="checkbox-2-3"> <label for="checkbox-2-3"></label> </div> </body> </html>
地球仪3D：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立体线框球形旋转动画特效</title> <style type="text/css"> body { background-color: #000; } .ball-box { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin: -150px 0 0 -150px; perspective-origin: 50% 50%; perspective: 3000px; } .ball { height: 100%; transform-style: preserve-3d; /*transform: rotateZ(-30deg) rotateY(0deg);*/ animation: rotate3D 30s infinite linear; } @keyframes rotate3D { 0% { transform: rotateZ(-30deg) rotateY(0deg); } 100% { transform: rotateZ(-30deg) rotateY(360deg); } } .ball:after { content: ''; width: 1px; height: 500px; background-color: #ff0; display: block; position: absolute; left: 0; top: 0; transform: translateX(150px) translateY(-100px); } .ball > div { border: 1px #fff solid; position: absolute; width: 100%; height: 100%; border-radius: 100%; } .ball .line-1 { transform: rotateY(0); } .ball .line-2 { transform: rotateY(36deg); } .ball .line-3 { transform: rotateY(72deg); } .ball .line-4 { transform: rotateY(108deg); } .ball .line-5 { transform: rotateY(144deg); } </style> </head> <body> <div class="ball-box"> <div class="ball"> <div class="line-1"></div> <div class="line-2"></div> <div class="line-3"></div> <div class="line-4"></div> <div class="line-5"></div> </div> </div> </body> </html>
