天天财汇 购物 网址 万年历 小说 | 三峰软件 小游戏 视频
TxT小说阅读器
↓小说语音阅读,小说下载↓ 		一键清除系统垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放,产品展示↓
首页 淘股吧 股票涨跌实时统计 涨停板选股 股票入门 股票书籍 股票问答 分时图选股 跌停板选股 K线图选股 成交量选股 [平安银行]
股市论谈 均线选股 趋势线选股 筹码理论 波浪理论 缠论 MACD指标 KDJ指标 BOLL指标 RSI指标 炒股基础知识 炒股故事
商业财经 科技知识 汽车百科 工程技术 自然科学 家居生活 设计艺术 财经视频 游戏--
  天天财汇 -> 设计艺术 -> 纯html5+css能写出什么惊人的效果？ -> 正文阅读

[设计艺术]纯html5+css能写出什么惊人的效果？

[收藏本文] 【下载本文】
鄙人最近学习css，发现纯html5+css可以实现这般效果： 一棵跳舞的树 纯HTML5+CSS3实现一棵自己跳舞的树 [图片] 想请大家晒一下自己…


微信官网仿写 ↑


将这个版式换成旅行网站主题后 ↑


移动端响应式效果 ↑
微信官网首页，简约干净，能学习写好这个首页，就能掌 握HTML网页设计前端盒子的布局、嵌套，及css效果的 使用... 微信官网首页主要有以下几个需要关注的点：
1. 通过@media写需要适应PC、手机版的部分盒子的 css，将PC版的固定尺寸改为移动端的宽度百分比从而做到“响应式”；
2. space around的应用，可以使弹性布局盒子内部（横轴）方向上均匀排列每个元素；
3.鼠标划过小手标志，运用cursor: pointer;
4.hover的应用，鼠标滑过可改变背景色；
5.鼠标划过盒子缩放1.2倍，增加过渡时间让动画缓入更 加舒适；
6.本套源码已共享在下方，预览及讲解视频请查看：https://www.zhihu.com/zvideo/1497705066815086592
更新：【禁止商用】发现有很多开发者拿这套源码去部署建站，在不同的测试服务器、域名中上线测试，再次强调，仅供学习，禁止商用，如造成侵权行为后果自负~ 你都能部署到服务器就不能自己写一套吗？/滑稽

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="WebViewport" content="width=100%,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />  
<!-- 此源码由 http://www.psdhtml.cn/ 大设计师论坛独家编写，禁止转售 -->
<title>这是一个首页</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}    /* 通配符 删除浏览器默认值 */ 
ul {
	list-style:none;   /* 取消项目符号样式 */ 
}
body {
	overflow-x:hidden;     
	background-color:rgba(250,250,250,1);
	font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;/* 字体集 */
}
@media (min-width: 601px){ /* >=601的设备*/ 


.top_info {
  width: 100%;
  height: 600px;
  position: relative;
  
}

.top_info:after {
	background-color: #2aae67;
	content: '';
	width: 160%;
	height: 650px;
	position: absolute;
	left: -30%;
	top: 0;
	z-index: -1;
	border-radius: 0 0 50% 50%;
}
.top_info .top-text {
	height: 130px;
	width: 620px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	font-size: 0.87em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #f2f2f2;
	line-height: 32px;
	color: #f2f2f2;
	padding-top: 18px;
	text-align: justify;

}
.top_info .round_div_all {
	height: 120px;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 5px;
	display: -webkit-flex;/* 定义内部为弹性布局 */
	display: flex;    /* 定义内部为弹性布局 */
	flex-wrap: wrap;    /* 让弹性盒元素在需要的时候拆列 */
	justify-content: space-around;    /* （横轴）方向上均匀排列每个元素 */
}
.mian01 {
	width: 850px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 40px;
	padding-bottom: 40px;
	overflow: hidden;     /* 防止塌陷 */
	display: -webkit-flex;/* 定义内部为弹性布局 */
	display: flex;    /* 定义内部为弹性布局 */
	flex-wrap: wrap;    /* 让弹性盒元素在需要的时候拆列 */
	justify-content: space-around;    /* （横轴）方向上均匀排列每个元素 */
}
.square_div {
	float: left;
	height: 160px;
	width: 180px;
	margin-top: 30px;
	border-radius: 6px;
	background-color: #ffffff;
	box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/* 设置一个阴影 颜色 透明度 */
	cursor: pointer;   /* 鼠标在此处的效果为“小手”样式 */
	margin-right: auto;
	margin-left: auto;
}
}
@media (max-width: 600px){ /*响应式 <=600的设备使用如下css样式表 */


.top_info {
  width: 100%;
  height: 750px;
  background-color: #2aae67;
  border-bottom-left-radius: 60% 15%;
  border-bottom-right-radius: 60% 15%;
}
.top_info .top-text {
	height: 130px;
	width: 80%;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	font-size: 0.87em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #f2f2f2;
	line-height: 32px;
	color: #f2f2f2;
	padding-top: 18px;
	text-align: justify;

}
.top_info .round_div_all {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 40px;
	display: -webkit-flex;/* 定义内部为弹性布局 */
	display: flex;    /* 定义内部为弹性布局 */
	flex-wrap: wrap;    /* 让弹性盒元素在需要的时候拆列 */
	justify-content: space-around;    /* （横轴）方向上均匀排列每个元素 */
}
.mian01 {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
	padding-top: 40px;
	padding-bottom: 40px;
	overflow: hidden;     /* 防止塌陷 */ 
	display: -webkit-flex;/* 定义内部为弹性布局 */
	display: flex;    /* 定义内部为弹性布局 */
	flex-wrap: wrap;    /* 让弹性盒元素在需要的时候拆列 */
	justify-content: space-around;    /* （横轴）方向上均匀排列每个元素 */
}
.square_div {
	float: left;
	height: 142px;
	width: 160px;
	margin-top: 30px;
	border-radius: 6px;
	background-color: #ffffff;
	box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/* 设置一个阴影 颜色 透明度 */
	cursor: pointer;   /* 鼠标在此处的效果为“小手”样式 */
	margin-right: auto;
	margin-left: auto;
}
}

