AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

原来 css 也能这么炫酷(一)

  • 2020-01-07
  • 本文字数:1239 字

    阅读完需:约 4 分钟

原来css也能这么炫酷(一)

在网页开发中,为了有更好地用户体验,我们常常会对一些交互元素添加动画效果来达到这个目的,我们知道 css3 有过渡动画和关键帧动画可以实现一些简单的动画效果,例如元素位置改变就可以通过提前定义好的动画使我们可以完整的看到整个元素移动的过程。好了,话不多说,直接上干货。


在开发中,按钮 button 想必大家都十分常用吧,但是你有没有想过怎么去做一个炫酷的按钮呢?某天,在写 css 时,突发奇想,玩出来了个’幽灵’按钮,哈哈,名字不重要,我们先看看按钮效果。



接下来,直接上代码:


(温馨提示:左右/上下滑动可查看全部代码)


<html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   <style type="text/css">       body {           background: #000;       }       .btn-st{               font-size:20px;               width:40px;               height:40px;               color:#fff;               border:0;               outline: 0;               position: fixed;               left: 50%;               background:rgba(0,0,0,0.3);               top:70px; ;z-index: 110;               transition-property: left,background;               transition-duration: 1s;               transition-timing-function: ease-in-out;       }       .line{               display:block;               box-sizing: border-box;               position:absolute;               background:#fff;               transition: all .2s ease-out         }       .line-top,.line-bottom{width: 0px;height:1px;}       .line-left,.line-right{width: 1px;height:0px;}       button:hover{box-shadow: 0 0 20px yellow;}
.line-top{top:-1px;left:-50px;} button:hover>.line-top{width:41px;left:-1px;}
.line-left{top:80px;left:-1px} button:hover>.line-left{height:41px;top:-1px;}
.line-right{right:-1px; bottom:80px;} button:hover>.line-right{height:42px; bottom:-1px;}
.line-bottom{bottom:-1px;right:-50px;} button:hover>.line-bottom{width:42px;right:-1px;} </style>
</head><body> <button type="button" id="btn" class="btn-st"> <span class="glyphicon glyphicon-menu-hamburger"></span> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> </button></body></html>
复制代码


很简单吧,其实就是通过对 4 个元素的定位偏移量做一个过渡动画,就可以实现了,有没有很炫呢?


好了,先上个小菜,接下来我们玩个大的,结合 js,来做一个特别酷炫的轮播切图,老规矩,上效果:



本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/U9sFGG6ZWzh9E4kKUm41ZA


2020-01-07 15:38667

评论

发布
暂无评论
发现更多内容

Python字体反爬之乐居字体反爬,一文看懂,一文学会

梦想橡皮擦

Python 爬虫 8月月更

Kubernetes资源编排系列之三: Kustomize篇

阿里云大数据AI技术

运维‘

想做好分布式架构?这个知识点一定要理解透彻

王小凡

Java 程序员 分布式 高并发

Apache APISIX 2.15 版本发布,为插件增加更多灵活性

API7.ai 技术团队

开源 后端 API网关 APISIX 网关

并发模型和I/O模型介绍

C++后台开发

后端开发 I/O模型 C/C++后台开发 C/C++开发 并发模型

绝对最直白的MySQL MVCC机制总结,免费拿走

知识浅谈

开源 8月月更

浅聊组合函数

掘金安东尼

前端 函数编程 8月月更

A tour of gRPC:06 - gRPC client straming 客户端流

BUG侦探

gRPC RPC

玉溪卷烟厂通过正确选择时序数据库 轻松应对超万亿行数据

TDengine

数据库 tdengine 时序数据库

国内IT市场还有发展吗?有哪些创新好用的IT运维工具可以推荐?

行云管家

云计算 多云管理 IT运维 云管理

语音直播系统——做好敏感词汇屏蔽打造绿色社交环境

开源直播系统源码

软件开发 语聊房 直播系统源码 语音直播系统

IDO预售DAPP系统开发(NFT挖矿)

薇電13242772558

dapp

兆骑科创双创服务平台,创业赛事活动,投融资对接平台

兆骑科创凤阁

快速搞懂Seata分布式事务AT、TCC、SAGA、XA模式选型

知识浅谈

开源 8月月更

Python 教程之输入输出(2)—— 输入和输出

海拥(haiyong.site)

Python 8月月更

中科驭数等单位牵头发布行业首部DPU评测方法技术白皮书

硬科技星球

2022年值得尝试的7个MQTT客户端工具

EMQ映云科技

物联网 IoT mqtt 客户端 8月月更

一文搞懂│php 中的 DI 依赖注入

设计模式 依赖注入 8月月更 高级编程

太厉害了!腾讯T4大牛把《数据结构与算法》讲透了,带源码笔记

冉然学Java

编程 算法 排序 java\ 数据结构与算法、

这几年让你大呼惊人的AI应用,都离不开这项技术

小红书技术REDtech

人工智能 自然语言处理 nlp 自然语言 自然语言理解

《数字经济全景白皮书》银行业智能风控科技应用专题分析 发布

易观分析

金融 银行 数字经济全景白皮书

开篇-开启全新的.NET现代应用开发体验

MASA技术团队

.net 云原生 后端

华为研究院19级研究员几年心得,终成趣谈网络协议文档,附大牛讲解

冉然学Java

数据库 编程 微服务 网络协议 java\

开源一夏 | 不会吧,十分钟就能上手Prometheus与Grafana监控SpringBoot项目

知识浅谈

开源 8月月更 SpringBoot实战

大数据培训如何部署一个健壮的Airflow

小谷哥

史上最全!47个“数字化转型”常见术语合集,看完秒懂~

优秀

数字化转型 数字化业务转型

兆骑科创创业赛事活动路演,高层次人才引进平台

兆骑科创凤阁

大咖说·图书分享 | Serverless工程实践:从入门到进阶

大咖说

Serverless 工程实践

大数据培训机构大概要花费多少钱

小谷哥

浅析PM2实用入门指南

青年码农

Node pm2

AI+BI+可视化,Sugar BI架构深度剖析

百度Geek说

架构 数据

原来css也能这么炫酷(一)_语言 & 开发_Think体验设计_InfoQ精选文章