CSS3动画效果，鼠标滑入时，文字放大缩小_鼠标碰到字体慢慢变大缩小css_qq_26465813的博客-程序员宅基地

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3动画效果</title>
<style type="text/css">
body{
color: #333;
font-family: 'Terminal Dosis', Arial, sans-serif;
font-size: 13px;
}
a{
color:#fff;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
.menu{
padding:0;
margin:20px auto;
width:500px;
}
.menu li{
width:500px;
height:100px;
overflow:hidden;
display:block;
background:#fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
border-left: 10px solid #000;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.menu li:last-child{margin-bottom: 0px;}
.menu li a{
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #333;
position:relative;
}
.content{
position: absolute;
}
.main{
font-size: 30px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.sub{
font-size: 14px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.menu li:hover{
border-color: #fff004;
background: #000;
}
.menu li:hover .main{
color: #fff004;
font-size: 14px;
}
.menu li:hover .sub{
color: #fff;
font-size: 30px;
}
</style>
</head>

<body>
<ul class="menu">
<li>
<a href="#">
<div class="content">
<h2 class="main">Study hard</h2>
<h3 class="sub">Learning this bottomless, forward Mo mo</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="content">
<h2 class="main">Struggle</h2>
<h3 class="sub">Stop fighting, and life will stop</h3>
</div>
</a>
</li>

</ul>
</body>
</html>

本文链接：https://blog.csdn.net/qq_26465813/article/details/70329227

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2016年，你要学习这些移动开发技术_限量发行x的博客-程序员宅基地

2016年，移动开发似乎走过它辉煌的顶点，开始走向平淡。其中的预兆有初级和实习职位的减少，投机性移动创业公司融资困难，人们的注意力被AI、VR、直播等技术所吸引，移动开发光环不再。也许再过几年，它会和其它开发职位一样，不再是转岗的首选、高薪的代名词。虽然光环消失会让从业者有些失落，不过对于浮躁的移动开发行业来说，也许这是一件好事，真正优秀的技术和人才会沉淀下来，得到应有的评价。在2

Socket 阻塞模式和非阻塞模式_启舰的博客-程序员宅基地

Windows套接字在阻塞和非阻塞两种模式下执行I/O操作。在阻塞模式下，在I/O操作完成前，执行的操作函数一直等候而不会立即返回，该函数所在的线程会阻塞在这里。相反，在非阻塞模式下，套接字函数会立即返回，而不管I/O是否完成，该函数所在的线程会继续运行。在阻塞模式的套接字上，调用任何一个Windows Sockets API都会耗费不确定的等待时间。图所示，在调用recv()函数时，发生

Android 11 下 Toast 变化，不能自定义 Toast 了？_Flywith24的博客-程序员宅基地

前言Android 11（R）是2020年的下一代 Android，Google 于上周发布了 Android 11: Developer Preview 3在 Android 11 T...

[转] 浏览器-启动本地程序_albertbanda的博客-程序员宅基地

转载自：https://blog.csdn.net/anleng6817/article/details/101127353使用自定义的协议打开应用程序编写程序将test.exe保存到c盘根目录 #include <stdio.h> int main(int argc, char** argv) { int i; printf("hello world!\n"); for (i = 0; i < argc; ++i.

常见的编码错误，再不避免就完了！_「已注销」的博客-程序员宅基地

全文共1960字，预计学习时长6分钟图源：Unsplash犯错乃人之常情。然而，开发人员所犯的许多错误是可以避免的。如果能避免本文提到的这些常见错误，就能写出更好、更简洁的代码。这不...

Matlab画平滑曲线的两种方法_Daringoo的博客-程序员宅基地

自然状态下，用plot画的是折线，而不是平滑曲线。有两种方法可以画平滑曲线，第一种是拟合的方法，第二种是用spcrv，其实原理应该都一样就是插值。下面是源程序，大家可以根据需要自行选择，更改拟合的参数。clc,clear;a = 1:1:6; %横坐标b = [8.0 9.0 10.0 15.0 35.0 40.0]; %纵坐标plot(a, b, 'b'); %自然状态