.top_info .login {
	height: 22px;
	width: 45px;
	margin-top: 1%;
	float: left;
	margin-left: 91%;
	font-size: 0.9em;
	letter-spacing:3px;
}
.top_info .logo {
	height: 64px;
	width: 200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 120px;
}
.top_info .logo img:hover {
opacity : 0.8;
}
.top_info .round_div_all .round_div {
	float: left;
	height: 110px;
	width: 110px;
	margin-top: 30px;
	border-radius: 50%;
	background-color: #39b472;
	cursor: pointer;   /* 鼠标在此处的效果为“小手”样式 */
	margin-left: 25px;
	margin-right: 25px;
}
.top_info .round_div_all .round_div:hover {

	background-color: #4aba7e;
	transition-duration: 0.3s;/* 缩放的过渡时间 */
}
.top_info .round_div_all .round_div .r-s01 {
	height: 40px;
	width: 40px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
.top_info .round_div_all .round_div .r-s02 {
	height: 25px;
	width: 90px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	font-size: 0.8em;
	color: #f2f2f2;
	text-align: center;
}




.square_div:hover {
    -webkit-transform:scale(1.11,1.11);
    -moz-transform:scale(1.11,1.11);
    -transform:scale(1.11,1.11);
	transition-duration: 0.5s;/* 缩放的过渡时间 */ 
}
.square_div .s-s01 {
	height: 43px;
	width: 43px;
	margin-top: 38px;
	margin-right: auto;
	margin-left: auto;
}
.square_div .s-s02 {
	height: 25px;
	width: 120px;
	margin-top: 18px;
	margin-right: auto;
	margin-left: auto;
	font-size: 0.9em;
	color: #1a1a1a;
	text-align: center;
}
.down {
	background-color: #ffffff;
	text-align: center;
	height: 50px;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 40px;
	margin-top: 40px;
}
.f82 {
	font-size: 0.82px;
	color: #4c4c4c;
	line-height: 28px;
	letter-spacing:1px;
}
.f75 {
	font-size: 0.75px;
	color: #a0a2a0;
	line-height: 30px;
	letter-spacing:1px;
}


a:link {
	color: #ffffff;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #ffffff;
}
a:hover {
	text-decoration: none;
	color: #ececec;
}
a:active {
	text-decoration: none;
}
.banquan {
	height: 36px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #f2f2f2;
	background-image: url(http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg);
	background-color: #FFF;
}
</style>
</head>

<body>
<!-- 此源码由 http://www.psdhtml.cn/ 大设计师论坛独家编写，禁止转售 -->
<div class="top_info">
  <div class="login"><a href="#">登录</a></div>
  <div class="logo"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/logo.png" width="200" height="64"></a></div>
  <div class="top-text">我们支持跨通信运营商、跨操作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“圈子”、”公众平台“、”语音记事本“等服务插件。</div>
  <div class="round_div_all">
  <div class="round_div">
    <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon01.png" width="40" height="40"></a></div>
    <div class="r-s02">Android</div>
  </div>
  
  <div class="round_div">
    <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon02.png" width="40" height="40"></a></div>
    <div class="r-s02">IOS</div>
  </div>
  
  <div class="round_div">
    <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon03.png" width="40" height="40"></a></div>
    <div class="r-s02">Windows</div>
  </div>
  
  <div class="round_div">
    <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon04.png" width="40" height="40"></a></div>
    <div class="r-s02">Harmony OS</div>
  </div>
  </div>
</div>

<div class="mian01">

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_01.svg" width="43" height="43"></div>
    <div class="s-s02">We支付</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_02.svg" width="43" height="43"></div>
    <div class="s-s02">公Z号</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_03.svg" width="43" height="43"></div>
    <div class="s-s02">小程序</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_04.svg" width="43" height="43"></div>
    <div class="s-s02">视频号助手</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_05.svg" width="43" height="43"></div>
    <div class="s-s02">小游戏</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_06.svg" width="43" height="43"></div>
    <div class="s-s02">小商店</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_07.svg" width="43" height="43"></div>
    <div class="s-s02">表情开放平台</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_08.svg" width="43" height="43"></div>
    <div class="s-s02">搜一搜开放平台</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_09.svg" width="43" height="43"></div>
    <div class="s-s02">红包封面</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_10.svg" width="43" height="43"></div>
    <div class="s-s02">对话开放</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_11.svg" width="43" height="43"></div>
    <div class="s-s02">服务平台</div>
</div>

<div class="square_div">
    <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_12.svg" width="43" height="43"></div>
    <div class="s-s02">在线学堂</div>
</div>
</div>

<footer class="down"><span class="f82">We安全 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引</span><br>
<span class="f75">Copyright ? 1998-2022 All Rights Reserved.</span></footer>
<div class="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg" width="1000" height="36"></a></div>
</body>
<!-- 此源码由 http://www.psdhtml.cn/ 大设计师论坛独家编写，禁止转售 -->
</html>

【更多相关可以查看下方我的网页设计源码专栏 ↓】
前言
前两天翻资料，找到了刚开始学习前端的时候学习的一个小案例，用css去画一个转动的表盘，也不知道大家都写过没有，样子如下图所示


今天把这个小案例分享给大家，这个效果原案例是完全用css实现的，因为表针转动都有规律可循，设置一个定时的动画就行，我为了简化代码量，并且可以获取当前的时间，所以用js优化了一下，因为案例很小，所以就不用框架了，直接原生走起，由于这种简单的文章主要面向初学者，所以会说的详细一点
开发初始化
第一步，找一个文件夹，建立 index.html ， 然后引入一个 style.css 并初始化一些样式


表盘制作
接下来我们来制作表盘
面板
首先是面板部分，面板的html部分我们就只用一个节点就够了，其他都用css来完成

  <div id="watch">
    <!-- 表盘 -->
    <div class="frame-face"></div>
  </div>

首先我们给表盘一个基础样式来确定基本结构，再加点渐变和阴影，制造一点立体感

#watch .frame-face {
  position: relative;
  width: 30em;
  height: 30em;
  margin: 2em auto;
  border-radius: 15em;
  background: -webkit-linear-gradient(top, #f9f9f9, #666);
  background: -moz-linear-gradient(top, #f9f9f9, #666);
  background: linear-gradient(top, #f9f9f9, #666);
  box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);
}



之后我们利用伪类元素，画一个径向渐变，来营造一个层次感，让表盘的立体感更加强烈

#watch .frame-face:before {
  content: '';
  width: 29.4em;
  height: 29.4em;
  border-radius: 14.7em;
  position: absolute;
  top: .3em;
  left: .3em;
  background: -webkit-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
  background: -moz-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
}



这样看着还是不太顺眼，我们再加一个伪类，制作变盘的主面板，通过阴影和渐变造成的对比效果，让这个表盘看起来更真实

#watch .frame-face:after {
  content: '';
  width: 28em;
  height: 28em;
  border-radius: 14.2em;
  position: absolute;
  top: .9em;
  left: .9em;
  box-shadow: inset rgba(0, 0, 0, .2) .2em .2em 1em;
  border: .1em solid rgba(0, 0, 0, .2);
  background: -webkit-linear-gradient(top, #fff, #ccc);
  background: -moz-linear-gradient(top, #fff, #ccc);
  background: linear-gradient(top, #fff, #ccc);
}



刻度
表盘的周围有一个个的小刻度点，让我们可以知道现在的具体时间，这里我们给表盘设置60个刻度点，dom节点我们先写一个刻度点的容器，因为刻度点太多了，我们稍后用js生成

<!-- 刻度 -->
    <ul id="minute-marks"></ul>

来一个基础的样式

#minute-marks li {
  display: block;
  width: 0.2em;
  height: 0.6em;
  background: #929394;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.4em 0 0 -0.1em;
}

这里我们通过 transform 调整每个刻度点的位置达成相应的效果，整点的刻度相比其他的要更突出，所以我们要找出整点的刻度给他加一个突出的效果

window.onload = function () {
  // 生成刻度
  let markWrap = document.getElementById('minute-marks')

  for (let index = 0; index < 60; index++) {
    let markItem = document.createElement('li')
    markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)";
    if (index % 5 == 0) {
      markItem.style.width = "0.3em";
      markItem.style.height = "1em";
    }
    markWrap.appendChild(markItem)
  }
}



这里我们也可以酌情考虑增加一些刻度的数字标识

<ul id="digits">
  <li>3</li>
  <li>6</li>
  <li>9</li>
  <li>12</li>
</ul>

#digits {
    width: 30em;
    height: 30em;
    border-radius: 15em;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -15em;
}
#digits li {
  font-size: 1.6em;
  display: block;
  width: 1.6em;
  height: 1.6em;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1.6em;
  text-align: center;
  margin: -.8em 0 0 -.8em;
  font-weight: bold;
}

