CSS字体旋转动画-插件特效-星河码客

我们将创建一个字体效果。一些句子和旋转的一部分。我们将“交换”的某些词,句子使用CSS动画。一个主要包装一个包含一级h2标题跨越和两个部门的旋转的话:

Real poetry is like creating
breathtaking moments lovely sounds incredible magic unseen experiences happy feelings beautiful butterflies

with a silent touch of
sugar spice colors happiness wonder happiness

CSS3首先,我们将风格主要包装和中心的页面:.rw-wrapper{ width: 80%; position: relative; margin: 110px auto 0 auto; font-family: 'Bree Serif'; padding: 10px;}我们将会添加一些文本的影子在标题的所有元素:.rw-sentence{ margin: 0; text-align: left; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}并将一些特定的文本样式添加到跨越:.rw-sentence span{ color: #444; white-space: nowrap; font-size: 200%; font-weight: normal;}显示为内联元素.rw-words{ display: inline; text-indent: 10px;}每个跨度在rw-words div将绝对定位,我们会隐藏任何溢出:.rw-words span{ position: absolute; opacity: 0; overflow: hidden; width: 100%; color: #6b969d;}现在,我们将运行两个动画。如前所述,我们将运行相同的动画的横跨在一个div,只是不同的延迟:.rw-words-1 span{ animation: rotateWordsFirst 18s linear infinite 0s;}.rw-words-2 span{ animation: rotateWordsSecond 18s linear infinite 0s;}.rw-words span:nth-child(2) { animation-delay: 3s; color: #6b889d;}.rw-words span:nth-child(3) { animation-delay: 6s; color: #6b739d; }.rw-words span:nth-child(4) { animation-delay: 9s; color: #7a6b9d;}.rw-words span:nth-child(5) { animation-delay: 12s; color: #8d6b9d;}.rw-words span:nth-child(6) { animation-delay: 15s; color: #9b6b9d;}@keyframes rotateWordsFirst { 0% { opacity: 1; animation-timing-function: ease-in; height: 0px; } 8% { opacity: 1; height: 60px; } 19% { opacity: 1; height: 60px; } 25% { opacity: 0; height: 60px; } 100% { opacity: 0; }}单词在第二个div的动画会淡入。我们添加了一个这里的关键帧一步百分比,因为我们希望这些话出现一点晚于第一的词:@keyframes rotateWordsSecond { 0% { opacity: 1; animation-timing-function: ease-in; width: 0px; } 10% { opacity: 0.3; width: 0px; } 20% { opacity: 1; width: 100%; } 27% { opacity: 0; width: 100%; } 100% { opacity: 0; }}

CSS字体旋转动画

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»