设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 5 4 - 这应该是你见过最“小巧精致灵活“的一个CSS ...
返回列表 发新帖
查看: 3684|回复: 10

[庖丁解牛] 0 0 5 4 - 这应该是你见过最“小巧精致灵活“的一个CSS动画 - 0.0

[复制链接]
不二如是
发表于 2017-2-21 10:06:15 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:34 编辑

在53铺垫了一段很有意义的吹水！

现在就要进入正题，考虑再三，如果一下子就让可爱单纯的鱼油：

看到些过于性感经验丰富的xxx，怕你身体扛不住


So，先搞一个最纯粹，最底层，不带任何技巧的一个姿势！

俗名叫：传教士体位


(哈哈，就知道你得看！欲知姿势详情，请点这里)

好了，安利到此结束，本帖主要基于超链接制作一个动画案例。

既然是超链接，怎么少的了广告呢？

小天才养殖场，快来闯一闯


预知更多的超链接样式，请点这里

基本代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>超链接动画演示</title>
  6.     <style type="text/css">

  8.     </style>
  9. </head>
  10. <body>
  11.     <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
  12. </body>
  13. </html>
复制代码

效果图：
Snip20170221_506.png


接下来就是，妙手回春的时刻！

设置一些样式，默认显示为无下划线的白色文字。

鼠标指针经过时切换为黑色，放大字体，横向居中，纵向333px。
  1.       body{
  2.             margin-top: 333px;
  3.             text-align: center;
  4.         }
  5.         a{
  6.             color: #FFF;
  7.             font-size: 66px;
  8.             text-decoration: none;
  9.             font-family: STFangsong;
  10.         }
  11.         a:hover{
  12.             color: #000;
  13.         }
复制代码

效果图：
1.gif


现在我们要添加一些最简单的动画效果。

当鼠标指针滑过链接时，不会立即变色，而是从白色慢慢过渡到黑色。
  1.   a{
  2.             transition: all 1.9s;
  3.         }
复制代码

效果图：
1.gif


哇塞！


有没有，一下就B格很高了呢？！

设置transtition属性，指定了超链接的过渡动画。

属性设置为all，表示当超链接元素中任何属性发生变化，都以动画形式呈现。

动画时间设置为1.9s。

鼠标指针移到超链接，链接在1.9s内从白色变为黑色。

鼠标指针移出超链接，链接在1.9s从黑色变为白色。

此外，该句：
  1. transition: all 1.9s;
复制代码


效果上，和color，没有区别。
  1. transition: color 1.9s;
复制代码


怎么样，是不是很简单？！

但是效果却是一级棒！

这也是为什么我在53中说

“HTML时代已经来临，Flash已经日落西山”


很残酷，却很现实。


这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅 ）


官方 Web 课程：

评分

参与人数 1贡献 +3 收起 理由
睦ちゃん她爹 + 3 感谢楼主无私奉献！

查看全部评分

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

shishunfu
发表于 2017-5-4 11:21:16 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>超链接动画演示</title>
  6.         <style type="text/css">
  7.                 body{
  8.                         margin-top: 333px;
  9.                         text-align: center;
  10.                 }
  11.                 span{
  12.                         color: red;
  13.                         font-size: 66px;
  14.                         font-family: "Comic Sans MS", cursive;
  15.                 }
  16.                 a{
  17.                         color: #FFF;
  18.                         font-size: 66px;
  19.                         text-decoration: none;
  20.                         font-family: "Comic Sans MS", cursive;
  21.                         transition: all 2.6s;
  22.                 }
  23.                 a:hover{
  24.                         color: #000;
  25.                 }
  26.         </style>
  27. </head>
  28. <body>
  29.         <span>此处有惊喜-->></span><a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
  30. </body>
  31. </html>
复制代码
0042超链接动画演示.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-4 21:38
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

jackche0214
发表于 2017-2-21 10:40:07 | 显示全部楼层
不错不错~感觉这个还是不错哦
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-2-21 11:15:19 | 显示全部楼层
jackche0214 发表于 2017-2-21 10:40
不错不错~感觉这个还是不错哦


那还不订阅：HTML5 - 庖丁解牛
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

jackche0214
发表于 2017-2-21 16:53:49 | 显示全部楼层
不二如是 发表于 2017-2-21 11:15
那还不订阅：HTML5 - 庖丁解牛

已经订阅了~感觉要学和想学的东西好多啊
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-2-21 17:10:42 | 显示全部楼层
jackche0214 发表于 2017-2-21 16:53
已经订阅了~感觉要学和想学的东西好多啊

没事，别着急，一步一步来。

有不会的尽管开头！

虽然我可能会答复不上来。

但我一定尽力去探索解决办法～
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-7-27 05:38:23 | 显示全部楼层
交作业。。。。
这个，动画不会上传啊。。。。
054.jpg

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-7-27 06:22

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
不二如是 + 5 + 5 支持楼主！

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-11-3 18:46:44 | 显示全部楼层
come on~
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>超链接动画演示</title>
  6. <style type="text/css">
  7. body {
  8.         text-align: center;
  9.         margin-top:333px;
  10. }
  11. a {
  12.         font-size: 55px;
  13.         text-decoration: none;
  14.         color:white;
  15.         transition: all 1.9s;
  16.         /* 淡入淡出 */
  17. }
  18.         a:hover{
  19.                 color:black;
  20.         }
  21. </style>
  22. </head>
  23. <body>
  24.     <a href="http://bbs.fishc.com/forum-337-1.html" target="_thank">小天才养殖场，快来闯一闯</a>
  25. </body>
  26. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-10 12:28:51 | 显示全部楼层
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>超链接动画演示</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin-top: 333px;
  9.             text-align: center;
  10.         }
  11.         a{
  12.             color: #fff;
  13.             font-size: 66px;
  14.             text-decoration: none;
  15.             font-family: STFangsong;
  16.             transition: all 1.9s;
  17.         }
  18.         a:hover{
  19.             color: #000;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场，快来闯一闯</a>
  25. </body>
  26. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-19 15:18

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表