#digits li:nth-child(1) {
  transform: translate(7em, 0)
}

#digits li:nth-child(2) {
  transform: translate(0, 7em)
}

#digits li:nth-child(3) {
  transform: translate(-7em, 0)
}

#digits li:nth-child(4) {
  transform: translate(0, -7em)
}



这里我们直接把指针转动的轴中心点也给做上

#digits:before {
  content:'';
  width:1.6em;
  height:1.6em;
  border-radius:.8em;
  position:absolute;
  top:50%; left:50%;
  margin:-.8em 0 0 -.8em;
  background:#121314;
}
#digits:after {
  content:'';
  width:4em;
  height:4em;
  border-radius:2.2em;
  position:absolute;
  top:50%; left:50%;
  margin:-2.1em 0 0 -2.1em;
  border:.1em solid #c6c6c6;
  background:-webkit-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:-moz-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
}



指针开发
接下来我们进行表盘指针的开发
指针这里我们给准备三个dom，分别是时针、分针和秒针

<!-- 指针 -->
    <div class="hours-hand"></div>
    <div class="minutes-hand"></div>
    <div class="seconds-hand"></div>

时针开发
时针主体部分分为针柱和针尖，针柱方面就一个矩形，针尖可以用一个半圆和一个三角形组成

#watch .hours-hand {
    width:.8em;
    height:7em;
    border-radius:0 0 .9em .9em;
    background:#232425;
    position:absolute;
    bottom:50%; left:50%;
    margin:0 0 -.8em -.4em;
    box-shadow:#232425 0 0 2px;
    transform-origin:0.4em 6.2em;
    transform:rotate(-25deg);
}
#watch .hours-hand:before {
    content:'';
    background:inherit;
    width:1.8em;
    height:.8em;
    border-radius:0 0 .8em .8em;
    box-shadow:#232425 0 0 1px;
    position:absolute;
    top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
    content:'';
    width:0; height:0;
    border:.9em solid #232425;
    border-width:0 .9em 2.4em .9em;
    border-left-color:transparent;
    border-right-color:transparent;
    position:absolute;
    top:-3.1em; left:-.5em;
}



