最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3如何实现文字动画效果 CSS3文字动画效果实现代码
时间:2020-11-17 编辑:袖梨 来源:一聚教程网
CSS3如何实现文字动画效果?本篇文章小编给大家分享一下CSS3文字动画效果实现代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
html
脚本之家
jb51
www.jb51.net
TEST IT!
@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- 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; 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- 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中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- css3制作背景渐变动画效果教程 10-26
- CSS3呈现的定价表 09-16
- CSS3如何制作彩虹按钮样式 09-16
- CSS3图片悬停的切换按钮介绍 09-16