0 0 5 4 - 这应该是你见过最“小巧精致灵活“的一个CSS动画 - 0.0
本帖最后由 不二如是 于 2021-8-11 09:34 编辑在53铺垫了一段很有意义的吹水！
现在就要进入正题，考虑再三，如果一下子就让可爱单纯的鱼油：
看到些过于性感经验丰富的xxx，怕你身体扛不住{:10_297:}
So，先搞一个最纯粹，最底层，不带任何技巧的一个姿势！
俗名叫：传教士体位
(哈哈，就知道你得看！欲知姿势详情，请点这里)
好了，安利到此结束，本帖主要基于超链接制作一个动画案例。
既然是超链接，怎么少的了广告呢？
小天才养殖场，快来闯一闯
预知更多的超链接样式，请点这里
基本代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接动画演示</title>
<style type="text/css">
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>
效果图：
接下来就是，妙手回春的时刻！
设置一些样式，默认显示为无下划线的白色文字。
鼠标指针经过时切换为黑色，放大字体，横向居中，纵向333px。
body{
margin-top: 333px;
text-align: center;
}
a{
color: #FFF;
font-size: 66px;
text-decoration: none;
font-family: STFangsong;
}
a:hover{
color: #000;
}
效果图：
现在我们要添加一些最简单的动画效果。
当鼠标指针滑过链接时，不会立即变色，而是从白色慢慢过渡到黑色。
a{
transition: all 1.9s;
}
效果图：
哇塞！
有没有，一下就B格很高了呢？！
设置transtition属性，指定了超链接的过渡动画。
属性设置为all，表示当超链接元素中任何属性发生变化，都以动画形式呈现。
动画时间设置为1.9s。
鼠标指针移到超链接，链接在1.9s内从白色变为黑色。
鼠标指针移出超链接，链接在1.9s从黑色变为白色。
此外，该句：
transition: all 1.9s;
效果上，和color，没有区别。
transition: color 1.9s;
怎么样，是不是很简单？！
但是效果却是一级棒！
这也是为什么我在53中说
“HTML时代已经来临，Flash已经日落西山”
很残酷，却很现实。
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 交作业{:10_256:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接动画演示</title>
<style type="text/css">
body{
margin-top: 333px;
text-align: center;
}
span{
color: red;
font-size: 66px;
font-family: "Comic Sans MS", cursive;
}
a{
color: #FFF;
font-size: 66px;
text-decoration: none;
font-family: "Comic Sans MS", cursive;
transition: all 2.6s;
}
a:hover{
color: #000;
}
</style>
</head>
<body>
<span>此处有惊喜-->></span><a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</body>
</html> 不错不错~感觉这个还是不错哦 jackche0214 发表于 2017-2-21 10:40
不错不错~感觉这个还是不错哦
{:10_303:}
那还不订阅：HTML5 - 庖丁解牛 不二如是 发表于 2017-2-21 11:15
那还不订阅：HTML5 - 庖丁解牛
已经订阅了~感觉要学和想学的东西好多啊 jackche0214 发表于 2017-2-21 16:53
已经订阅了~感觉要学和想学的东西好多啊
没事，别着急，一步一步来。
有不会的尽管开头！
虽然我可能会答复不上来{:10_278:}。
但我一定尽力去探索解决办法～ 交作业。。。。
这个，动画不会上传啊。。。。 come on~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接动画演示</title>
<style type="text/css">
body {
text-align: center;
margin-top:333px;
}
a {
font-size: 55px;
text-decoration: none;
color:white;
transition: all 1.9s;
/* 淡入淡出 */
}
a:hover{
color:black;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html" target="_thank">小天才养殖场，快来闯一闯</a>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>超链接动画演示</title>
<style type="text/css">
body{
margin-top: 333px;
text-align: center;
}
a{
color: #fff;
font-size: 66px;
text-decoration: none;
font-family: STFangsong;
transition: all 1.9s;
}
a:hover{
color: #000;
}
</style>
</head>
<body>
<a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
</body>
</html>
页:
[1]