注意，这里我们用了 transform-origin 这个属性，这个属性是用来设置rotate旋转基准点的，dom旋转的时候将会以这个点进行旋转，如果不设置的话将会以自身中心点位中心旋转
分针开发
为了做一个区分，我们不同的指针给一个不同的样式，分针的话就一个矩形就行

#watch .minutes-hand {
    width:.8em;
    height:12.5em;
    border-radius:.5em;
    background:#343536;
    position:absolute;
    bottom:50%; left:50%;
    margin:0 0 -1.5em -.4em;
    box-shadow:#343536 0 0 2px;
    transform-origin:0.4em 11em;
}



秒针开发
秒针由三部分组成，分别是针尾的圆角矩形，一个和中心点重叠的圆形，还有一个很长的针尖，也可以通过圆角来做

/* 秒针 */
#watch .seconds-hand {
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
}
#watch .seconds-hand:after {
  content:'';
  width:1.4em;
  height:1.4em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}



让针转动起来
上面我们开发了表盘和指针的基本样式，下面我们就让针来转动起来，刚才写css的时候，我们已经知道了，指针的位置是通过transform转动了一定的角度来实现的，所以我们要实现指针的运动，只要定时去改动这个角度就可以了

  setInterval(function () {
    var time = new Date();
    var hour = time.getHours()
    var minute = time.getMinutes();
    var second = time.getSeconds();
    var hournum;
    if (hour > 12) {
      hournum = ((hour - 12) + minute / 60) * 30;
    } else {
      hournum = (hour + minute / 60 * 100) * 30;
    }
    var minnum = (minute + second / 60) * 6 + second / 60;
    var sennum = second * 6;
    document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)"
    document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)"
    document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)"
  }, 1000);

