黑松山资源网 Design By www.paidiu.com
效果
html
<div class="sp-container"> <div class="sp-content"> <div class="sp-globe"></div> <h2 class="frame-1"></h2> <h2 class="frame-2">jb51</h2> <h2 class="frame-3">www.jb51.net</h2> <h2 class="frame-4">TEST IT!</h2> </div> </div>
css
@import url('https://fonts.googleapis.com/css?family=Barlow'); body { background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: 'Barlow', sans-serif; } .container { width: 100%; position: relative; overflow: hidden; } a { text-decoration: none; } h1.main, p.demos { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .sp-container { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); } .sp-content { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1000; } .sp-container h2 { position: absolute; top: 50%; line-height: 100px; height: 90px; margin-top: -50px; font-size: 90px; width: 100%; text-align: center; color: transparent; -webkit-animation: blurFadeInOut 3s ease-in backwards; -moz-animation: blurFadeInOut 3s ease-in backwards; -ms-animation: blurFadeInOut 3s ease-in backwards; animation: blurFadeInOut 3s ease-in backwards; } .sp-container h2.frame-1 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } .sp-container h2.frame-2 { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .sp-container h2.frame-3 { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .sp-container h2.frame-4 { font-size: 200px; -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; } .sp-container h2.frame-5 { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span { -webkit-animation: blurFadeIn 3s ease-in 12s backwards; -moz-animation: blurFadeIn 1s ease-in 12s backwards; -ms-animation: blurFadeIn 3s ease-in 12s backwards; animation: blurFadeIn 3s ease-in 12s backwards; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span:nth-child(2) { -webkit-animation-delay: 13s; -moz-animation-delay: 13s; -ms-animation-delay: 13s; animation-delay: 13s; } .sp-container h2.frame-5 span:nth-child(3) { -webkit-animation-delay: 14s; -moz-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } .sp-globe { position: absolute; width: 282px; height: 273px; left: 50%; top: 50%; margin: -137px 0 0 -141px; background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left; -webkit-animation: fadeInBack 3.6s linear 14s backwards; -moz-animation: fadeInBack 3.6s linear 14s backwards; -ms-animation: fadeInBack 3.6s linear 14s backwards; animation: fadeInBack 3.6s linear 14s backwards; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; -webkit-transform: scale(5); -moz-transform: scale(5); -o-transform: scale(5); -ms-transform: scale(5); transform: scale(5); } .sp-circle-link { position: absolute; left: 50%; bottom: 100px; margin-left: -50px; text-align: center; line-height: 100px; width: 100px; height: 100px; background: #fff; color: #3f1616; font-size: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: fadeInRotate 1s linear 16s backwards; -moz-animation: fadeInRotate 1s linear 16s backwards; -ms-animation: fadeInRotate 1s linear 16s backwards; animation: fadeInRotate 1s linear 16s backwards; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .sp-circle-link:hover { background: #85373b; color: #fff; } /**/ @-webkit-keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); } } @-webkit-keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; -webkit-transform: scale(1.1); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } } @-webkit-keyframes fadeInBack { 0% { opacity: 0; -webkit-transform: scale(0); } 50% { opacity: 0.4; -webkit-transform: scale(2); } 100% { opacity: 0.2; -webkit-transform: scale(5); } } @-webkit-keyframes fadeInRotate { 0% { opacity: 0; -webkit-transform: scale(0) rotate(360deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); } } /**/ @-moz-keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); } } @-moz-keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } } @-moz-keyframes fadeInBack { 0% { opacity: 0; -moz-transform: scale(0); } 50% { opacity: 0.4; -moz-transform: scale(2); } 100% { opacity: 0.2; -moz-transform: scale(5); } } @-moz-keyframes fadeInRotate { 0% { opacity: 0; -moz-transform: scale(0) rotate(360deg); } 100% { opacity: 1; -moz-transform: scale(1) rotate(0deg); } } /**/ @keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); } } @keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } } @keyframes fadeInBack { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 0.4; transform: scale(2); } 100% { opacity: 0.2; transform: scale(5); } } @keyframes fadeInRotate { 0% { opacity: 0; transform: scale(0) rotate(360deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
以上就是CSS3 文字动画效果的详细内容,更多关于CSS3 文字动画的资料请关注其它相关文章!
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《神话时代:重述版》评测:粉丝们的朝花夕拾
- 战锤40K星际战士2先锋职业介绍|先锋职业技能效果一览
- 战锤40K星际战士2重装职业介绍|重装职业技能效果一览
- 交错战线能源发电站推荐角色一览
- 阿波罗乐神之音《第4集出埃及记》[WAV+CUE]
- JohnWrightTrio-SouthSideSoul-1960-2024(24-192)
- AnthonyBruno-Cefalu(2024)[24-96]
- 《地狱潜者2》玩家人数飙升:终于不再削弱玩家了
- 黑神话引力!外媒分享孙悟空英文书籍:美生中国人等
- 《荒野大镖客》PC版曝光!《GTA6》疑似也有PC版
- 林宥嘉.2008-神秘嘉宾(引进版)【华研国际】【WAV+CUE】
- 徐小凤.1997-金曲精选(康艺经典珍藏系列)【康艺成音】【WAV+CUE】
- 群星.1994-非常精丫宝丽金】【WAV+CUE】
- 《赛马娘 热血喧闹大感谢祭!》评测:现代复古派对
- 《星球大战:亡命之徒》评测:还是看看远方的光剑吧