没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|行业资讯|编辑:龚雪|2015-02-13 09:55:19.000|阅读 570 次
概述:常被认为是古板呆萌的程序猿内心其实也很浪漫,他们的爱的礼物甚至逼格更高。不信你来看看。
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
今天无意间在国外的一个论坛上看到一个简单而有意思的HTML5动画,它是一个用线条绘制的爱心,并且,这个爱心会不停的翻转,给人一种3D立体的视觉效果,下面是效果图:
简单的几根线条就勾勒出一个完美的爱心,真是一副杰作!
我将它的源代码整理了出来,并制作了DEMO效果,你可以点击这里来欣赏。
另外,我将核心的CSS3代码贴出来:
.heart3d { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 160px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin 15s infinite linear; animation: spin 15s infinite linear; } .heart3d [class^="rib"] { position: absolute; width: 100px; height: 160px; border: solid #f22613; border-width: 1px 1px 0 0; border-radius: 50% 50% 0 / 40% 50% 0; } .heart3d [class$="1"] { -webkit-transform: rotateY(10deg) rotateZ(45deg) translateX(30px); transform: rotateY(10deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="2"] { -webkit-transform: rotateY(20deg) rotateZ(45deg) translateX(30px); transform: rotateY(20deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="3"] { -webkit-transform: rotateY(30deg) rotateZ(45deg) translateX(30px); transform: rotateY(30deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="4"] { -webkit-transform: rotateY(40deg) rotateZ(45deg) translateX(30px); transform: rotateY(40deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="5"] { -webkit-transform: rotateY(50deg) rotateZ(45deg) translateX(30px); transform: rotateY(50deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="6"] { -webkit-transform: rotateY(60deg) rotateZ(45deg) translateX(30px); transform: rotateY(60deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="7"] { -webkit-transform: rotateY(70deg) rotateZ(45deg) translateX(30px); transform: rotateY(70deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="8"] { -webkit-transform: rotateY(80deg) rotateZ(45deg) translateX(30px); transform: rotateY(80deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="9"] { -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(30px); transform: rotateY(90deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="10"] { -webkit-transform: rotateY(100deg) rotateZ(45deg) translateX(30px); transform: rotateY(100deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="11"] { -webkit-transform: rotateY(110deg) rotateZ(45deg) translateX(30px); transform: rotateY(110deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="12"] { -webkit-transform: rotateY(120deg) rotateZ(45deg) translateX(30px); transform: rotateY(120deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="13"] { -webkit-transform: rotateY(130deg) rotateZ(45deg) translateX(30px); transform: rotateY(130deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="14"] { -webkit-transform: rotateY(140deg) rotateZ(45deg) translateX(30px); transform: rotateY(140deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="15"] { -webkit-transform: rotateY(150deg) rotateZ(45deg) translateX(30px); transform: rotateY(150deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="16"] { -webkit-transform: rotateY(160deg) rotateZ(45deg) translateX(30px); transform: rotateY(160deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="17"] { -webkit-transform: rotateY(170deg) rotateZ(45deg) translateX(30px); transform: rotateY(170deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="18"] { -webkit-transform: rotateY(180deg) rotateZ(45deg) translateX(30px); transform: rotateY(180deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="19"] { -webkit-transform: rotateY(190deg) rotateZ(45deg) translateX(30px); transform: rotateY(190deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="20"] { -webkit-transform: rotateY(200deg) rotateZ(45deg) translateX(30px); transform: rotateY(200deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="21"] { -webkit-transform: rotateY(210deg) rotateZ(45deg) translateX(30px); transform: rotateY(210deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="22"] { -webkit-transform: rotateY(220deg) rotateZ(45deg) translateX(30px); transform: rotateY(220deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="23"] { -webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px); transform: rotateY(230deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="24"] { -webkit-transform: rotateY(240deg) rotateZ(45deg) translateX(30px); transform: rotateY(240deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="25"] { -webkit-transform: rotateY(250deg) rotateZ(45deg) translateX(30px); transform: rotateY(250deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="26"] { -webkit-transform: rotateY(260deg) rotateZ(45deg) translateX(30px); transform: rotateY(260deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="27"] { -webkit-transform: rotateY(270deg) rotateZ(45deg) translateX(30px); transform: rotateY(270deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="28"] { -webkit-transform: rotateY(280deg) rotateZ(45deg) translateX(30px); transform: rotateY(280deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="29"] { -webkit-transform: rotateY(290deg) rotateZ(45deg) translateX(30px); transform: rotateY(290deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="30"] { -webkit-transform: rotateY(300deg) rotateZ(45deg) translateX(30px); transform: rotateY(300deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="31"] { -webkit-transform: rotateY(310deg) rotateZ(45deg) translateX(30px); transform: rotateY(310deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="32"] { -webkit-transform: rotateY(320deg) rotateZ(45deg) translateX(30px); transform: rotateY(320deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="33"] { -webkit-transform: rotateY(330deg) rotateZ(45deg) translateX(30px); transform: rotateY(330deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="34"] { -webkit-transform: rotateY(340deg) rotateZ(45deg) translateX(30px); transform: rotateY(340deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="35"] { -webkit-transform: rotateY(350deg) rotateZ(45deg) translateX(30px); transform: rotateY(350deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="36"] { -webkit-transform: rotateY(360deg) rotateZ(45deg) translateX(30px); transform: rotateY(360deg) rotateZ(45deg) translateX(30px); }
@-webkit-keyframes spin { to { -webkit-transform: rotateY(360deg) rotateX(360deg); transform: rotateY(360deg) rotateX(360deg); } } @keyframes spin { to { -webkit-transform: rotateY(360deg) rotateX(360deg); transform: rotateY(360deg) rotateX(360deg); } }
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
Java 开发团队常常面临测试覆盖率与开发效率的双重挑战。通过引入 AI 与自动化工具,团队不仅能减轻静态分析与单元测试的负担,还能在保障代码质量的同时提升开发节奏。本文以 Parasoft Jtest 为案例,深入探讨了当前主流的 AI 测试实践如何帮助企业实现代码级测试的优化与落地。
Sparx Systems Enterprise Architect(EA)作为一款领先的企业级建模工具,凭借其强大的四大引擎——BPSim、DMN、Open Modelica/SysML和可执行代码生成,为企业提供了从流程优化到智能决策的全方位支持。本文将深入解析这四大核心引擎如何显著提升企业建模的智能化水平和实用价值。
UI自动化测试中,团队常因语言偏好不同而协作困难,脚本复用也麻烦。从简单的录制测试升级到灵活脚本,或者搭建稳定框架,往往费时费力。TestComplete用自动化UI测试直接解决这些问题:它支持多种语言并行开发(Python, C#, C++等),让每个人用顺手的工具;还能轻松把录制脚本转换成代码,省去重写麻烦;并且自带实用框架和项目示例,开箱即用,大大加快搭建速度。
CodeRush 25.1 新推 AI 双引擎 AiGen(语音/文字生成与修改代码)和 AiFind(智能代码搜索),直接在 Visual Studio 环境中响应,免除窗口切换与手动操作,让开发者更专注核心问题。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号