无卡顿的··· 纯css··· 的··· 动态··· 图标····
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享</title>
<style type="text/css">
*,*:before,*:after{box-sizing:border-box;}
*:before,*:after{
content:"";position:absolute;
}
.share-area{
list-style:none;font-size:100px;
width:110px;height:110px;position:relative;
}
.share-item{
width:100px;height:100px;position:absolute; border-radius:50%; top:5px;left:5px;
}
.share-item i,.share-item em{
position:absolute;
}
.share-wx{
background:#3A3A3A;
}
.share-wx i:nth-child(1){
width:.58em;height:.492em;background:#99d226;border-radius:50%;top:.192em;left:.096em;
}
.share-wx i:nth-child(1):before,.share-wx i:nth-child(1):after{
width:.088em;height:.088em;border-radius:50%;background:#3A3A3A;top:.118em;left:.15em;
}
.share-wx i:nth-child(1):after{
left:.348em;
}
.share-wx i:nth-child(1) em{
border:.04em solid transparent;
border-right:.12em solid #99d226;
top:.44em;left:0;
transform:rotate(-36deg);
}
.share-wx i:nth-child(2){
width:.474em;height:.41em;border-radius:50%;top:.39em;left:.422em;background:#ececec;
}
.share-wx i:nth-child(2):before,.share-wx i:nth-child(2):after{
width:.07em;height:.07em;border-radius:50%;background:#3A3A3A;top:.106em;left:.13em;
}
.share-wx i:nth-child(2):after{
left:.29em;
}
.share-wx i:nth-child(2) em{
border:.04em solid transparent;
border-right:.12em solid #ececec;
top:.34em;left:.336em;;
transform:rotate(206deg);
}
.share-wb i:nth-child(1){
width:.638em;height;
}
.share-qq{
background:#1379db;
}
.share-qq i:nth-child(1){
width:.436em; border-width:0 .08em .265em;border-color:transparent transparent #fddd2e;border-style:solid;
top:.3em;left:.288em;
}
.share-qq i:nth-child(1):before{
width:100%; border-width:.156em .218em; border-color: #fddd2e transparent transparent; border-style:solid;top:.264em;left:-.08em;
}
.share-qq i:nth-child(1) em{
transform:translate(0,-.134em);
}
.share-qq i:nth-child(1) em:nth-child(2){
transform: rotate(72deg) translate(.082em,-.4em);
}
.share-qq i:nth-child(1) em:nth-child(3){
transform: rotate(144deg) translate(-.14em, -.556em);
}
.share-qq i:nth-child(1) em:nth-child(4){
transform: rotate(-72deg) translate(-.276em, -.136em);
}
.share-qq i:nth-child(1) em:nth-child(5){
transform: rotate(-144deg) translate(-.364em, -.394em);
}
.share-qq i:nth-child(1) em:before{
width:.28em;height:.28em;background:#fddd2e;
transform: rotate(45deg) skew(16deg,16deg);
border-radius:5px;
}
.share-qq i:nth-child(2) {
height:.26em;width:.08em;background:#f45300;
top:.36em;left:.472em;
transform:skew(-45deg);
}
.share-qq i:nth-child(2):before, .share-qq i:nth-child(2):after{
border-width:.024em .18em;
border-color:transparent #f45300 #f45300 transparent;
border-style:solid;
left:-.28em;
top:-.016em;
}
.share-qq i:nth-child(2):after{
border-color: #f45300 transparent transparent #f45300;
top:.236em;left:0;
}
.share-qwb{
background:#4ab3ea;
}
.share-qwb i{
width:.48em;height:.48em;border-radius:50%;
background:#fff;
box-shadow:inset 0 0 0 .05em #fff, inset 0 0 0 .15em #4ab3ea;
top:.106em;
left:.092em;
}
.share-qwb i em:nth-child(1){
width:.16em;height:.1em;transform:rotate(41deg); top:.36em; left:.03em; background:#4ab3ea;
}
.share-qwb i em:nth-child(1):before,.share-qwb i em:nth-child(1):after{
width:.05em;
height:.05em;
top:.016em;left:-.022em;
border-radius:50%;
background:#fff;
}
.share-qwb i em:nth-child(1):after{
top:.002em;left:.132em;width:.054em;height:.054em;
}
.share-qwb i em:nth-child(2){
width: .4em;
height: .688em;
border-style: solid;
border-width: .04em;
border-color: transparent transparent transparent #fff;
border-radius: 50%;
top: .228em;
left: .032em;
transform: rotate(19deg);
}
.share-qwb i em:nth-child(2):before{
width:.04em;
height:.04em;
top:.542em;right:.248em;
border-radius:50%;
background:#fff;
}
.share-qwb i:nth-child(2){
transform:scale(.575) rotateY(180deg);
top:.192em;left:.496em;
}
.share-rr{
background:#004DA4;
}
.share-rr i{width:.5em;height:.6em;overflow:hidden;bottom:.1em;transform-origin:100% 0;}
.share-rr i:before{
width:1.2em;height:1.2em;
border-style: solid;
border-width: .08em;
border-color: transparent #fff transparent transparent ;
border-radius:50%;
transform: rotate(30deg);
bottom:0;right:-.032em;
}
.share-rr em{
width:.096em;height:.16em;background:#fff;
top:.144em;left:50%;margin-left:-.048em;
}
.share-rr i:nth-child(2){
transform:rotateY(180deg);
}
.share-tb{
background:#3795F5;color:#3795F5;
}
.share-tb i{
width:.86em;height:.86em;margin:.07em;background:#fff;
border-radius:50%;
}
.share-tb i:before{
width:100%;height:100%;
background-color: #fff;
background-image: linear-gradient(#eee 1px, transparent 1px);
background-size: 100% .08em;
border-radius:50%;
}
.share-tb i:after{
width:.144em;height:.144em;border-radius:50%;
background:#e8494a;
top:-.034em;left:50%;
margin-left:-.072em;
}
.share-tb i em{
font-size:.5em;font-family:"黑体";font-style:normal;text-align:center;width:100%;height:100%;line-height:1.7em;
font-weight:700;
}
.share-dd{
background:#e2e2e2;
}
.share-dd i:nth-child(1){
width:.552em;height:.304em;
border:.1em solid #3285ad;
left:50%;margin-left:-.276em;
top:.352em;
}
.share-dd i:nth-child(1):before{
border-width:.09em .074em;
border-style:solid;
border-color:#3285ad transparent transparent #3285ad;
top:.204em;left:.032em;
}
.share-dd i:nth-child(1) em{
width:.106em;height:.192em;background:#3285ad;top:-.292em;left:.084em;
}
.share-dd i:nth-child(1) em:before{
width:.16em;height:.1em;background:inherit;
left:100%;top:.046em;
}
.share-dd i:nth-child(2){
width:.15em;height:.15em;border-radius:50%; background:#3285ad;
left:.182em;bottom:.156em;
}
.share-dd i:nth-child(2):before, .share-dd i:nth-child(2):after{
width:inherit;height:inherit;border-radius:inherit;background:inherit;
left:.3em;
}
.share-dd i:nth-child(2):after{
left:.488em;
}
.share-btn{
width:110px;height:110px;background:#ececec;border-radius:50%;position:absolute;top:0;left:0;
font-size:30px;font-family:arial;color:#3285ad;font-weight:700;
text-align:center;line-height:110px;
}
.share-btn p{margin:0;position:absolute;top:0;left:0;width:100%;height:100%;
transition:.5s;
}
.share-btn .btn1{
opacity:1;transform:rotate(0);
}
.share-btn .btn2{
opacity:0;transform:rotate(180deg);
font-size:44px;
}
.share-area:hover .share-btn .btn1{
opacity:0;transform:rotate(180deg);
}
.share-area:hover .share-btn .btn2{
opacity:1;transform:rotate(0);
}
.share-area li{cursor:pointer}
.share-area .share-item{
transform:rotate(360deg);
transition:.4s;
}
.share-area:hover .share-item{
transform:rotate(0);
}
.share-area:hover .share-item:nth-child(1){
transition-delay:.6s;
}
.share-area:hover .share-item:nth-child(2){
transition-delay:.5s;
}
.share-area:hover .share-item:nth-child(3){
transition-delay:.4s;
}
.share-area:hover .share-item:nth-child(4){
transition-delay:.3s;
}
.share-area:hover .share-item:nth-child(5){
transition-delay:.2s;
}
.share-area:hover .share-item:nth-child(6){
transition-delay:.1s;
}
.share-area:hover .share-item:nth-child(1){
left:120px;
}
.share-area:hover .share-item:nth-child(2){
left:222px;
}
.share-area:hover .share-item:nth-child(3){
left:324px;
}
.share-area:hover .share-item:nth-child(4){
left:426px;
}
.share-area:hover .share-item:nth-child(5){
left:528px;
}
.share-area:hover .share-item:nth-child(6){
left:630px;
}
.share-area:hover{
width:730px;
}
</style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<ul class="share-area">
<li class="share-item share-wx"><i><em></em></i><i><em></em></i></li>
<li class="share-item share-qq"><i><em></em><em></em><em></em><em></em><em></em></i><i></i></li>
<li class="share-item share-qwb"><i><em></em><em></em></i><i><em></em><em></em></i></li>
<li class="share-item share-rr"><i></i><i></i><em></em></li>
<li class="share-item share-tb"><i><em>贴</em></i></li>
<li class="share-item share-dd"><i><em></em></i><i></i></li>
<li class="share-btn"><p class="btn1">share</p><p class="btn2">×</p></li>
</ul>
</div>
</body>
</html>
.
相关推荐
1. 图像滤镜：滤镜是图片特效中最常见的技术，例如模糊滤镜可以使图像变得柔和，锐化滤镜可以增强图像细节，而色彩滤镜则可以改变整体色调。 2. 图层混合模式：通过调整不同图层之间的透明度和混合模式，可以创造出...
在上述的"网页特效视频分享"中，提到了几个使用JavaScript实现的常见网页特效，包括楼梯式滚动菜单、图片全屏轮播、抽屉式电影简介以及百度首页换肤系统特效。接下来，我们将详细探讨这些JavaScript特效及其相关知识...
在网页设计中，为了提高用户体验和社交媒体互动，开发者经常会在页面上实现各种动态效果，其中“悬浮”和“置顶特效”是常见的一种设计手法。此主题——“jQuery悬浮微信二维码微博分享置顶特效”便是将这种效果应用...
1. **放大镜效果**：淘宝上的放大镜效果是电商网站中常见的一种增强用户购物体验的功能。当用户鼠标悬浮在商品图片上时，会出现一个放大镜窗口，可以清晰地查看商品细节。这种效果通过JavaScript和CSS实现，通常包括...
4. **3D效果**：3D转换和旋转等特效能为网页增添立体感，提升视觉冲击力，常见于产品展示或游戏界面。 5. **响应式设计**：随着设备屏幕尺寸的变化，网页元素能够自动调整布局和样式，保持良好的显示效果，这是现代...
zinemaker是一款专业的数字杂志制作软件，它允许用户创建具有丰富互动元素的电子杂志，包括音频、视频、动画等。在本压缩包文件"zinemaker特效effect...同时，不断学习和分享特效资源也是提升技能和创作力的重要途径。
1. 视图特效：自定义View是实现特殊UI效果的一种常见方式。开发者需要重写onDraw()方法，利用Canvas进行绘图操作，实现如涟漪效果、渐变背景等。此外，使用LayerDrawable可以叠加多个图层，实现复杂的视觉效果。 2....
"切换特效"则可能指的是页面元素（如图片、内容区块）在用户交互下进行平滑的切换，常见的例如轮播图、选项卡、导航菜单等。 【压缩包子文件的文件名称列表】中的文件可能是以下内容： 1. **demo.html**：这是一个...
5. **图表与可视化**：数据可视化是现代网页中常见的特效，例如进度条、饼图、柱状图等。利用模板，可以轻松创建动态、交互式的数据展示，增强信息传达的清晰度。 6. **滑块和轮播**：滑块和轮播组件是展示产品、...
5. **火焰特效(Flame Effect)**: 火焰特效是游戏中常见的粒子效果之一，通常由红、橙、黄三色的热浪和飘动的火焰组成。在Unity中，开发者可以调整火焰粒子的生命周期、发射角度和颜色混合，以实现逼真的火焰动画。 ...
例如，Compiz、KWin和Metacity等都是常见的窗口管理器，它们可以实现各种特效。 - **桌面环境**：是提供图形用户界面的完整集合，包括窗口管理器、文件管理器、启动器等。比如GNOME、KDE、Xfce和Unity等，它们通常...
6. **表单设计**：涵盖输入框、选择框、提交按钮等常见表单元素的样式和交互优化。 这些实例不仅可供学习者模仿和参考，还能帮助他们理解不同设计决策对用户体验的影响，提升设计水平。 总之，《网页配色与特效》...
"菜单"可能指的是使用JavaScript实现的下拉菜单或滑动菜单，这是网站导航常见的一种交互设计。"图片特效"则可能涉及到图片的缩放、淡入淡出、旋转等视觉效果。 【压缩包子文件的文件名称列表】中的"index.html"是...
【jQuery右侧悬浮分享按钮特效代码】是网页设计中一种常见的交互功能，主要用于提高用户体验和促进内容分享。这个特效代码结合了jQuery库，实现了一个在页面滚动时始终位于右侧的浮动分享按钮，包括返回顶部按钮、...
在这个"JS相册集特效代码图片新闻产品图片显示特效"中，我们看到的是JS如何用于创建吸引人的图片展示效果，常见于新闻网站和产品页面，以提升用户体验。 首先，"JS相册集特效"指的是使用JavaScript代码来创建一个...
在给定的压缩包文件中，包含了一系列基于JS实现的常见网页特效，这些特效能极大地提升网页的用户体验和视觉吸引力。 1. **鼠标放上后伸展显示详细简介的排名菜单.htm** 这个文件可能包含了一个JavaScript实现的...
悬浮在右下角的分享按钮是一种常见的社交媒体集成方式，用户无需滚动到页面顶部或打开侧边栏就能分享内容。这个特效可能使用了jQuery来控制按钮的定位，确保其始终在屏幕右下角。按钮点击后，可能会弹出一个包含各种...
5. **AJAX异步请求**：AJAX允许页面在不刷新的情况下与服务器交换数据并更新部分页面内容，常见应用如无限滚动加载、表单提交等。 6. **面向对象编程**：JavaScript支持面向对象编程，通过构造函数和原型链可以创建...
下面将详细讲解这些特效及其在网页设计中的应用。 1. 滑动面板：滑动面板是一种常见的网页交互设计，它可以用来展示更多的内容而不会占据太多空间。比如，可以用于产品展示、用户评价或者新闻更新。通过JavaScript...
至于“分享按钮”，它是网页上常见的功能组件，用于让用户方便地将页面内容分享到社交媒体平台。通过添加CSS3动画，可以使分享按钮在用户悬停时更显眼，从而提高分享的概率。 现在，让我们具体看下如何实现这个特效...