这样就大功告成了


数字表开发
指针虽然也很直观，但总是没有数字直观准确，所以我们可以再加一个数字小表盘。数字表盘更简单了，我们获取一下当前的时分秒，定时刷新就好了，这里需要主机柱子表盘放的层级，不可盖住指针

<!-- 数字表盘 -->
    <div class="digital-wrap">
      <ul class="digit-hours"></ul>
      <ul class="digit-minutes"></ul>
      <ul class="digit-seconds"></ul>
    </div>

#watch .digital-wrap {
  width:9em;
  height:3em;
  border:.1em solid #222;
  border-radius:.2em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
  background:#4c4c4c;
  background:-webkit-linear-gradient(top, #4c4c4c,#0f0f0f);
  background:-moz-linear-gradient(top, #4c4c4c, #0f0f0f);
  background:-ms-linear-gradient(top, #4c4c4c,#0f0f0f);
  background:-o-linear-gradient(top, #4c4c4c,#0f0f0f);
  background:linear-gradient(to bottom, #4c4c4c,#0f0f0f);
}
#watch .digital-wrap ul {
  float:left;
  width:2.9em;
  height:3em;
  border-right:.1em solid #000;
  color:#ddd;
  font-family:Consolas, monaco, monospace;
  text-align: center;
  line-height: 3em;
}
#watch .digital-wrap ul:last-child {width: 3em; border:none }

// 接到上面指针转动js后面
if(hour<10){
    hour="0"+parseInt(hour);
}
if(minute<10){
    minute="0"+parseInt(minute);
}
if(second<10){
    second="0"+parseInt(second);
}
document.getElementsByClassName("digit-hours")[0].innerHTML=hour;
document.getElementsByClassName("digit-minutes")[0].innerHTML=minute;
document.getElementsByClassName("digit-seconds")[0].innerHTML=second;



这样就大功告成了。
只用css能玩出什么花样？ - 逝者如斯的回答
>>>>>>>>>>>>>>>>>>>>>>2016.2.11一更<<<<<<<<<<<<<<<<<<<<<<<<<<<
可以看看这个回答，30种濒危动物那个就做的挺好的
先不说3d效果，就论一个平面上的话，
只用一行div，无js，就可以画一幅世界名画蒙娜丽莎，CSS博大精深→ _→
Mona Lisa with pure CSS


虽然作者不是手写的，但至少另一个角度说明css可以做到这样的效果，画画不只有canvas，svg等。。。
下面有小伙伴提到了刚出来时很火的“纯CSS技术画出30个濒危动物图片”，这里一并列出并给出网址，
“30个物种，30中碎片拼图。”点开这场展览的网站主页，空灵的背景音乐引入了颜色饱满的多边形图案，配合着30种濒危动物的文字介绍。而之所以叫“30片三角”，是因为James起初在摆弄编程的时候，第一幅成型的作品“夏威夷乌鸦”，刚刚好是30片三角形拼接而成。
但这次展览拼的不是技术或着艺术。伴随30只生命样貌的切换，一幅幅几何状组合的破碎，设计师试图展现过去10年来栖息地遭受破坏是如何把动物推向灭绝的边缘——曾是 2014 年巴西世界杯吉祥物的三带犰狳（ Three-Banded Armadillo of Brazil）数量减少了 30%，新几内亚岛上的原针鼹鼠（ Long-Beaked Echidna ）因人类的狩猎而在过去 35-40 年间减少近 80%。
官方网址：
30个CSS碎片拼图，30种濒临灭绝动物
(官网需要fanqiang查看)
无论是背景音的选用，还是动物样貌之间的切换，抑或是细节处的动效展现，再加上主题的升华，有技术有内涵，这是一部成功的作品。


可以闲来无事画画小动物：


打打灰机：
Airplane (Pure CSS)


CSS Faces


这些都是静止的，想想再加上各种动画，也可以做出很多效果出来的。
CSS3D苹果笔记本动画：
这又是一款超酷的CSS3 3D动画效果，它是一款带有3D视觉效果，并且可以360度旋转的macbook air。这款CSS3 3D动画的笔记本底部有一个逼真的投影，可以跟随图片一起转动，从而凸显其3D效果，是一款很不错的CSS3 3D动画特效
CSS3 3D 苹果笔记本动画DEMO演示


还有
CSS3扇形动画菜单DEMO演示


HTML5超级玛丽体验:
HTML53????êà?


>>>>>>>>>>>>>>>>>>>>>>2016.3.5三更<<<<<<<<<<<<<<<<<<<<<<<<<<<
我们知道js在web方面能做很多事
有一句话说：限制你的可选项，会让你重新评估手头上已有的工具。
如果只让你用css，能完成某项任务吗？而这个任务中，只用一个div，全靠css属性来实现效果，可以吗？
可以看看翻译的一篇
基于单个 Div 的 CSS 绘图 - 前端外刊评论 - 知乎专栏：
“为了得到更大的挑战，探索 CSS 的潜力，我给自己定了这个限制，只是用一个 Div。不能直接买一只绿色的笔（添加更多的 Div），我要做的就是尽其所能地结合 CSS 属性来实现我的目的。”
以下这些都是基于一个div所做的：
A Single Div


>>>>>>>>>>>>>>>>>>>>>>2016.7.12四更<<<<<<<<<<<<<<<<<<<<<<<<<<<
做一个动态的旋转木马给妹纸，立马少女心泛滥有木有(星星眼)：
Horse ride carousel flat design by Lina for Zajno (3D animated with CSS3)


css可以用来做图像，做完图像还可以用css添加动画，能做成什么样还要看你的想象力了。再加上合适的主题，就能做出一件成功的作品。
还有动态的车子：
Bike Season


上面两个例子来自can you code this ui
https://stories.uplabs.com/can-you-code-this-ui-4530315290a1#.65da2m9rs
css可以用来做图像，做完图像还可以用css添加动画，能做成什么样还要看你的想象力了。再加上合适的主题，就能做出一件成功的作品。
老鱼带你来欣赏纯CSS实现的特效有哪些！
CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。
我精选5个使用纯CSS实现的文字炫酷效果！
效果欣赏一. 渐变文字效果
该效果主要利用background-clip:text配合color实现渐变文字效果 首先了解background-clip: text;的意思：以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。



<html>
    <link rel="stylesheet" href="./css/neno-text-style.css">
    <body>
        <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
    </body>
</html>

二.彩虹文字效果（跑马灯）
该效果也是利用background-clip:text和线性渐变属性linear-gradient实现，通过设置区域颜色值实现了彩虹文字的效果。



html>
    <head>
        <link rel="stylesheet" href="./css/rainbow-color-text-style.css">
    </head>
    <body>
        <div class="text">【前端实验室】分享前端最新、最实用前端技术</div>
    </body>
</html>

三. 发光文字效果
该效果主要利用text-shadow属性实现。text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。



<html>
    <head>
        <link rel="stylesheet" href="./css/neno-text-style.css">
    </head>
    <body>
        <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
    </body>
</html>

四.打字机效果
该效果主要是通过改变容器的宽度实现的。



<html>
    <head>
        <link rel="stylesheet" href="./css/typing-style.css">
    </head>
    <body>
        <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div>
</html>

五.故障风格文字效果
该动画效果比较复杂，主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等，但就是没有JS~



<html>
    <head>
        <link rel="stylesheet" href="./css/fault-style.css">
    </head>
    <body>
        <div class="text" data-text="【前端实验室】分享前端最新、最实用前端技术">
            【前端实验室】分享前端最新、最实用前端技术
        </div>
        <body>
</html>

具体实现可以看这篇文章~
2021年12月9日更新
没想到评论和私信好多人跟我要源码...
因为CSS animation动画代码有点长就没全放出来，这里给大家附上Sample链接！
最后再送上一份CSS架构系统精讲视频
你是否觉得自己写出来的CSS 代码臃肿、难维护、难复用？
一个好的 CSS 架构是具有良好的可扩展性


我是老鱼，一名致力于在技术道路上的终身学习者、实践者、分享者！
如果我的内容能对你有所帮助，关注 @前端实验室 跟我一起学习~
一个赞同和喜欢鼓励一下下~
贴个自己做的：
Cats


用纯CSS实现图片的即不变形拉伸，同时又占满容器宽度的布局。
几乎所有的网站在实现这样的布局时都是使用JS计算实现，我在最早看到这种布局时也是觉得CSS没办法实现这样的布局，直到我看了《CSS Secrets》这本书，开始思考能否用纯CSS实现这种布局，没有想到最终真的只用CSS做出来了。如果想了解具体如何实现可以阅读我博客的文章：
使用纯 CSS 实现 Google Photos 照片列表布局 · Issue #4 · xieranmaya/blog · GitHub
[收藏本文] 【下载本文】
   设计艺术 最新文章
知乎里对当代京剧演员的评价为什么很低？
相声演员刘伟视频里说，让曹云金别太倔，回
地铁图为什么不按照真实比例画？
电影《普罗米修斯》里，为什么外星人的墙上
我想做一个麻将版的《小丑牌》，有前途吗？
戏曲界有什么著名梗？
如何评价深圳宝安机场的设计？
有哪些清醒且有力量的文案?
OpenAI Sora 生成 1 分钟视频时间超过 1 小
设计师的悲哀是什么？
上一篇文章           查看所有文章
加:2024-03-10 14:08:27  更:2024-03-10 14:11:40 
 
 
股票涨跌实时统计 涨停板选股 分时图选股 跌停板选股 K线图选股 成交量选股 均线选股 趋势线选股 筹码理论 波浪理论 缠论 MACD指标 KDJ指标 BOLL指标 RSI指标 炒股基础知识 炒股故事
网站联系: qq:121756557 email:121756557@qq.com  天天财汇