使用css3制作好看的动画效果
程序员文章站
2024-03-24 20:55:52
...
今天给大家做两个好看的css3好看的特效
字体浮雕
效果如下
我们来建一个div然后添加一段文字
<div>
这不是摇摆杨嘛？
</div>
然后我们准备一些常用的css样式
*{
margin: 0;
padding: 0;
}
:root,body{
width: 100%;
height: 100%;
}
body{
background-color:blue ;
}
好的基础准备以经完成了我们给他样式
div{
width: 800px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left:calc(50% - 400px);
font-size: 6em;
color: white;
font-weight: blod;
transition: all 1s;
}
div:hover{
text-shadow: 0px 1px 0px #ccc,
0px 1px 10px rgba(0,0,0,0.3),
0px 2px 0px #ccc,
0px 3px 0px #ccc,
0px 4px 0px #ccc,
0px 5px 0px #ccc,
0px 6px 0px #ccc,
0px 7px 0px #ccc,
0px 8px 0px #ccc,
0px 9px 0px #ccc,
0px 10px 10px rgba(0,0,0,0.5)
}
设置这么多的文字阴影主要是让他有一个层叠的立体效果
光影加载效果
效果如下：
我们把每一个字母分别用一个li包裹起来，然后单独给每一个设置动画
<body>
<ul>
<li>l</li>
<li>o</li>
<li>a</li>
<li>d</li>
<li>i</li>
<li>n</li>
<li>g</li>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
</body>
css代码如下
*{
padding: 0;
margin: 0;
list-style: none;
}
:root,body{
width: 100%;
height: 100%;
}
body{
background-color: black;
}
ul{
width: 600px;
height: 100px;
/* color:white; */
/* text-shadow: 0px 0px 10px 1px #037AB5; */
font-size: 7em;
position: absolute;
top: calc(50% - 50px);
left:calc(50% - 300px);
font-weight: bold;
}
ul li{
float: left;
}
@keyframes te {
0%,100%{text-shadow: 0px 0px 80px #007EB6;
color: white;
}
25%,75%{
text-shadow: none;
color:black;
}
}
li:nth-child(1){
animation: te 1s linear 0s infinite;
}
li:nth-child(2){
animation: te 1s linear 0.1s infinite;
}
li:nth-child(3){
animation: te 1s linear 0.2s infinite;
}
li:nth-child(4){
animation: te 1s linear 0.3s infinite;
}
li:nth-child(5){
animation: te 1s linear 0.4s infinite;
}
li:nth-child(6){
animation: te 1s linear 0.5s infinite;
}
li:nth-child(7){
animation: te 1s linear 0.6s infinite;
}
li:nth-child(8){
animation: te 1s linear 0.7s infinite;
}
li:nth-child(9){
animation: te 1s linear 0.8s infinite;
}
li:nth-child(10){
animation: te 1s linear 0.9s infinite;
}
让每一个字母的动画隔0.1秒显示就可以做到光影加载的效果拉！