纯html5+css能写出什么惊人的效果?
鄙人最近学习css,发现纯html5+css可以实现这般效果:一棵跳舞的树
纯HTML5+CSS3实现一棵自己跳舞的树
http://pic3.zhimg.com/b6bd016f7da169528995be274520047a_r.jpg
想请大家晒一下自己搜集到的各种华丽效果,谢谢啦。
(是只靠纯html5+css,没有js代码) http://picx.zhimg.com/v2-c3d6a92b1c1dff9bee625801aa31f762_r.jpg?source=1940ef5c
微信官网仿写 ↑
http://picx.zhimg.com/v2-905980bfc17a476c3e412ed2d2372e5b_r.jpg?source=1940ef5c
将这个版式换成旅行网站主题后 ↑
http://picx.zhimg.com/v2-cf64360905cac99670a45013fa99105c_r.jpg?source=1940ef5c
移动端响应式效果 ↑
微信官网首页,简约干净,能学习写好这个首页,就能掌 握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=&#34;utf-8&#34;>
<meta name=&#34;viewport&#34; id=&#34;WebViewport&#34; content=&#34;width=100%,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1&#34; />
<!-- 此源码由 http://www.psdhtml.cn/ 大设计师论坛独家编写,禁止转售 -->
<title>这是一个首页</title>
<style type=&#34;text/css&#34;>
* {
margin:0;
padding:0;
} /* 通配符 删除浏览器默认值 */
ul {
list-style:none; /* 取消项目符号样式 */
}
body {
overflow-x:hidden;
background-color:rgba(250,250,250,1);
font-family: &#39;Helvetica Neue&#39;, &#39;Helvetica&#39;, &#39;Microsoft Yahei&#39;, sans-serif;/* 字体集 */
}
@media (min-width: 601px){ /* >=601的设备*/
.top_info {
width: 100%;
height: 600px;
position: relative;
}
.top_info:after {
background-color: #2aae67;
content: &#39;&#39;;
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=&#34;top_info&#34;>
<div class=&#34;login&#34;><a href=&#34;#&#34;>登录</a></div>
<div class=&#34;logo&#34;><a href=&#34;http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy&#34; target=&#34;_blank&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/logo.png&#34; width=&#34;200&#34; height=&#34;64&#34;></a></div>
<div class=&#34;top-text&#34;>我们支持跨通信运营商、跨操作系统平台通过网络快速发送免费(需消耗少量网络流量)语音短信、视频、图片和文字,同时,也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“圈子”、”公众平台“、”语音记事本“等服务插件。</div>
<div class=&#34;round_div_all&#34;>
<div class=&#34;round_div&#34;>
<div class=&#34;r-s01&#34;><a href=&#34;http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy&#34; target=&#34;_blank&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon01.png&#34; width=&#34;40&#34; height=&#34;40&#34;></a></div>
<div class=&#34;r-s02&#34;>Android</div>
</div>
<div class=&#34;round_div&#34;>
<div class=&#34;r-s01&#34;><a href=&#34;http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy&#34; target=&#34;_blank&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon02.png&#34; width=&#34;40&#34; height=&#34;40&#34;></a></div>
<div class=&#34;r-s02&#34;>IOS</div>
</div>
<div class=&#34;round_div&#34;>
<div class=&#34;r-s01&#34;><a href=&#34;http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy&#34; target=&#34;_blank&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon03.png&#34; width=&#34;40&#34; height=&#34;40&#34;></a></div>
<div class=&#34;r-s02&#34;>Windows</div>
</div>
<div class=&#34;round_div&#34;>
<div class=&#34;r-s01&#34;><a href=&#34;http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy&#34; target=&#34;_blank&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon04.png&#34; width=&#34;40&#34; height=&#34;40&#34;></a></div>
<div class=&#34;r-s02&#34;>Harmony OS</div>
</div>
</div>
</div>
<div class=&#34;mian01&#34;>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_01.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>We支付</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_02.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>公Z号</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_03.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>小程序</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_04.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>视频号助手</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_05.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>小游戏</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_06.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>小商店</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_07.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>表情开放平台</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_08.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>搜一搜开放平台</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_09.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>红包封面</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_10.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>对话开放</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_11.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>服务平台</div>
</div>
<div class=&#34;square_div&#34;>
<div class=&#34;s-s01&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/icon_svg_12.svg&#34; width=&#34;43&#34; height=&#34;43&#34;></div>
<div class=&#34;s-s02&#34;>在线学堂</div>
</div>
</div>
<footer class=&#34;down&#34;><span class=&#34;f82&#34;>We安全 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引</span><br>
<span class=&#34;f75&#34;>Copyright © 1998-2022 All Rights Reserved.</span></footer>
<div class=&#34;banquan&#34;><a href=&#34;http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy&#34; target=&#34;_blank&#34;><img src=&#34;http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg&#34; width=&#34;1000&#34; height=&#34;36&#34;></a></div>
</body>
<!-- 此源码由 http://www.psdhtml.cn/ 大设计师论坛独家编写,禁止转售 -->
</html>【更多相关可以查看下方我的网页设计源码专栏 ↓】
网页作业设计与源码共享 前言
前两天翻资料,找到了刚开始学习前端的时候学习的一个小案例,用css去画一个转动的表盘,也不知道大家都写过没有,样子如下图所示
http://pic1.zhimg.com/v2-ac515a7c219043a0bcc889306f00914e_r.jpg?source=1940ef5c
今天把这个小案例分享给大家,这个效果原案例是完全用css实现的,因为表针转动都有规律可循,设置一个定时的动画就行,我为了简化代码量,并且可以获取当前的时间,所以用js优化了一下,因为案例很小,所以就不用框架了,直接原生走起,由于这种简单的文章主要面向初学者,所以会说的详细一点
开发
初始化
第一步,找一个文件夹,建立 index.html , 然后引入一个 style.css 并初始化一些样式
http://pica.zhimg.com/v2-0df5d5ebc0fd6e5b81aba903d51a1241_r.jpg?source=1940ef5c
表盘制作
接下来我们来制作表盘
面板
首先是面板部分,面板的html部分我们就只用一个节点就够了,其他都用css来完成
<div id=&#34;watch&#34;>
<!-- 表盘 -->
<div class=&#34;frame-face&#34;></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);
}
http://picx.zhimg.com/v2-828cd0a29bb484c8beb9fb250c53a147_r.jpg?source=1940ef5c
之后我们利用伪类元素,画一个径向渐变,来营造一个层次感,让表盘的立体感更加强烈
#watch .frame-face:before {
content: &#39;&#39;;
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%);
}
http://picx.zhimg.com/v2-450e2047d207452521f2a96ad58502f9_r.jpg?source=1940ef5c
这样看着还是不太顺眼,我们再加一个伪类,制作变盘的主面板,通过阴影和渐变造成的对比效果,让这个表盘看起来更真实
#watch .frame-face:after {
content: &#39;&#39;;
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);
}
http://picx.zhimg.com/v2-f41efabf7f4de2a724dfc64b65e4a0d7_r.jpg?source=1940ef5c
刻度
表盘的周围有一个个的小刻度点,让我们可以知道现在的具体时间,这里我们给表盘设置60个刻度点,dom节点我们先写一个刻度点的容器,因为刻度点太多了,我们稍后用js生成
<!-- 刻度 -->
<ul id=&#34;minute-marks&#34;></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(&#39;minute-marks&#39;)
for (let index = 0; index < 60; index++) {
let markItem = document.createElement(&#39;li&#39;)
markItem.style.cssText = &#34;transform:rotate(&#34; + index * 6 + &#34;deg) translateY(-12.7em)&#34;;
if (index % 5 == 0) {
markItem.style.width = &#34;0.3em&#34;;
markItem.style.height = &#34;1em&#34;;
}
markWrap.appendChild(markItem)
}
}
http://picx.zhimg.com/v2-a1c3362fd316216b6863a0ed13adf5f8_r.jpg?source=1940ef5c
这里我们也可以酌情考虑增加一些刻度的数字标识
<ul id=&#34;digits&#34;>
<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)
}
http://pic1.zhimg.com/v2-c292b3b1553453c27ee0aea965017e50_r.jpg?source=1940ef5c
这里我们直接把指针转动的轴中心点也给做上
#digits:before {
content:&#39;&#39;;
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:&#39;&#39;;
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%);
}
http://pic1.zhimg.com/v2-13253131aeec4b61f950611f322ecd10_r.jpg?source=1940ef5c
指针开发
接下来我们进行表盘指针的开发
指针这里我们给准备三个dom,分别是时针、分针和秒针
<!-- 指针 -->
<div class=&#34;hours-hand&#34;></div>
<div class=&#34;minutes-hand&#34;></div>
<div class=&#34;seconds-hand&#34;></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:&#39;&#39;;
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:&#39;&#39;;
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;
}
http://picx.zhimg.com/v2-0a992b93c41674eb5652b8f626550136_r.jpg?source=1940ef5c
注意,这里我们用了 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;
}
http://pic1.zhimg.com/v2-d66d38fd76a730e08393dab6cfba714a_r.jpg?source=1940ef5c
秒针开发
秒针由三部分组成,分别是针尾的圆角矩形,一个和中心点重叠的圆形,还有一个很长的针尖,也可以通过圆角来做
/* 秒针 */
#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:&#39;&#39;;
width:1.4em;
height:1.4em;
border-radius:.7em;
background:inherit;
position:absolute;
left:-.65em; bottom:1.35em;
}
#watch .seconds-hand:before {
content:&#39;&#39;;
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;
}
http://pica.zhimg.com/v2-286d7d5a4ba0418c7def12be28333499_r.jpg?source=1940ef5c
让针转动起来
上面我们开发了表盘和指针的基本样式,下面我们就让针来转动起来,刚才写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(&#34;hours-hand&#34;).style.transform = &#34;rotate(&#34; + hournum + &#34;deg)&#34;
document.getElementsByClassName(&#34;minutes-hand&#34;).style.transform = &#34;rotate(&#34; + minnum + &#34;deg)&#34;
document.getElementsByClassName(&#34;seconds-hand&#34;).style.transform = &#34;rotate(&#34; + sennum + &#34;deg)&#34;
}, 1000);
这样就大功告成了
http://picx.zhimg.com/v2-5439bee1b96d40527d93163070590ce0_r.jpg?source=1940ef5c
数字表开发
指针虽然也很直观,但总是没有数字直观准确,所以我们可以再加一个数字小表盘。数字表盘更简单了,我们获取一下当前的时分秒,定时刷新就好了,这里需要主机柱子表盘放的层级,不可盖住指针
<!-- 数字表盘 -->
<div class=&#34;digital-wrap&#34;>
<ul class=&#34;digit-hours&#34;></ul>
<ul class=&#34;digit-minutes&#34;></ul>
<ul class=&#34;digit-seconds&#34;></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=&#34;0&#34;+parseInt(hour);
}
if(minute<10){
minute=&#34;0&#34;+parseInt(minute);
}
if(second<10){
second=&#34;0&#34;+parseInt(second);
}
document.getElementsByClassName(&#34;digit-hours&#34;).innerHTML=hour;
document.getElementsByClassName(&#34;digit-minutes&#34;).innerHTML=minute;
document.getElementsByClassName(&#34;digit-seconds&#34;).innerHTML=second;
http://pic1.zhimg.com/v2-7a653a30fb3bb774e4bedf6fba48a534_r.jpg?source=1940ef5c
这样就大功告成了。 老鱼带你来欣赏纯CSS实现的特效有哪些!
CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能。
我精选5个使用纯CSS实现的文字炫酷效果!
效果欣赏
一. 渐变文字效果
该效果主要利用background-clip:text配合color实现渐变文字效果 首先了解background-clip: text;的意思:以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉。
http://pica.zhimg.com/v2-4d400d00213b14bb257bf4434eac7e97_r.jpg?source=1940ef5c
<html>
<link rel=&#34;stylesheet&#34; href=&#34;./css/neno-text-style.css&#34;>
<body>
<p class=&#34;neon&#34;>【前端实验室】分享前端最新、最实用前端技术</p>
</body>
</html>二.彩虹文字效果(跑马灯)
该效果也是利用background-clip:text和线性渐变属性linear-gradient实现,通过设置区域颜色值实现了彩虹文字的效果。
http://picx.zhimg.com/v2-c804c40795cfef7f1acc751a44fb7ee1_r.jpg?source=1940ef5c
html>
<head>
<link rel=&#34;stylesheet&#34; href=&#34;./css/rainbow-color-text-style.css&#34;>
</head>
<body>
<div class=&#34;text&#34;>【前端实验室】分享前端最新、最实用前端技术</div>
</body>
</html>三. 发光文字效果
该效果主要利用text-shadow属性实现。text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。
http://pic1.zhimg.com/v2-370833cc304dafac7f9c9f34cbfb684c_r.jpg?source=1940ef5c
<html>
<head>
<link rel=&#34;stylesheet&#34; href=&#34;./css/neno-text-style.css&#34;>
</head>
<body>
<p class=&#34;neon&#34;>【前端实验室】分享前端最新、最实用前端技术</p>
</body>
</html>四.打字机效果
该效果主要是通过改变容器的宽度实现的。
http://pic1.zhimg.com/v2-51d79cc2fd07db9e0c1d12cc2a44e680_r.jpg?source=1940ef5c
<html>
<head>
<link rel=&#34;stylesheet&#34; href=&#34;./css/typing-style.css&#34;>
</head>
<body>
<div class=&#34;typing&#34;>【前端实验室】分享前端最新、最实用前端技术</div>
</html>五.故障风格文字效果
该动画效果比较复杂,主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等,但就是没有JS~
http://picx.zhimg.com/v2-b6633a179413b8d1f5b8beee0c78730b_r.jpg?source=1940ef5c
<html>
<head>
<link rel=&#34;stylesheet&#34; href=&#34;./css/fault-style.css&#34;>
</head>
<body>
<div class=&#34;text&#34; data-text=&#34;【前端实验室】分享前端最新、最实用前端技术&#34;>
【前端实验室】分享前端最新、最实用前端技术
</div>
<body>
</html>
具体实现可以看这篇文章~
纯CSS实现的文字效果竟然可以这么酷炫!
2021年12月9日更新
没想到评论和私信好多人跟我要源码...
因为CSS animation动画代码有点长就没全放出来,这里给大家附上Sample链接!
纯CSS实现的文字效果的Sample源码!
最后再送上一份CSS架构系统精讲视频
你是否觉得自己写出来的CSS 代码臃肿、难维护、难复用?
一个好的 CSS 架构是具有良好的可扩展性
http://picx.zhimg.com/v2-7c42a9a012087d6d40cc01611c2f4e81_r.jpg?source=1940ef5c
2021必修 CSS架构系统精讲视频 · 语雀我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!
如果我的内容能对你有所帮助,关注 @前端实验室 跟我一起学习~
一个赞同和喜欢鼓励一下下~ 贴个自己做的:
Cats
http://picx.zhimg.com/2f642df23591e8e4a26088cf33a516ad_r.jpg?source=1940ef5c
用纯CSS实现图片的即不变形拉伸,同时又占满容器宽度的布局。
几乎所有的网站在实现这样的布局时都是使用JS计算实现,我在最早看到这种布局时也是觉得CSS没办法实现这样的布局,直到我看了《CSS Secrets》这本书,开始思考能否用纯CSS实现这种布局,没有想到最终真的只用CSS做出来了。如果想了解具体如何实现可以阅读我博客的文章:
使用纯 CSS 实现 Google Photos 照片列表布局 · Issue #4 · xieranmaya/blog · GitHub 只用css能玩出什么花样? - 逝者如斯的回答
>>>>>>>>>>>>>>>>>>>>>>2016.2.11一更<<<<<<<<<<<<<<<<<<<<<<<<<<<
可以看看这个回答,30种濒危动物那个就做的挺好的
先不说3d效果,就论一个平面上的话,
只用一行div,无js,就可以画一幅世界名画蒙娜丽莎,CSS博大精深→ _→
Mona Lisa with pure CSS
http://picx.zhimg.com/93b628b8cddf83652deef756fe92c8d4_r.jpg?source=1940ef5c
虽然作者不是手写的,但至少另一个角度说明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查看)
无论是背景音的选用,还是动物样貌之间的切换,抑或是细节处的动效展现,再加上主题的升华,有技术有内涵,这是一部成功的作品。
http://pica.zhimg.com/b80d46ba4d80f53216266ddd9af906cd_r.jpg?source=1940ef5c
可以闲来无事画画小动物:
http://pic1.zhimg.com/189d9eecd5e6bda2a2d5d163c992de7e_r.jpg?source=1940ef5c
打打灰机:
Airplane (Pure CSS)
http://picx.zhimg.com/f693aa75c0df34cf963cb89fbbd315d0_r.jpg?source=1940ef5c
CSS Faces
http://picx.zhimg.com/a3ee0138dac2feb2327bea44fc0a7d7f_r.jpg?source=1940ef5c
这些都是静止的,想想再加上各种动画,也可以做出很多效果出来的。
CSS3D苹果笔记本动画:
这又是一款超酷的CSS3 3D动画效果,它是一款带有3D视觉效果,并且可以360度旋转的macbook air。这款CSS3 3D动画的笔记本底部有一个逼真的投影,可以跟随图片一起转动,从而凸显其3D效果,是一款很不错的CSS3 3D动画特效
CSS3 3D 苹果笔记本动画DEMO演示
http://picx.zhimg.com/50/a51c0cd2731b33ef479573abbcc7e67a_720w.jpg?source=1940ef5c
还有
CSS3扇形动画菜单DEMO演示
http://pica.zhimg.com/50/915aca553597e8e589589e22a05d0373_720w.jpg?source=1940ef5c
HTML5超级玛丽体验:
HTML5³¬¼¶ÂêÀö
http://pic1.zhimg.com/54e0fbfe241766c58ba4dd4bb74a37d3_r.jpg?source=1940ef5c
>>>>>>>>>>>>>>>>>>>>>>2016.3.5三更<<<<<<<<<<<<<<<<<<<<<<<<<<<
我们知道js在web方面能做很多事
有一句话说:限制你的可选项,会让你重新评估手头上已有的工具。
如果只让你用css,能完成某项任务吗?而这个任务中,只用一个div,全靠css属性来实现效果,可以吗?
可以看看翻译的一篇
基于单个 Div 的 CSS 绘图 - 前端外刊评论 - 知乎专栏:
“为了得到更大的挑战,探索 CSS 的潜力,我给自己定了这个限制,只是用一个 Div。不能直接买一只绿色的笔(添加更多的 Div),我要做的就是尽其所能地结合 CSS 属性来实现我的目的。”
以下这些都是基于一个div所做的:
A Single Div
http://picx.zhimg.com/1db5952700594b2efe54cafc6516e4ce_r.jpg?source=1940ef5c
>>>>>>>>>>>>>>>>>>>>>>2016.7.12四更<<<<<<<<<<<<<<<<<<<<<<<<<<<
做一个动态的旋转木马给妹纸,立马少女心泛滥有木有(星星眼):
Horse ride carousel flat design by Lina for Zajno (3D animated with CSS3)
http://picx.zhimg.com/15921878862b63fc874d74a3485a46b8_r.jpg?source=1940ef5c
css可以用来做图像,做完图像还可以用css添加动画,能做成什么样还要看你的想象力了。再加上合适的主题,就能做出一件成功的作品。
还有动态的车子:
Bike Season
http://picx.zhimg.com/a92369634f14262e66445d3a5d674d82_r.jpg?source=1940ef5c
上面两个例子来自can you code this ui
https://stories.uplabs.com/can-you-code-this-ui-4530315290a1#.65da2m9rs
css可以用来做图像,做完图像还可以用css添加动画,能做成什么样还要看你的想象力了。再加上合适的主题,就能做出一件成功的作品。
页:
[1]