有趣的javascript && css

最新推荐文章于 2019-07-22 12:05:01 发布

巴黎没有欧莱雅你也不值得被拥有

最新推荐文章于 2019-07-22 12:05:01 发布

阅读量180

点赞数 1

分类专栏：个人项目经验工作笔记

本文链接：https://blog.csdn.net/lp15203883326/article/details/86649757

版权

个人项目经验同时被 2 个专栏收录

71 篇文章 3 订阅

订阅专栏

工作笔记

47 篇文章 0 订阅

订阅专栏

例子自行百度～

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示和注释
提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

标签定义及使用说明
使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。

opacity  结合使用会碰出很奇特的效果噢～

借用下菜鸟教程的例子吧～

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	0%   {top:0px;opacity:1;}
	25%  {top:200px; opacity:0.5;}
	75%  {top:50px opacity:0.5;}
	100% {top:100px; opacity:1;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px;}
	25%  {top:200px;}
	75%  {top:50px}
	100% {top:100px;}
}
</style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

css滚动条选择器：

  ::-webkit-scrollbar {
      width: 12px;
    }
    ::-webkit-scrollbar-track {
      background-color: #ccc;
      border-left: 1px solid #ccc;
    }
    ::-webkit-scrollbar-thumb {
      background-color: yellow;
    }
    ::-webkit-scrollbar-thumb:hover {
      background-color: #aaa;
    }
    ::-webkit-scrollbar-thumb:active{
      background-color:pink;
    }

巴黎没有欧莱雅你也不值得被拥有

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有趣的javascript && css

例子自行百度～ setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。...
复制链接

扫一扫