gpt4 book ai didi

javascript - CSS 手写动画

转载 作者:太空狗 更新时间:2023-10-29 14:48:49 26 4
gpt4 key购买 nike

<分区>

我正在为客户构建一个着陆页,其 Logo 位于中心,标语正下方 - 但是他们希望标语具有动画效果,使其看起来像是手写的。

我已经为此苦苦挣扎了好几天,不知道该怎么做——如果有人能帮助我,那将是我的救星!

这是标语上没有动画的基本着陆页:

<div class="image-wrapper">
<a href="home.html">
<img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
</a>

<div id="test">
<p>enter the sunshine state</p>
</div>
</div>

还有 CSS:

body {
background-color: #000;
}

@font-face {
font-family: segoe;
src: url(fonts/segoesc.ttf);
}

div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.image-wrapper img {
display: block;
}

#test {
position: absolute;
top: 100%;
width: 100%;
}

#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #FAEDE8;
margin-top: -40px;
}

还有一个 JS Fiddle - https://jsfiddle.net/9297gefk/

再说一次,任何帮助都是不可思议的!

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com