写点什么

原来 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:38658

评论

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

【行业云说】云数底座赋能基层治理现代化

云计算运维

gpushare.com_基于去噪Transformer的无监督句子编码【EMNLP 2021】

恒源云

深度学习 语音识别 transform

淘宝小部件 Canvas 渲染流程与原理全解析

阿里巴巴终端技术

小程序 淘宝 渲染

MS Office 冷门却实用的技巧及软件安装包分享(文末有福利)

淋雨

Office office365

网络安全kali渗透学习 web渗透入门 Kali系统的被动信息收集

学神来啦

研效优化实践:WeTest提效测试

WeTest

PK体系“配齐”!亚信科技数据库与麒麟软件OS、飞腾CPU完成产品适配

亚信AntDB数据库

AntDB 亚信科技

技术分享| 探索视频感知编码

anyRTC开发者

音视频 WebRTC 视频编码 视频压缩 视频感知编码

手把手教你学Dapr - 5. 状态管理

MASA技术团队

C# .net 微软 微服务 dapr

从 ClickHouse 到 ByteHouse:实时数据分析场景下的优化实践

字节跳动数据平台

数据库 字节跳动 Clickhouse 实时数据分析 bytehouse

【云成本】降低云成本三大技巧你知道吗?

行云管家

云计算 企业上云 云成本

视频智能生产及内容分析应用工具开源了!​

百度大脑

人工智能

【实时渲染】3DCAT实时渲染云在BIM领域的应用

3DCAT实时渲染

云计算 渲染 BIM 建筑

详解 HDFS 底层交互原理

五分钟学大数据

hdfs 1月月更

全国社保基金理事会副理事长陈文辉一行莅临青藤调研

青藤云安全

详细图解Netty Reactor启动全流程

bin的技术小屋

微服务 网络编程 中间件 Java IO netty

操作指南|最详尽文档翻译志愿指南

Apache Pulsar

开源 翻译 云原生 Apache Pulsar 社区

SPARK 应用如何快速应对 LOG4J 的系列安全漏洞

明哥的IT随笔

spark CDH

技术干货 | NeCodeGen:基于 clang 的源到源转译工具

网易云信

前端 Clang

手把手教你学Dapr - 4. 服务调用

MASA技术团队

C# .net 微软 微服务 dapr

深入解析 Apache Pulsar 系列(一):客户端消息确认

Apache Pulsar

开源 架构 云原生 Apache Pulsar 消息中间件

易用好用的云管平台看这里!行云管家杠杠的!

行云管家

云计算 企业上云 混合云 云管平台

深入浅出Apache Pulsar(2):Pulsar消息机制

云智慧AIOps社区

博文推荐|基于 Apache Pulsar 的分布式锁

Apache Pulsar

开源 分布式 云原生 中间件 Apache Pulsar

老牌安全厂商海泰方圆加入龙蜥社区

OpenAnolis小助手

Linux 开源 社群运营

netty系列之:channel和channelGroup

程序那些事

Java Netty 程序那些事 1月日更

爆测一周!22年必看最细致代码托管工具测评

阿里云云效

阿里云 云原生 代码管理 代码托管 Codeup

中国AIOps们,你们究竟是在骗谁?

观测观测

AIOPS

APP违法使用个人信息?不用怕,华为云VSS为你保驾护航

华为云开发者联盟

移动应用 安全 漏洞 隐私合规 华为云VSS漏洞扫描服务

线程的生命周期,真的没那么简单

华为云开发者联盟

Java 线程 生命周期 编程语言线程

跟着源码学IM(十):基于Netty,搭建高性能IM集群(含技术思路+源码)

JackJiang

Netty 即时通讯 IM im架构设计

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